prep build 12/13

bph · Dec 13, 2024 · 115646a · 115646a
2 parents 42765d0 + cbe7ef4
commit 115646a
Show file tree

Hide file tree

Showing 29 changed files with 654 additions and 184 deletions.
diff --git 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

diff --git 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

diff --git 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
@@ -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
@@ -50,5 +50,6 @@ export const Default = {
 			},
 		],
 		__nextHasNoMarginBottom: true,
+		__next40pxDefaultSize: true,
 	},
 };
diff --git 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
@@ -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
@@ -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
@@ -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', () => {

diff --git 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>

diff --git 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>
 	);
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,6 +29,7 @@ const MyFontFamilyControl = () => { @@
     				setFontFamily( newFontFamily );
     			} }
     			__nextHasNoMarginBottom
+    			__next40pxDefaultSize
     		/>
     	);
     };
@@ Expand Down @@