From 4263e8549989b374bbf8f47c61e1e08a3fe3b041 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 12 Dec 2024 17:42:58 +0100
Subject: [PATCH 01/13] BoxControl: Add support for presets (#67688)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
---
 packages/components/CHANGELOG.md              |   6 +-
 packages/components/src/box-control/README.md |  16 ++
 packages/components/src/box-control/index.tsx |   4 +
 .../src/box-control/input-control.tsx         | 182 ++++++++++++++----
 .../src/box-control/stories/index.story.tsx   |  12 ++
 packages/components/src/box-control/types.ts  |  18 ++
 packages/components/src/box-control/utils.ts  |  60 ++++++
 7 files changed, 256 insertions(+), 42 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index e8ae2bc7ba6092..49cc196b1f7e69 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   `BoxControl`: Add presets support ([#67688](https://github.com/WordPress/gutenberg/pull/67688)).
+
 ### Deprecations
 
 -   `SelectControl`: Deprecate 36px default size ([#66898](https://github.com/WordPress/gutenberg/pull/66898)).
@@ -24,7 +28,7 @@
 -   `Menu`: Replace hardcoded white color with theme-ready variable ([#67649](https://github.com/WordPress/gutenberg/pull/67649)).
 -   `Navigation` (deprecated): Replace hardcoded white color with theme-ready variable ([#67649](https://github.com/WordPress/gutenberg/pull/67649)).
 -   `ToggleGroupControl`: Replace hardcoded white color with theme-ready variable ([#67649](https://github.com/WordPress/gutenberg/pull/67649)).
--   `RangeControl`: Update the design of the range control marks ([#67611](https://github.com/WordPress/gutenberg/pull/67611))
+-   `RangeControl`: Update the design of the range control marks ([#67611](https://github.com/WordPress/gutenberg/pull/67611)).
 -   `BorderBoxControl`: Reduce gap value when unlinked ([#67049](https://github.com/WordPress/gutenberg/pull/67049)).
 -   `DropdownMenu`: Increase option height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)).
 -   `MenuItem`: Increase height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)).
diff --git a/packages/components/src/box-control/README.md b/packages/components/src/box-control/README.md
index 8bcb5a5dad8fc2..da08cafceee42f 100644
--- a/packages/components/src/box-control/README.md
+++ b/packages/components/src/box-control/README.md
@@ -79,6 +79,22 @@ A callback function when an input value changes.
  - Required: No
  - Default: `() => {}`
 
+### `presets`
+
+Available presets to pick from.
+
+ - Type: `Preset[]`
+ - Required: No
+
+### `presetKey`
+
+The key of the preset to apply.
+If you provide a list of presets, you must provide a preset key to use.
+The format of preset selected values is going to be `var:preset|${ presetKey }|${ presetSlug }`
+
+ - Type: `string`
+ - Required: No
+
 ### `resetValues`
 
 The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.
diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx
index 279dfa55eafe38..d4d4b03f893036 100644
--- a/packages/components/src/box-control/index.tsx
+++ b/packages/components/src/box-control/index.tsx
@@ -83,6 +83,8 @@ function BoxControl( {
 	splitOnAxis = false,
 	allowReset = true,
 	resetValues = DEFAULT_VALUES,
+	presets,
+	presetKey,
 	onMouseOver,
 	onMouseOut,
 }: BoxControlProps ) {
@@ -153,6 +155,8 @@ function BoxControl( {
 		sides,
 		values: inputValues,
 		__next40pxDefaultSize,
+		presets,
+		presetKey,
 	};
 
 	maybeWarnDeprecated36pxSize( {
diff --git a/packages/components/src/box-control/input-control.tsx b/packages/components/src/box-control/input-control.tsx
index 2e1765f518a57d..81fbcad42c1d08 100644
--- a/packages/components/src/box-control/input-control.tsx
+++ b/packages/components/src/box-control/input-control.tsx
@@ -3,6 +3,8 @@
  */
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { settings } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -11,10 +13,13 @@ import Tooltip from '../tooltip';
 import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import {
 	CUSTOM_VALUE_SETTINGS,
-	getAllowedSides,
 	getMergedValue,
-	isValueMixed,
+	getAllowedSides,
+	getPresetIndexFromValue,
+	getPresetValueFromIndex,
+	isValuePreset,
 	isValuesDefined,
+	isValueMixed,
 	LABELS,
 } from './utils';
 import {
@@ -24,6 +29,7 @@ import {
 	StyledUnitControl,
 } from './styles/box-control-styles';
 import type { BoxControlInputControlProps, BoxControlValue } from './types';
+import Button from '../button';
 
 const noop = () => {};
 
@@ -79,6 +85,8 @@ export default function BoxInputControl( {
 	sides,
 	side,
 	min = 0,
+	presets,
+	presetKey,
 	...props
 }: BoxControlInputControlProps ) {
 	const defaultValuesToModify = getSidesToModify( side, sides );
@@ -91,6 +99,15 @@ export default function BoxInputControl( {
 		onChange( nextValues );
 	};
 
+	const handleRawOnValueChange = ( next?: string ) => {
+		const nextValues = { ...values };
+		defaultValuesToModify.forEach( ( modifiedSide ) => {
+			nextValues[ modifiedSide ] = next;
+		} );
+
+		handleOnChange( nextValues );
+	};
+
 	const handleOnValueChange = (
 		next?: string,
 		extra?: { event: React.SyntheticEvent< Element, Event > }
@@ -148,52 +165,135 @@ export default function BoxInputControl( {
 	const usedValue =
 		mergedValue === undefined && computedUnit ? computedUnit : mergedValue;
 	const mixedPlaceholder = isMixed || isMixedUnit ? __( 'Mixed' ) : undefined;
+	const hasPresets = presets && presets.length > 0 && presetKey;
+	const hasPresetValue =
+		hasPresets &&
+		mergedValue !== undefined &&
+		! isMixed &&
+		isValuePreset( mergedValue, presetKey );
+	const [ showCustomValueControl, setShowCustomValueControl ] = useState(
+		! hasPresets ||
+			( ! hasPresetValue && ! isMixed && mergedValue !== undefined )
+	);
+	const presetIndex = hasPresetValue
+		? getPresetIndexFromValue( mergedValue, presetKey, presets )
+		: undefined;
+	const marks = hasPresets
+		? [ { value: 0, label: '', tooltip: __( 'None' ) } ].concat(
+				presets.map( ( preset, index ) => ( {
+					value: index + 1,
+					label: '',
+					tooltip: preset.name ?? preset.slug,
+				} ) )
+		  )
+		: [];
 
 	return (
 		<InputWrapper key={ `box-control-${ side }` } expanded>
 			<FlexedBoxControlIcon side={ side } sides={ sides } />
-			<Tooltip placement="top-end" text={ LABELS[ side ] }>
-				<StyledUnitControl
-					{ ...props }
-					min={ min }
-					__shouldNotWarnDeprecated36pxSize
-					__next40pxDefaultSize={ __next40pxDefaultSize }
-					className="component-box-control__unit-control"
-					id={ inputId }
-					isPressEnterToChange
-					disableUnits={ isMixed || isMixedUnit }
-					value={ usedValue }
-					onChange={ handleOnValueChange }
-					onUnitChange={ handleOnUnitChange }
-					onFocus={ handleOnFocus }
+			{ showCustomValueControl && (
+				<>
+					<Tooltip placement="top-end" text={ LABELS[ side ] }>
+						<StyledUnitControl
+							{ ...props }
+							min={ min }
+							__shouldNotWarnDeprecated36pxSize
+							__next40pxDefaultSize={ __next40pxDefaultSize }
+							className="component-box-control__unit-control"
+							id={ inputId }
+							isPressEnterToChange
+							disableUnits={ isMixed || isMixedUnit }
+							value={ usedValue }
+							onChange={ handleOnValueChange }
+							onUnitChange={ handleOnUnitChange }
+							onFocus={ handleOnFocus }
+							label={ LABELS[ side ] }
+							placeholder={ mixedPlaceholder }
+							hideLabelFromVision
+						/>
+					</Tooltip>
+
+					<FlexedRangeControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize={ __next40pxDefaultSize }
+						__shouldNotWarnDeprecated36pxSize
+						aria-controls={ inputId }
+						label={ LABELS[ side ] }
+						hideLabelFromVision
+						onChange={ ( newValue ) => {
+							handleOnValueChange(
+								newValue !== undefined
+									? [ newValue, computedUnit ].join( '' )
+									: undefined
+							);
+						} }
+						min={ isFinite( min ) ? min : 0 }
+						max={
+							CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]
+								?.max ?? 10
+						}
+						step={
+							CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]
+								?.step ?? 0.1
+						}
+						value={ parsedQuantity ?? 0 }
+						withInputField={ false }
+					/>
+				</>
+			) }
+
+			{ hasPresets && ! showCustomValueControl && (
+				<FlexedRangeControl
+					__next40pxDefaultSize
+					className="spacing-sizes-control__range-control"
+					value={ presetIndex !== undefined ? presetIndex + 1 : 0 }
+					onChange={ ( newIndex ) => {
+						const newValue =
+							newIndex === 0 || newIndex === undefined
+								? undefined
+								: getPresetValueFromIndex(
+										newIndex - 1,
+										presetKey,
+										presets
+								  );
+						handleRawOnValueChange( newValue );
+					} }
+					withInputField={ false }
+					aria-valuenow={
+						presetIndex !== undefined ? presetIndex + 1 : 0
+					}
+					aria-valuetext={
+						marks[ presetIndex !== undefined ? presetIndex + 1 : 0 ]
+							.label
+					}
+					renderTooltipContent={ ( index ) =>
+						marks[ ! index ? 0 : index ].tooltip
+					}
+					min={ 0 }
+					max={ marks.length - 1 }
+					marks={ marks }
 					label={ LABELS[ side ] }
-					placeholder={ mixedPlaceholder }
 					hideLabelFromVision
+					__nextHasNoMarginBottom
+				/>
+			) }
+
+			{ hasPresets && (
+				<Button
+					label={
+						showCustomValueControl
+							? __( 'Use size preset' )
+							: __( 'Set custom size' )
+					}
+					icon={ settings }
+					onClick={ () => {
+						setShowCustomValueControl( ! showCustomValueControl );
+					} }
+					isPressed={ showCustomValueControl }
+					size="small"
+					iconSize={ 24 }
 				/>
-			</Tooltip>
-
-			<FlexedRangeControl
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize={ __next40pxDefaultSize }
-				__shouldNotWarnDeprecated36pxSize
-				aria-controls={ inputId }
-				label={ LABELS[ side ] }
-				hideLabelFromVision
-				onChange={ ( newValue ) => {
-					handleOnValueChange(
-						newValue !== undefined
-							? [ newValue, computedUnit ].join( '' )
-							: undefined
-					);
-				} }
-				min={ isFinite( min ) ? min : 0 }
-				max={ CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]?.max ?? 10 }
-				step={
-					CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]?.step ?? 0.1
-				}
-				value={ parsedQuantity ?? 0 }
-				withInputField={ false }
-			/>
+			) }
 		</InputWrapper>
 	);
 }
diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx
index 0d8b96de063168..aa16547d24ab18 100644
--- a/packages/components/src/box-control/stories/index.story.tsx
+++ b/packages/components/src/box-control/stories/index.story.tsx
@@ -81,3 +81,15 @@ AxialControlsWithSingleSide.args = {
 	sides: [ 'horizontal' ],
 	splitOnAxis: true,
 };
+
+export const ControlWithPresets = TemplateControlled.bind( {} );
+ControlWithPresets.args = {
+	...Default.args,
+	presets: [
+		{ name: 'Small', slug: 'small', value: '4px' },
+		{ name: 'Medium', slug: 'medium', value: '8px' },
+		{ name: 'Large', slug: 'large', value: '12px' },
+		{ name: 'Extra Large', slug: 'extra-large', value: '16px' },
+	],
+	presetKey: 'padding',
+};
diff --git a/packages/components/src/box-control/types.ts b/packages/components/src/box-control/types.ts
index 73de68d1bd513a..43629e09258a58 100644
--- a/packages/components/src/box-control/types.ts
+++ b/packages/components/src/box-control/types.ts
@@ -15,6 +15,12 @@ export type CustomValueUnits = {
 	[ key: string ]: { max: number; step: number };
 };
 
+export interface Preset {
+	name: string;
+	slug: string;
+	value?: string;
+}
+
 type UnitControlPassthroughProps = Omit<
 	UnitControlProps,
 	'label' | 'onChange' | 'onFocus' | 'units'
@@ -94,6 +100,16 @@ export type BoxControlProps = Pick< UnitControlProps, 'units' > &
 		 * @default false
 		 */
 		__next40pxDefaultSize?: boolean;
+		/**
+		 * Available presets to pick from.
+		 */
+		presets?: Preset[];
+		/**
+		 * The key of the preset to apply.
+		 * If you provide a list of presets, you must provide a preset key to use.
+		 * The format of preset selected values is going to be `var:preset|${ presetKey }|${ presetSlug }`
+		 */
+		presetKey?: string;
 	};
 
 export type BoxControlInputControlProps = UnitControlPassthroughProps & {
@@ -120,6 +136,8 @@ export type BoxControlInputControlProps = UnitControlPassthroughProps & {
 	 * It can be a concrete side like: left, right, top, bottom or a combined one like: horizontal, vertical.
 	 */
 	side: keyof typeof LABELS;
+	presets?: Preset[];
+	presetKey?: string;
 };
 
 export type BoxControlIconProps = {
diff --git a/packages/components/src/box-control/utils.ts b/packages/components/src/box-control/utils.ts
index 111451790e35d5..26bdae4e559511 100644
--- a/packages/components/src/box-control/utils.ts
+++ b/packages/components/src/box-control/utils.ts
@@ -11,6 +11,7 @@ import type {
 	BoxControlProps,
 	BoxControlValue,
 	CustomValueUnits,
+	Preset,
 } from './types';
 import deprecated from '@wordpress/deprecated';
 
@@ -272,3 +273,62 @@ export function getAllowedSides(
 	} );
 	return allowedSides;
 }
+
+/**
+ * Checks if a value is a preset value.
+ *
+ * @param value     The value to check.
+ * @param presetKey The preset key to check against.
+ * @return Whether the value is a preset value.
+ */
+export function isValuePreset( value: string, presetKey: string ) {
+	return value.startsWith( `var:preset|${ presetKey }|` );
+}
+
+/**
+ * Returns the index of the preset value in the presets array.
+ *
+ * @param value     The value to check.
+ * @param presetKey The preset key to check against.
+ * @param presets   The array of presets to search.
+ * @return The index of the preset value in the presets array.
+ */
+export function getPresetIndexFromValue(
+	value: string,
+	presetKey: string,
+	presets: Preset[]
+) {
+	if ( ! isValuePreset( value, presetKey ) ) {
+		return undefined;
+	}
+
+	const match = value.match(
+		new RegExp( `^var:preset\\|${ presetKey }\\|(.+)$` )
+	);
+	if ( ! match ) {
+		return undefined;
+	}
+	const slug = match[ 1 ];
+	const index = presets.findIndex( ( preset ) => {
+		return preset.slug === slug;
+	} );
+
+	return index !== -1 ? index : undefined;
+}
+
+/**
+ * Returns the preset value from the index.
+ *
+ * @param index     The index of the preset value in the presets array.
+ * @param presetKey The preset key to check against.
+ * @param presets   The array of presets to search.
+ * @return The preset value from the index.
+ */
+export function getPresetValueFromIndex(
+	index: number,
+	presetKey: string,
+	presets: Preset[]
+) {
+	const preset = presets[ index ];
+	return `var:preset|${ presetKey }|${ preset.slug }`;
+}

From f88ec2b59fbe1dcfc9b56b3ccbc2e0a8c9cf48c6 Mon Sep 17 00:00:00 2001
From: Miguel Fonseca <150562+mcsf@users.noreply.github.com>
Date: Thu, 12 Dec 2024 16:57:39 +0000
Subject: [PATCH 02/13] WIP: wp-env: add multisite support (#67845)

---
 packages/env/CHANGELOG.md                     |  1 +
 packages/env/lib/config/parse-config.js       |  6 ++++
 .../__snapshots__/config-integration.js.snap  |  8 +++++
 packages/env/lib/config/test/parse-config.js  |  1 +
 packages/env/lib/wordpress.js                 | 31 ++++++++++++++++++-
 schemas/json/wp-env.json                      |  7 ++++-
 6 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/packages/env/CHANGELOG.md b/packages/env/CHANGELOG.md
index 0298e21c810009..252e1e65dae872 100644
--- a/packages/env/CHANGELOG.md
+++ b/packages/env/CHANGELOG.md
@@ -7,6 +7,7 @@
 ### Enhancements
 
 - Add phpMyAdmin as an optional service. Enabled via the new `phpmyadminPort` environment config, as well as env vars `WP_ENV_PHPMYADMIN_PORT` and `WP_ENV_TESTS_PHPMYADMIN_PORT`.
+- Add support for WordPress multisite installations. Enabled via the new `multisite` environment config.
 
 ### Internal
 
diff --git a/packages/env/lib/config/parse-config.js b/packages/env/lib/config/parse-config.js
index bddd7bc72aaee0..d5e06c5bb9beed 100644
--- a/packages/env/lib/config/parse-config.js
+++ b/packages/env/lib/config/parse-config.js
@@ -52,6 +52,7 @@ const mergeConfigs = require( './merge-configs' );
  * @property {number}                    port           The port to use.
  * @property {number}                    mysqlPort      The port to use for MySQL. Random if empty.
  * @property {number}                    phpmyadminPort The port to use for phpMyAdmin. If empty, disabled phpMyAdmin.
+ * @property {boolean}                   multisite      Whether to set up a multisite installation.
  * @property {Object}                    config         Mapping of wp-config.php constants to their desired values.
  * @property {Object.<string, WPSource>} mappings       Mapping of WordPress directories to local directories which should be mounted.
  * @property {string|null}               phpVersion     Version of PHP to use in the environments, of the format 0.0.
@@ -89,6 +90,7 @@ const DEFAULT_ENVIRONMENT_CONFIG = {
 	testsPort: 8889,
 	mysqlPort: null,
 	phpmyadminPort: null,
+	multisite: false,
 	mappings: {},
 	config: {
 		FS_METHOD: 'direct',
@@ -466,6 +468,10 @@ async function parseEnvironmentConfig(
 		parsedConfig.phpmyadminPort = config.phpmyadminPort;
 	}
 
+	if ( config.multisite !== undefined ) {
+		parsedConfig.multisite = config.multisite;
+	}
+
 	if ( config.phpVersion !== undefined ) {
 		// Support null as a valid input.
 		if ( config.phpVersion !== null ) {
diff --git a/packages/env/lib/config/test/__snapshots__/config-integration.js.snap b/packages/env/lib/config/test/__snapshots__/config-integration.js.snap
index 6b671a6bc858eb..833a8a54d7749a 100644
--- a/packages/env/lib/config/test/__snapshots__/config-integration.js.snap
+++ b/packages/env/lib/config/test/__snapshots__/config-integration.js.snap
@@ -29,6 +29,7 @@ exports[`Config Integration should load local and override configuration files 1
         "url": "https://github.com/WordPress/WordPress.git",
       },
       "mappings": {},
+      "multisite": false,
       "mysqlPort": 23306,
       "phpVersion": null,
       "phpmyadminPort": null,
@@ -59,6 +60,7 @@ exports[`Config Integration should load local and override configuration files 1
         "url": "https://github.com/WordPress/WordPress.git",
       },
       "mappings": {},
+      "multisite": false,
       "mysqlPort": 23307,
       "phpVersion": null,
       "phpmyadminPort": null,
@@ -106,6 +108,7 @@ exports[`Config Integration should load local configuration file 1`] = `
         "url": "https://github.com/WordPress/WordPress.git",
       },
       "mappings": {},
+      "multisite": false,
       "mysqlPort": 13306,
       "phpVersion": null,
       "phpmyadminPort": null,
@@ -136,6 +139,7 @@ exports[`Config Integration should load local configuration file 1`] = `
         "url": "https://github.com/WordPress/WordPress.git",
       },
       "mappings": {},
+      "multisite": false,
       "mysqlPort": 23307,
       "phpVersion": null,
       "phpmyadminPort": null,
@@ -183,6 +187,7 @@ exports[`Config Integration should use default configuration 1`] = `
         "url": "https://github.com/WordPress/WordPress.git",
       },
       "mappings": {},
+      "multisite": false,
       "mysqlPort": null,
       "phpVersion": null,
       "phpmyadminPort": null,
@@ -213,6 +218,7 @@ exports[`Config Integration should use default configuration 1`] = `
         "url": "https://github.com/WordPress/WordPress.git",
       },
       "mappings": {},
+      "multisite": false,
       "mysqlPort": null,
       "phpVersion": null,
       "phpmyadminPort": null,
@@ -260,6 +266,7 @@ exports[`Config Integration should use environment variables over local and over
         "url": "https://github.com/WordPress/WordPress.git",
       },
       "mappings": {},
+      "multisite": false,
       "mysqlPort": 23306,
       "phpVersion": null,
       "phpmyadminPort": null,
@@ -291,6 +298,7 @@ exports[`Config Integration should use environment variables over local and over
         "url": "https://github.com/WordPress/WordPress.git",
       },
       "mappings": {},
+      "multisite": false,
       "mysqlPort": 23307,
       "phpVersion": null,
       "phpmyadminPort": null,
diff --git a/packages/env/lib/config/test/parse-config.js b/packages/env/lib/config/test/parse-config.js
index cc6e2c7a96bbc0..968c8b66a4ec15 100644
--- a/packages/env/lib/config/test/parse-config.js
+++ b/packages/env/lib/config/test/parse-config.js
@@ -23,6 +23,7 @@ const DEFAULT_CONFIG = {
 	testsPort: 8889,
 	mysqlPort: null,
 	phpmyadminPort: null,
+	multisite: false,
 	phpVersion: null,
 	coreSource: {
 		type: 'git',
diff --git a/packages/env/lib/wordpress.js b/packages/env/lib/wordpress.js
index bd3c4a23f8ff5d..8c08fb1f20ec78 100644
--- a/packages/env/lib/wordpress.js
+++ b/packages/env/lib/wordpress.js
@@ -86,11 +86,40 @@ async function configureWordPress( environment, config, spinner ) {
 		// Ignore error.
 	}
 
-	const installCommand = `wp core install --url="${ config.env[ environment ].config.WP_SITEURL }" --title="${ config.name }" --admin_user=admin --admin_password=password --admin_email=wordpress@example.com --skip-email`;
+	const isMultisite = config.env[ environment ].multisite;
+
+	const installMethod = isMultisite ? 'multisite-install' : 'install';
+	const installCommand = `wp core ${ installMethod } --url="${ config.env[ environment ].config.WP_SITEURL }" --title="${ config.name }" --admin_user=admin --admin_password=password --admin_email=wordpress@example.com --skip-email`;
 
 	// -eo pipefail exits the command as soon as anything fails in bash.
 	const setupCommands = [ 'set -eo pipefail', installCommand ];
 
+	// Bootstrap .htaccess for multisite
+	if ( isMultisite ) {
+		// Using a subshell with `exec` was the best tradeoff I could come up
+		// with between readability of this source and compatibility with the
+		// way that all strings in `setupCommands` are later joined with '&&'.
+		setupCommands.push(
+			`(
+exec > /var/www/html/.htaccess
+echo 'RewriteEngine On'
+echo 'RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]'
+echo 'RewriteBase /'
+echo 'RewriteRule ^index\.php$ - [L]'
+echo ''
+echo '# add a trailing slash to /wp-admin'
+echo 'RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]'
+echo ''
+echo 'RewriteCond %{REQUEST_FILENAME} -f [OR]'
+echo 'RewriteCond %{REQUEST_FILENAME} -d'
+echo 'RewriteRule ^ - [L]'
+echo 'RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]'
+echo 'RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]'
+echo 'RewriteRule . index.php [L]'
+)`
+		);
+	}
+
 	// WordPress versions below 5.1 didn't use proper spacing in wp-config.
 	const configAnchor =
 		wpVersion && isWPMajorMinorVersionLower( wpVersion, '5.1' )
diff --git a/schemas/json/wp-env.json b/schemas/json/wp-env.json
index 8aa604ed41ed1f..3958818714e4e6 100644
--- a/schemas/json/wp-env.json
+++ b/schemas/json/wp-env.json
@@ -66,6 +66,10 @@
 				"phpmyadminPort": {
 					"description": "The port number to access phpMyAdmin.",
 					"type": "integer"
+				},
+				"multisite": {
+					"description": "Whether to set up a multisite installation.",
+					"type": "boolean"
 				}
 			}
 		},
@@ -78,7 +82,8 @@
 				"port",
 				"config",
 				"mappings",
-				"phpmyadminPort"
+				"phpmyadminPort",
+				"multisite"
 			]
 		}
 	},

From 9437f7e73f9c6c9f831f2a26a555dfa8fddb3d61 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 12 Dec 2024 18:47:35 +0100
Subject: [PATCH 03/13] RangeControl: animate thumb and track only when using
 marks (#67836)

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .../src/range-control/styles/range-control-styles.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts
index d943ca472911ed..c86c57800cac46 100644
--- a/packages/components/src/range-control/styles/range-control-styles.ts
+++ b/packages/components/src/range-control/styles/range-control-styles.ts
@@ -130,8 +130,10 @@ export const Track = styled.span`
 	margin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;
 	top: 0;
 
-	@media not ( prefers-reduced-motion ) {
-		transition: width ease 0.1s;
+	.is-marked & {
+		@media not ( prefers-reduced-motion ) {
+			transition: width ease 0.1s;
+		}
 	}
 
 	${ trackBackgroundColor };
@@ -203,8 +205,10 @@ export const ThumbWrapper = styled.span`
 	border-radius: ${ CONFIG.radiusRound };
 	z-index: 3;
 
-	@media not ( prefers-reduced-motion ) {
-		transition: left ease 0.1s;
+	.is-marked & {
+		@media not ( prefers-reduced-motion ) {
+			transition: left ease 0.1s;
+		}
 	}
 
 	${ thumbColor };

From b74283b82cf1cae766f3982f158a004eaf115d46 Mon Sep 17 00:00:00 2001
From: Eshaan Dabasiya <76681468+im3dabasia@users.noreply.github.com>
Date: Fri, 13 Dec 2024 00:12:59 +0530
Subject: [PATCH 04/13] Refactor "Settings" panel of Archives block to use
 ToolsPanel instead of PanelBody (#67841)

Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: fabiankaegy < fabiankaegy@git.wordpress.org>
---
 packages/block-library/src/archives/edit.js | 122 ++++++++++++++------
 1 file changed, 86 insertions(+), 36 deletions(-)

diff --git a/packages/block-library/src/archives/edit.js b/packages/block-library/src/archives/edit.js
index 60b8715988ed94..b51bd9a4fe1e6b 100644
--- a/packages/block-library/src/archives/edit.js
+++ b/packages/block-library/src/archives/edit.js
@@ -2,10 +2,11 @@
  * WordPress dependencies
  */
 import {
-	PanelBody,
 	ToggleControl,
 	SelectControl,
 	Disabled,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
@@ -17,55 +18,104 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							displayAsDropdown: false,
+							showLabel: false,
+							showPostCounts: false,
+							type: 'monthly',
+						} );
+					} }
+				>
+					<ToolsPanelItem
 						label={ __( 'Display as dropdown' ) }
-						checked={ displayAsDropdown }
-						onChange={ () =>
-							setAttributes( {
-								displayAsDropdown: ! displayAsDropdown,
-							} )
+						isShownByDefault
+						hasValue={ () => displayAsDropdown }
+						onDeselect={ () =>
+							setAttributes( { displayAsDropdown: false } )
 						}
-					/>
-					{ displayAsDropdown && (
+					>
 						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Show label' ) }
-							checked={ showLabel }
+							label={ __( 'Display as dropdown' ) }
+							checked={ displayAsDropdown }
 							onChange={ () =>
 								setAttributes( {
-									showLabel: ! showLabel,
+									displayAsDropdown: ! displayAsDropdown,
 								} )
 							}
 						/>
+					</ToolsPanelItem>
+
+					{ displayAsDropdown && (
+						<ToolsPanelItem
+							label={ __( 'Show label' ) }
+							isShownByDefault
+							hasValue={ () => showLabel }
+							onDeselect={ () =>
+								setAttributes( { showLabel: false } )
+							}
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Show label' ) }
+								checked={ showLabel }
+								onChange={ () =>
+									setAttributes( {
+										showLabel: ! showLabel,
+									} )
+								}
+							/>
+						</ToolsPanelItem>
 					) }
-					<ToggleControl
-						__nextHasNoMarginBottom
+
+					<ToolsPanelItem
 						label={ __( 'Show post counts' ) }
-						checked={ showPostCounts }
-						onChange={ () =>
-							setAttributes( {
-								showPostCounts: ! showPostCounts,
-							} )
+						isShownByDefault
+						hasValue={ () => showPostCounts }
+						onDeselect={ () =>
+							setAttributes( { showPostCounts: false } )
 						}
-					/>
-					<SelectControl
-						__next40pxDefaultSize
-						__nextHasNoMarginBottom
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show post counts' ) }
+							checked={ showPostCounts }
+							onChange={ () =>
+								setAttributes( {
+									showPostCounts: ! showPostCounts,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
 						label={ __( 'Group by' ) }
-						options={ [
-							{ label: __( 'Year' ), value: 'yearly' },
-							{ label: __( 'Month' ), value: 'monthly' },
-							{ label: __( 'Week' ), value: 'weekly' },
-							{ label: __( 'Day' ), value: 'daily' },
-						] }
-						value={ type }
-						onChange={ ( value ) =>
-							setAttributes( { type: value } )
+						isShownByDefault
+						hasValue={ () => !! type }
+						onDeselect={ () =>
+							setAttributes( { type: 'monthly' } )
 						}
-					/>
-				</PanelBody>
+					>
+						<SelectControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Group by' ) }
+							options={ [
+								{ label: __( 'Year' ), value: 'yearly' },
+								{ label: __( 'Month' ), value: 'monthly' },
+								{ label: __( 'Week' ), value: 'weekly' },
+								{ label: __( 'Day' ), value: 'daily' },
+							] }
+							value={ type }
+							onChange={ ( value ) =>
+								setAttributes( { type: value } )
+							}
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<div { ...useBlockProps() }>
 				<Disabled>

From 70c6cb796896e99157fe5adc8d09f64e0da35b15 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 13 Dec 2024 04:13:31 +0900
Subject: [PATCH 05/13] LineHeightControl: Deprecate 36px default size (#67850)

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .../src/components/line-height-control/README.md     |  1 +
 .../src/components/line-height-control/index.js      | 12 ++++++++++++
 .../line-height-control/stories/index.story.js       |  1 +
 .../src/components/line-height-control/test/index.js |  8 +++++++-
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/line-height-control/README.md b/packages/block-editor/src/components/line-height-control/README.md
index 89bcc69622367f..2f719b5a7210e6 100644
--- a/packages/block-editor/src/components/line-height-control/README.md
+++ b/packages/block-editor/src/components/line-height-control/README.md
@@ -18,6 +18,7 @@ const MyLineHeightControl = () => (
 	<LineHeightControl
 		value={ lineHeight }
 		onChange={ onChange }
+		__next40pxDefaultSize
 	/>
 );
 ```
diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js
index e6af602c2875ae..ea692ceb452e3a 100644
--- a/packages/block-editor/src/components/line-height-control/index.js
+++ b/packages/block-editor/src/components/line-height-control/index.js
@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -89,6 +90,17 @@ const LineHeightControl = ( {
 		onChange( `${ nextValue }` );
 	};
 
+	if (
+		! __next40pxDefaultSize &&
+		( otherProps.size === undefined || otherProps.size === 'default' )
+	) {
+		deprecated( `36px default size for wp.blockEditor.LineHeightControl`, {
+			since: '6.8',
+			version: '7.1',
+			hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
+		} );
+	}
+
 	return (
 		<div className="block-editor-line-height-control">
 			<NumberControl
diff --git a/packages/block-editor/src/components/line-height-control/stories/index.story.js b/packages/block-editor/src/components/line-height-control/stories/index.story.js
index 6d26fe2220fd23..f9f8c7eef12554 100644
--- a/packages/block-editor/src/components/line-height-control/stories/index.story.js
+++ b/packages/block-editor/src/components/line-height-control/stories/index.story.js
@@ -22,6 +22,7 @@ const Template = ( props ) => {
 
 export const Default = Template.bind( {} );
 Default.args = {
+	__next40pxDefaultSize: true,
 	__unstableInputWidth: '100px',
 };
 
diff --git a/packages/block-editor/src/components/line-height-control/test/index.js b/packages/block-editor/src/components/line-height-control/test/index.js
index b98bc93c48a83a..488d22b768114e 100644
--- a/packages/block-editor/src/components/line-height-control/test/index.js
+++ b/packages/block-editor/src/components/line-height-control/test/index.js
@@ -19,7 +19,13 @@ const SPIN = STEP * SPIN_FACTOR;
 
 const ControlledLineHeightControl = () => {
 	const [ value, setValue ] = useState();
-	return <LineHeightControl value={ value } onChange={ setValue } />;
+	return (
+		<LineHeightControl
+			value={ value }
+			onChange={ setValue }
+			__next40pxDefaultSize
+		/>
+	);
 };
 
 describe( 'LineHeightControl', () => {

From 75713215b3562a6a61986641f1f42a12bde7c643 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 13 Dec 2024 04:14:12 +0900
Subject: [PATCH 06/13] FontAppearanceControl: Deprecate 36px default size
 (#67854)

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .../components/font-appearance-control/index.js   | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/block-editor/src/components/font-appearance-control/index.js b/packages/block-editor/src/components/font-appearance-control/index.js
index f9e8023f93ec69..62396c2dc7bd64 100644
--- a/packages/block-editor/src/components/font-appearance-control/index.js
+++ b/packages/block-editor/src/components/font-appearance-control/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { CustomSelectControl } from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
 import { useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -147,6 +148,20 @@ export default function FontAppearanceControl( props ) {
 		);
 	};
 
+	if (
+		! __next40pxDefaultSize &&
+		( otherProps.size === undefined || otherProps.size === 'default' )
+	) {
+		deprecated(
+			`36px default size for wp.blockEditor.__experimentalFontAppearanceControl`,
+			{
+				since: '6.8',
+				version: '7.1',
+				hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
+			}
+		);
+	}
+
 	return (
 		hasStylesOrWeights && (
 			<CustomSelectControl

From 4db31201fb8e62d9393f096a79e82a3b21aea074 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 13 Dec 2024 04:14:37 +0900
Subject: [PATCH 07/13] FontFamilyControl: Deprecate 36px default size (#67853)

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .../src/components/font-family/README.md           |  1 +
 .../src/components/font-family/index.js            | 14 ++++++++++++++
 .../components/font-family/stories/index.story.js  |  1 +
 3 files changed, 16 insertions(+)

diff --git a/packages/block-editor/src/components/font-family/README.md b/packages/block-editor/src/components/font-family/README.md
index 57697f595cc800..25190802e5d0bf 100644
--- a/packages/block-editor/src/components/font-family/README.md
+++ b/packages/block-editor/src/components/font-family/README.md
@@ -29,6 +29,7 @@ const MyFontFamilyControl = () => {
 				setFontFamily( newFontFamily );
 			} }
 			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 		/>
 	);
 };
diff --git a/packages/block-editor/src/components/font-family/index.js b/packages/block-editor/src/components/font-family/index.js
index e8d0d7ed2dd808..6a723bb24c48ec 100644
--- a/packages/block-editor/src/components/font-family/index.js
+++ b/packages/block-editor/src/components/font-family/index.js
@@ -58,6 +58,20 @@ export default function FontFamilyControl( {
 		);
 	}
 
+	if (
+		! __next40pxDefaultSize &&
+		( props.size === undefined || props.size === 'default' )
+	) {
+		deprecated(
+			`36px default size for wp.blockEditor.__experimentalFontFamilyControl`,
+			{
+				since: '6.8',
+				version: '7.1',
+				hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
+			}
+		);
+	}
+
 	return (
 		<CustomSelectControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
diff --git a/packages/block-editor/src/components/font-family/stories/index.story.js b/packages/block-editor/src/components/font-family/stories/index.story.js
index 54dadeb213f12c..9077c131cbe3bb 100644
--- a/packages/block-editor/src/components/font-family/stories/index.story.js
+++ b/packages/block-editor/src/components/font-family/stories/index.story.js
@@ -50,5 +50,6 @@ export const Default = {
 			},
 		],
 		__nextHasNoMarginBottom: true,
+		__next40pxDefaultSize: true,
 	},
 };

From 51e124c3bb650c8ad7919c9f99afe7f8568e52d7 Mon Sep 17 00:00:00 2001
From: Mayank Tripathi <70465598+Mayank-Tripathi32@users.noreply.github.com>
Date: Fri, 13 Dec 2024 00:52:00 +0530
Subject: [PATCH 08/13] Refactor "Settings" panel of Button block to use
 ToolsPanel instead of PanelBody (#67887)

Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
---
 packages/block-library/src/button/edit.js | 56 ++++++++++++++---------
 1 file changed, 35 insertions(+), 21 deletions(-)

diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index 2106c2031491fe..9f2a9048af4c0b 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -18,10 +18,11 @@ import { useEffect, useState, useRef, useMemo } from '@wordpress/element';
 import {
 	Button,
 	ButtonGroup,
-	PanelBody,
 	TextControl,
 	ToolbarButton,
 	Popover,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import {
 	AlignmentControl,
@@ -123,26 +124,39 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
 	}
 
 	return (
-		<PanelBody title={ __( 'Settings' ) }>
-			<ButtonGroup aria-label={ __( 'Button width' ) }>
-				{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
-					return (
-						<Button
-							key={ widthValue }
-							size="small"
-							variant={
-								widthValue === selectedWidth
-									? 'primary'
-									: undefined
-							}
-							onClick={ () => handleChange( widthValue ) }
-						>
-							{ widthValue }%
-						</Button>
-					);
-				} ) }
-			</ButtonGroup>
-		</PanelBody>
+		<ToolsPanel
+			label={ __( 'Settings' ) }
+			resetAll={ () => {
+				handleChange( undefined );
+			} }
+		>
+			<ToolsPanelItem
+				label={ __( 'Button width' ) }
+				__nextHasNoMarginBottom
+				isShownByDefault
+				hasValue={ () => !! selectedWidth }
+				onDeselect={ () => handleChange( undefined ) }
+			>
+				<ButtonGroup aria-label={ __( 'Button width' ) }>
+					{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
+						return (
+							<Button
+								key={ widthValue }
+								size="small"
+								variant={
+									widthValue === selectedWidth
+										? 'primary'
+										: undefined
+								}
+								onClick={ () => handleChange( widthValue ) }
+							>
+								{ widthValue }%
+							</Button>
+						);
+					} ) }
+				</ButtonGroup>
+			</ToolsPanelItem>
+		</ToolsPanel>
 	);
 }
 

From 63b0e7f1ce6a8626fecf6714d6288b534220f46b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20K=C3=A4gy?= <mail@fabian-kaegy.de>
Date: Thu, 12 Dec 2024 20:27:21 +0100
Subject: [PATCH 09/13] Adding @fabiankaegy as a code owner of the block
 library package (#67891)

Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
---
 .github/CODEOWNERS | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 2ec03cba722c6b..3e02267da7c512 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -13,7 +13,7 @@
 /packages/data-controls                         @nerrad
 
 # Blocks
-/packages/block-library                         @ajitbohra
+/packages/block-library                         @ajitbohra @fabiankaegy
 /packages/block-library/src/gallery             @geriux
 /packages/block-library/src/comment-template    @michalczaplinski
 /packages/block-library/src/comments            @michalczaplinski

From cff73d475e9323e63657c0c246cb613ca3388c8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Thu, 12 Dec 2024 21:19:27 +0100
Subject: [PATCH 10/13] Pages: update layout-specific config when the view is
 updated (#67881)

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
---
 packages/edit-site/src/components/post-list/index.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/post-list/index.js b/packages/edit-site/src/components/post-list/index.js
index a67a505795b3c8..bbf5d654ddb57a 100644
--- a/packages/edit-site/src/components/post-list/index.js
+++ b/packages/edit-site/src/components/post-list/index.js
@@ -109,6 +109,7 @@ function useView( postType ) {
 		return {
 			...initialView,
 			type,
+			...defaultLayouts[ type ],
 		};
 	} );
 
@@ -140,13 +141,15 @@ function useView( postType ) {
 	// without affecting any other config.
 	const onUrlLayoutChange = useEvent( () => {
 		setView( ( prevView ) => {
-			const layoutToApply = layout ?? LAYOUT_LIST;
-			if ( layoutToApply === prevView.type ) {
+			const newType = layout ?? LAYOUT_LIST;
+			if ( newType === prevView.type ) {
 				return prevView;
 			}
+
 			return {
 				...prevView,
-				type: layout ?? LAYOUT_LIST,
+				type: newType,
+				...defaultLayouts[ newType ],
 			};
 		} );
 	} );
@@ -168,6 +171,7 @@ function useView( postType ) {
 			setView( {
 				...newView,
 				type,
+				...defaultLayouts[ type ],
 			} );
 		}
 	} );

From 8d6b8c5c05a2427af04e8639341ddcfac299751e Mon Sep 17 00:00:00 2001
From: Sukhendu Sekhar Guria <sukhendu.guria@rtcamp.com>
Date: Fri, 13 Dec 2024 04:09:55 +0530
Subject: [PATCH 11/13] Refactor "Settings" panel of Table block to use
 ToolsPanel instead of PanelBody (#67896)

Co-authored-by: Sukhendu2002 <sukhendu2002@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
---
 packages/block-library/src/table/edit.js | 74 +++++++++++++++++-------
 1 file changed, 54 insertions(+), 20 deletions(-)

diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index f1cb3fa5d8b8ae..1d61bab0787e44 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -20,12 +20,13 @@ import {
 import { __ } from '@wordpress/i18n';
 import {
 	Button,
-	PanelBody,
 	Placeholder,
 	TextControl,
 	ToggleControl,
 	ToolbarDropdownMenu,
 	__experimentalHasSplitBorders as hasSplitBorders,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import {
 	alignLeft,
@@ -473,33 +474,66 @@ function TableEdit( {
 				</>
 			) }
 			<InspectorControls>
-				<PanelBody
-					title={ __( 'Settings' ) }
-					className="blocks-table-settings"
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							hasFixedLayout: true,
+							head: [],
+							foot: [],
+						} );
+					} }
 				>
-					<ToggleControl
-						__nextHasNoMarginBottom
+					<ToolsPanelItem
+						hasValue={ () => hasFixedLayout !== true }
 						label={ __( 'Fixed width table cells' ) }
-						checked={ !! hasFixedLayout }
-						onChange={ onChangeFixedLayout }
-					/>
+						onDeselect={ () =>
+							setAttributes( { hasFixedLayout: true } )
+						}
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Fixed width table cells' ) }
+							checked={ !! hasFixedLayout }
+							onChange={ onChangeFixedLayout }
+						/>
+					</ToolsPanelItem>
 					{ ! isEmpty && (
 						<>
-							<ToggleControl
-								__nextHasNoMarginBottom
+							<ToolsPanelItem
+								hasValue={ () => head && head.length }
 								label={ __( 'Header section' ) }
-								checked={ !! ( head && head.length ) }
-								onChange={ onToggleHeaderSection }
-							/>
-							<ToggleControl
-								__nextHasNoMarginBottom
+								onDeselect={ () =>
+									setAttributes( { head: [] } )
+								}
+								isShownByDefault
+							>
+								<ToggleControl
+									__nextHasNoMarginBottom
+									label={ __( 'Header section' ) }
+									checked={ !! ( head && head.length ) }
+									onChange={ onToggleHeaderSection }
+								/>
+							</ToolsPanelItem>
+							<ToolsPanelItem
+								hasValue={ () => foot && foot.length }
 								label={ __( 'Footer section' ) }
-								checked={ !! ( foot && foot.length ) }
-								onChange={ onToggleFooterSection }
-							/>
+								onDeselect={ () =>
+									setAttributes( { foot: [] } )
+								}
+								isShownByDefault
+							>
+								<ToggleControl
+									__nextHasNoMarginBottom
+									label={ __( 'Footer section' ) }
+									checked={ !! ( foot && foot.length ) }
+									onChange={ onToggleFooterSection }
+								/>
+							</ToolsPanelItem>
 						</>
 					) }
-				</PanelBody>
+				</ToolsPanel>
 			</InspectorControls>
 			{ ! isEmpty && (
 				<table

From aca81875746075aa8cb7c37814372bcf6f7afb9b Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Fri, 13 Dec 2024 09:02:59 +0200
Subject: [PATCH 12/13] Storybook: Fix warnings in Layout document (#67865)

Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
---
 storybook/stories/foundations/layout.mdx | 60 ++++++++++++------------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/storybook/stories/foundations/layout.mdx b/storybook/stories/foundations/layout.mdx
index abc0c7c4f6947f..578f4e8b66e428 100644
--- a/storybook/stories/foundations/layout.mdx
+++ b/storybook/stories/foundations/layout.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 import areas from './static/areas.svg';
 import pageLayoutExample1 from './static/page-layout-example-1.svg';
 import pageLayoutExample2 from './static/page-layout-example-2.svg';
@@ -27,32 +27,34 @@ At the highest level admin pages are comprised of _areas_, that can be arranged
 Areas can be combined in different ways depending on the use case. Here are some examples.
 
 <table>
-	<tr>
-		<td style={{verticalAlign: 'top', width: '50%'}}>
-			#### Sidebar, Content Frame and Preview Frame
-			<img src={ pageLayoutExample1 } alt="Diagram illustrating an example of the 'Sidebar, Content Frame and Preview Frame' arrangement" width="100%" />
-
-			A demonstration of this arrangement can be found in the Styles section of the Site Editor, and in the Pages and Templates sections when List layout is selected.
-		</td>
-		<td style={{verticalAlign: 'top', width: '50%'}}>
-			#### Sidebar and Preview Frame
-			<img src={ pageLayoutExample2 } alt="Diagram illustrating an example of the 'Sidebar and Preview Frame' arrangement" width="100%" />
-
-			A demonstration of this arrangement can be found in the Design section.
-		</td>
-	</tr>
-	<tr>
-		<td style={{verticalAlign: 'top', width: '50%'}}>
-			#### Sidebar and Content Frame
-			<img src={ pageLayoutExample3 } alt="Diagram illustrating an example of the 'Sidebar and Content Frame' arrangement" width="100%" />
-
-			A demonstration of this arrangement can be found in the Patterns and Templates sections of the Site Editor, or in the Pages section when Table or Grid layout are selected.
-		</td>
-		<td style={{verticalAlign: 'top', width: '50%'}}>
-			#### Sidebar and multiple Content Frames
-			<img src={ pageLayoutExample4 } alt="Diagram illustrating an example of the 'Sidebar and multiple Content Frames' arrangement" width="100%" />
-
-			Multiple content frames can be utilised as required.
-		</td>
-	</tr>
+	<tbody>
+		<tr>
+			<td style={{verticalAlign: 'top', width: '50%'}}>
+				#### Sidebar, Content Frame and Preview Frame
+				<img src={ pageLayoutExample1 } alt="Diagram illustrating an example of the 'Sidebar, Content Frame and Preview Frame' arrangement" width="100%" />
+
+				A demonstration of this arrangement can be found in the Styles section of the Site Editor, and in the Pages and Templates sections when List layout is selected.
+			</td>
+			<td style={{verticalAlign: 'top', width: '50%'}}>
+				#### Sidebar and Preview Frame
+				<img src={ pageLayoutExample2 } alt="Diagram illustrating an example of the 'Sidebar and Preview Frame' arrangement" width="100%" />
+
+				A demonstration of this arrangement can be found in the Design section.
+			</td>
+		</tr>
+		<tr>
+			<td style={{verticalAlign: 'top', width: '50%'}}>
+				#### Sidebar and Content Frame
+				<img src={ pageLayoutExample3 } alt="Diagram illustrating an example of the 'Sidebar and Content Frame' arrangement" width="100%" />
+
+				A demonstration of this arrangement can be found in the Patterns and Templates sections of the Site Editor, or in the Pages section when Table or Grid layout are selected.
+			</td>
+			<td style={{verticalAlign: 'top', width: '50%'}}>
+				#### Sidebar and multiple Content Frames
+				<img src={ pageLayoutExample4 } alt="Diagram illustrating an example of the 'Sidebar and multiple Content Frames' arrangement" width="100%" />
+
+				Multiple content frames can be utilised as required.
+			</td>
+		</tr>
+	</tbody>
 </table>

From cbe7ef4d597cc28f3ab0fc9c7593b9af8085aa36 Mon Sep 17 00:00:00 2001
From: Sukhendu Sekhar Guria <sukhendu.guria@rtcamp.com>
Date: Fri, 13 Dec 2024 13:49:27 +0530
Subject: [PATCH 13/13] Refactor "Settings" panel of Date block to use
 ToolsPanel instead of PanelBody (#67906)

Co-authored-by: Sukhendu2002 <sukhendu2002@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
---
 packages/block-library/src/post-date/edit.js | 97 +++++++++++++++-----
 1 file changed, 72 insertions(+), 25 deletions(-)

diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js
index 5057466c6af453..6ac39c0f14798d 100644
--- a/packages/block-library/src/post-date/edit.js
+++ b/packages/block-library/src/post-date/edit.js
@@ -26,7 +26,8 @@ import {
 	ToolbarGroup,
 	ToolbarButton,
 	ToggleControl,
-	PanelBody,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { edit } from '@wordpress/icons';
@@ -160,16 +161,36 @@ export default function PostDateEdit( {
 			</BlockControls>
 
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<DateFormatPicker
-						format={ format }
-						defaultFormat={ siteFormat }
-						onChange={ ( nextFormat ) =>
-							setAttributes( { format: nextFormat } )
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							format: undefined,
+							isLink: false,
+							displayType: 'date',
+						} );
+					} }
+				>
+					<ToolsPanelItem
+						hasValue={ () =>
+							format !== undefined && format !== siteFormat
+						}
+						label={ __( 'Date Format' ) }
+						onDeselect={ () =>
+							setAttributes( { format: undefined } )
 						}
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+						isShownByDefault
+					>
+						<DateFormatPicker
+							format={ format }
+							defaultFormat={ siteFormat }
+							onChange={ ( nextFormat ) =>
+								setAttributes( { format: nextFormat } )
+							}
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						hasValue={ () => isLink !== false }
 						label={
 							postType?.labels.singular_name
 								? sprintf(
@@ -179,23 +200,49 @@ export default function PostDateEdit( {
 								  )
 								: __( 'Link to post' )
 						}
-						onChange={ () => setAttributes( { isLink: ! isLink } ) }
-						checked={ isLink }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+						onDeselect={ () => setAttributes( { isLink: false } ) }
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={
+								postType?.labels.singular_name
+									? sprintf(
+											// translators: %s: Name of the post type e.g: "post".
+											__( 'Link to %s' ),
+											postType.labels.singular_name.toLowerCase()
+									  )
+									: __( 'Link to post' )
+							}
+							onChange={ () =>
+								setAttributes( { isLink: ! isLink } )
+							}
+							checked={ isLink }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						hasValue={ () => displayType !== 'date' }
 						label={ __( 'Display last modified date' ) }
-						onChange={ ( value ) =>
-							setAttributes( {
-								displayType: value ? 'modified' : 'date',
-							} )
+						onDeselect={ () =>
+							setAttributes( { displayType: 'date' } )
 						}
-						checked={ displayType === 'modified' }
-						help={ __(
-							'Only shows if the post has been modified'
-						) }
-					/>
-				</PanelBody>
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display last modified date' ) }
+							onChange={ ( value ) =>
+								setAttributes( {
+									displayType: value ? 'modified' : 'date',
+								} )
+							}
+							checked={ displayType === 'modified' }
+							help={ __(
+								'Only shows if the post has been modified'
+							) }
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 
 			<div { ...blockProps }>{ postDate }</div>