npm - @wordpress/edit-site - Versions diffs - 4.10.0 → 4.12.1-next.d6164808d3.0 - Mend

@wordpress/edit-site 4.10.0 → 4.12.1-next.d6164808d3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (204) hide show

package/src/components/block-editor/index.js CHANGED Viewed

@@ -38,7 +38,6 @@ import NavigateToLink from '../navigate-to-link';
 import { SidebarInspectorFill } from '../sidebar';
 import { store as editSiteStore } from '../../store';
 import BlockInspectorButton from './block-inspector-button';
-import EditTemplatePartMenuButton from '../edit-template-part-menu-button';
 import BackButton from './back-button';
 import ResizableEditor from './resizable-editor';
@@ -155,7 +154,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 			onChange={ onChange }
 			useSubRegistry={ false }
 		>
-			<EditTemplatePartMenuButton />
 			<TemplatePartConverter />
 			<__experimentalLinkControl.ViewerFill>
 				{ useCallback(

package/src/components/block-editor/resizable-editor.js CHANGED Viewed

@@ -57,20 +57,31 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 				return;
 			}
-			let animationFrame = null;
+			let timeoutId = null;
 			function resizeHeight() {
-				if ( ! animationFrame ) {
-					// Throttle the updates on animation frame.
-					animationFrame = iframe.contentWindow.requestAnimationFrame(
-						() => {
-							setHeight(
-								iframe.contentDocument.documentElement
-									.scrollHeight
-							);
-							animationFrame = null;
+				if ( ! timeoutId ) {
+					// Throttle the updates on timeout. This code previously
+					// used `requestAnimationFrame`, but that seems to not
+					// always work before an iframe is ready.
+					timeoutId = iframe.contentWindow.setTimeout( () => {
+						const { readyState } = iframe.contentDocument;
+						// Continue deferring the timeout until the document is ready.
+						// Only then will it have a height.
+						if (
+							readyState !== 'interactive' &&
+							readyState !== 'complete'
+						) {
+							resizeHeight();
+							return;
 						}
-					);
+						setHeight( iframe.contentDocument.body.scrollHeight );
+						timeoutId = null;
+						// 30 frames per second.
+					}, 1000 / 30 );
 				}
 			}
@@ -82,11 +93,10 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 				resizeObserver = new iframe.contentWindow.ResizeObserver(
 					resizeHeight
 				);
-				// Observing the <html> rather than the <body> because the latter
-				// gets destroyed and remounted after initialization in <Iframe>.
-				resizeObserver.observe(
-					iframe.contentDocument.documentElement
-				);
+				// Observe the body, since the `html` element seems to always
+				// have a height of `100%`.
+				resizeObserver.observe( iframe.contentDocument.body );
 				resizeHeight();
 			}
@@ -97,7 +107,7 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 			registerObserver();
 			return () => {
-				iframe.contentWindow?.cancelAnimationFrame( animationFrame );
+				iframe.contentWindow?.clearTimeout( timeoutId );
 				resizeObserver?.disconnect();
 				iframe.removeEventListener( 'load', registerObserver );
 			};
@@ -153,7 +163,7 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 			} }
 		>
 			<Iframe
-				style={ enableResizing ? undefined : deviceStyles }
+				style={ enableResizing ? { height } : deviceStyles }
 				head={
 					<>
 						<EditorStyles styles={ settings.styles } />

package/src/components/editor/style.scss CHANGED Viewed

@@ -32,6 +32,7 @@ html.wp-toolbar {
 	position: relative;
 	height: 100%;
 	display: block;
+	overflow: hidden;
 	iframe {
 		display: block;

package/src/components/global-styles/border-panel.js CHANGED Viewed

@@ -179,11 +179,11 @@ export default function BorderPanel( { name } ) {
 					<BorderBoxControl
 						colors={ colors }
 						enableAlpha={ true }
+						enableStyle={ showBorderStyle }
 						onChange={ onBorderChange }
-						showStyle={ showBorderStyle }
-						value={ border }
-						popoverPlacement="left-start"
 						popoverOffset={ 40 }
+						popoverPlacement="left-start"
+						value={ border }
 						__experimentalHasMultipleOrigins={ true }
 						__experimentalIsRenderedInSidebar={ true }
 					/>

package/src/components/global-styles/dimensions-panel.js CHANGED Viewed

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
@@ -6,10 +11,16 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalBoxControl as BoxControl,
+	__experimentalHStack as HStack,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalView as View,
 } from '@wordpress/components';
-import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block-editor';
+import {
+	__experimentalUseCustomSides as useCustomSides,
+	__experimentalSpacingSizesControl as SpacingSizesControl,
+} from '@wordpress/block-editor';
+import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
 /**
  * Internal dependencies
@@ -19,11 +30,27 @@ import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
 const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
 export function useHasDimensionsPanel( name ) {
+	const hasContentSize = useHasContentSize( name );
+	const hasWideSize = useHasWideSize( name );
 	const hasPadding = useHasPadding( name );
 	const hasMargin = useHasMargin( name );
 	const hasGap = useHasGap( name );
-	return hasPadding || hasMargin || hasGap;
+	return hasContentSize || hasWideSize || hasPadding || hasMargin || hasGap;
+}
+function useHasContentSize( name ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ settings ] = useSetting( 'layout.contentSize', name );
+	return settings && supports.includes( 'contentSize' );
+}
+function useHasWideSize( name ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ settings ] = useSetting( 'layout.wideSize', name );
+	return settings && supports.includes( 'wideSize' );
 }
 function useHasPadding( name ) {
@@ -47,6 +74,12 @@ function useHasGap( name ) {
 	return settings && supports.includes( 'blockGap' );
 }
+function useHasSpacingPresets() {
+	const [ settings ] = useSetting( 'spacing.spacingSizes' );
+	return settings && settings.length > 0;
+}
 function filterValuesBySides( values, sides ) {
 	if ( ! sides ) {
 		// If no custom side configuration all sides are opted into by default.
@@ -71,7 +104,7 @@ function filterValuesBySides( values, sides ) {
 }
 function splitStyleValue( value ) {
-	// Check for shorthand value ( a string value ).
+	// Check for shorthand value (a string value).
 	if ( value && typeof value === 'string' ) {
 		// Convert to value for individual sides for BoxControl.
 		return {
@@ -85,20 +118,69 @@ function splitStyleValue( value ) {
 	return value;
 }
-export default function DimensionsPanel( { name } ) {
-	const showPaddingControl = useHasPadding( name );
-	const showMarginControl = useHasMargin( name );
-	const showGapControl = useHasGap( name );
-	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units', name )[ 0 ] || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
-	} );
+function splitGapValue( value ) {
+	// Check for shorthand value (a string value).
+	if ( value && typeof value === 'string' ) {
+		// Convert to value for individual sides for BoxControl.
+		return {
+			top: value,
+			right: value,
+			bottom: value,
+			left: value,
+		};
+	}
+	return {
+		...value,
+		right: value?.left,
+		bottom: value?.top,
+	};
+}
+// Props for managing `layout.contentSize`.
+function useContentSizeProps( name ) {
+	const [ contentSizeValue, setContentSizeValue ] = useSetting(
+		'layout.contentSize',
+		name
+	);
+	const [ userSetContentSizeValue ] = useSetting(
+		'layout.contentSize',
+		name,
+		'user'
+	);
+	const hasUserSetContentSizeValue = () => !! userSetContentSizeValue;
+	const resetContentSizeValue = () => setContentSizeValue( '' );
+	return {
+		contentSizeValue,
+		setContentSizeValue,
+		hasUserSetContentSizeValue,
+		resetContentSizeValue,
+	};
+}
+// Props for managing `layout.wideSize`.
+function useWideSizeProps( name ) {
+	const [ wideSizeValue, setWideSizeValue ] = useSetting(
+		'layout.wideSize',
+		name
+	);
+	const [ userSetWideSizeValue ] = useSetting(
+		'layout.wideSize',
+		name,
+		'user'
+	);
+	const hasUserSetWideSizeValue = () => !! userSetWideSizeValue;
+	const resetWideSizeValue = () => setWideSizeValue( '' );
+	return {
+		wideSizeValue,
+		setWideSizeValue,
+		hasUserSetWideSizeValue,
+		resetWideSizeValue,
+	};
+}
+// Props for managing `spacing.padding`.
+function usePaddingProps( name ) {
 	const [ rawPadding, setRawPadding ] = useStyle( 'spacing.padding', name );
 	const paddingValues = splitStyleValue( rawPadding );
 	const paddingSides = useCustomSides( name, 'padding' );
@@ -111,9 +193,22 @@ export default function DimensionsPanel( { name } ) {
 		setRawPadding( padding );
 	};
 	const resetPaddingValue = () => setPaddingValues( {} );
-	const hasPaddingValue = () =>
-		!! paddingValues && Object.keys( paddingValues ).length;
+	const [ userSetPaddingValue ] = useStyle( 'spacing.padding', name, 'user' );
+	// The `hasPaddingValue` check does not need a parsed value, as `userSetPaddingValue` will be `undefined` if not set.
+	const hasPaddingValue = () => !! userSetPaddingValue;
+	return {
+		paddingValues,
+		paddingSides,
+		isAxialPadding,
+		setPaddingValues,
+		resetPaddingValue,
+		hasPaddingValue,
+	};
+}
+// Props for managing `spacing.margin`.
+function useMarginProps( name ) {
 	const [ rawMargin, setRawMargin ] = useStyle( 'spacing.margin', name );
 	const marginValues = splitStyleValue( rawMargin );
 	const marginSides = useCustomSides( name, 'margin' );
@@ -129,34 +224,209 @@ export default function DimensionsPanel( { name } ) {
 	const hasMarginValue = () =>
 		!! marginValues && Object.keys( marginValues ).length;
+	return {
+		marginValues,
+		marginSides,
+		isAxialMargin,
+		setMarginValues,
+		resetMarginValue,
+		hasMarginValue,
+	};
+}
+// Props for managing `spacing.blockGap`.
+function useBlockGapProps( name ) {
 	const [ gapValue, setGapValue ] = useStyle( 'spacing.blockGap', name );
+	const gapValues = splitGapValue( gapValue );
+	const setGapValues = ( nextBoxGapValue ) => {
+		if ( ! nextBoxGapValue ) {
+			setGapValue( null );
+		}
+		setGapValue( {
+			top: nextBoxGapValue?.top,
+			left: nextBoxGapValue?.left,
+		} );
+	};
+	const gapSides = useCustomSides( name, 'blockGap' );
+	const isAxialGap =
+		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const resetGapValue = () => setGapValue( undefined );
-	const hasGapValue = () => !! gapValue;
+	const [ userSetGapValue ] = useStyle( 'spacing.blockGap', name, 'user' );
+	const hasGapValue = () => !! userSetGapValue;
+	return {
+		gapValue,
+		gapValues,
+		gapSides,
+		isAxialGap,
+		setGapValue,
+		setGapValues,
+		resetGapValue,
+		hasGapValue,
+	};
+}
+export default function DimensionsPanel( { name } ) {
+	const showContentSizeControl = useHasContentSize( name );
+	const showWideSizeControl = useHasWideSize( name );
+	const showPaddingControl = useHasPadding( name );
+	const showMarginControl = useHasMargin( name );
+	const showGapControl = useHasGap( name );
+	const showSpacingPresetsControl = useHasSpacingPresets();
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units', name )[ 0 ] || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vw',
+		],
+	} );
+	// Props for managing `layout.contentSize`.
+	const {
+		contentSizeValue,
+		setContentSizeValue,
+		hasUserSetContentSizeValue,
+		resetContentSizeValue,
+	} = useContentSizeProps( name );
+	// Props for managing `layout.wideSize`.
+	const {
+		wideSizeValue,
+		setWideSizeValue,
+		hasUserSetWideSizeValue,
+		resetWideSizeValue,
+	} = useWideSizeProps( name );
+	// Props for managing `spacing.padding`.
+	const {
+		paddingValues,
+		paddingSides,
+		isAxialPadding,
+		setPaddingValues,
+		resetPaddingValue,
+		hasPaddingValue,
+	} = usePaddingProps( name );
+	// Props for managing `spacing.margin`.
+	const {
+		marginValues,
+		marginSides,
+		isAxialMargin,
+		setMarginValues,
+		resetMarginValue,
+		hasMarginValue,
+	} = useMarginProps( name );
+	// Props for managing `spacing.blockGap`.
+	const {
+		gapValue,
+		gapValues,
+		gapSides,
+		isAxialGap,
+		setGapValue,
+		setGapValues,
+		resetGapValue,
+		hasGapValue,
+	} = useBlockGapProps( name );
 	const resetAll = () => {
 		resetPaddingValue();
 		resetMarginValue();
 		resetGapValue();
+		resetContentSizeValue();
+		resetWideSizeValue();
 	};
 	return (
 		<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
+			{ ( showContentSizeControl || showWideSizeControl ) && (
+				<span className="span-columns">
+					{ __( 'Set the width of the main content area.' ) }
+				</span>
+			) }
+			{ showContentSizeControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Content size' ) }
+					hasValue={ hasUserSetContentSizeValue }
+					onDeselect={ resetContentSizeValue }
+					isShownByDefault={ true }
+				>
+					<HStack alignment="flex-end" justify="flex-start">
+						<UnitControl
+							label={ __( 'Content' ) }
+							labelPosition="top"
+							__unstableInputWidth="80px"
+							value={ contentSizeValue || '' }
+							onChange={ ( nextContentSize ) => {
+								setContentSizeValue( nextContentSize );
+							} }
+							units={ units }
+						/>
+						<View>
+							<Icon icon={ positionCenter } />
+						</View>
+					</HStack>
+				</ToolsPanelItem>
+			) }
+			{ showWideSizeControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Wide size' ) }
+					hasValue={ hasUserSetWideSizeValue }
+					onDeselect={ resetWideSizeValue }
+					isShownByDefault={ true }
+				>
+					<HStack alignment="flex-end" justify="flex-start">
+						<UnitControl
+							label={ __( 'Wide' ) }
+							labelPosition="top"
+							__unstableInputWidth="80px"
+							value={ wideSizeValue || '' }
+							onChange={ ( nextWideSize ) => {
+								setWideSizeValue( nextWideSize );
+							} }
+							units={ units }
+						/>
+						<View>
+							<Icon icon={ stretchWide } />
+						</View>
+					</HStack>
+				</ToolsPanelItem>
+			) }
 			{ showPaddingControl && (
 				<ToolsPanelItem
 					hasValue={ hasPaddingValue }
 					label={ __( 'Padding' ) }
 					onDeselect={ resetPaddingValue }
 					isShownByDefault={ true }
+					className={ classnames( {
+						'tools-panel-item-spacing': showSpacingPresetsControl,
+					} ) }
 				>
-					<BoxControl
-						values={ paddingValues }
-						onChange={ setPaddingValues }
-						label={ __( 'Padding' ) }
-						sides={ paddingSides }
-						units={ units }
-						allowReset={ false }
-						splitOnAxis={ isAxialPadding }
-					/>
+					{ ! showSpacingPresetsControl && (
+						<BoxControl
+							values={ paddingValues }
+							onChange={ setPaddingValues }
+							label={ __( 'Padding' ) }
+							sides={ paddingSides }
+							units={ units }
+							allowReset={ false }
+							splitOnAxis={ isAxialPadding }
+						/>
+					) }
+					{ showSpacingPresetsControl && (
+						<SpacingSizesControl
+							values={ paddingValues }
+							onChange={ setPaddingValues }
+							label={ __( 'Padding' ) }
+							sides={ paddingSides }
+							units={ units }
+							allowReset={ false }
+							splitOnAxis={ isAxialPadding }
+						/>
+					) }
 				</ToolsPanelItem>
 			) }
 			{ showMarginControl && (
@@ -165,16 +435,32 @@ export default function DimensionsPanel( { name } ) {
 					label={ __( 'Margin' ) }
 					onDeselect={ resetMarginValue }
 					isShownByDefault={ true }
+					className={ classnames( {
+						'tools-panel-item-spacing': showSpacingPresetsControl,
+					} ) }
 				>
-					<BoxControl
-						values={ marginValues }
-						onChange={ setMarginValues }
-						label={ __( 'Margin' ) }
-						sides={ marginSides }
-						units={ units }
-						allowReset={ false }
-						splitOnAxis={ isAxialMargin }
-					/>
+					{ ! showSpacingPresetsControl && (
+						<BoxControl
+							values={ marginValues }
+							onChange={ setMarginValues }
+							label={ __( 'Margin' ) }
+							sides={ marginSides }
+							units={ units }
+							allowReset={ false }
+							splitOnAxis={ isAxialMargin }
+						/>
+					) }
+					{ showSpacingPresetsControl && (
+						<SpacingSizesControl
+							values={ marginValues }
+							onChange={ setMarginValues }
+							label={ __( 'Margin' ) }
+							sides={ marginSides }
+							units={ units }
+							allowReset={ false }
+							splitOnAxis={ isAxialMargin }
+						/>
+					) }
 				</ToolsPanelItem>
 			) }
 			{ showGapControl && (
@@ -184,14 +470,27 @@ export default function DimensionsPanel( { name } ) {
 					onDeselect={ resetGapValue }
 					isShownByDefault={ true }
 				>
-					<UnitControl
-						label={ __( 'Block spacing' ) }
-						__unstableInputWidth="80px"
-						min={ 0 }
-						onChange={ setGapValue }
-						units={ units }
-						value={ gapValue }
-					/>
+					{ isAxialGap ? (
+						<BoxControl
+							label={ __( 'Block spacing' ) }
+							min={ 0 }
+							onChange={ setGapValues }
+							units={ units }
+							sides={ gapSides }
+							values={ gapValues }
+							allowReset={ false }
+							splitOnAxis={ isAxialGap }
+						/>
+					) : (
+						<UnitControl
+							label={ __( 'Block spacing' ) }
+							__unstableInputWidth="80px"
+							min={ 0 }
+							onChange={ setGapValue }
+							units={ units }
+							value={ gapValue }
+						/>
+					) }
 				</ToolsPanelItem>
 			) }
 		</ToolsPanel>

package/src/components/global-styles/hooks.js CHANGED Viewed

@@ -128,21 +128,21 @@ export function useStyle( path, blockName, source = 'all' ) {
 	switch ( source ) {
 		case 'all':
 			result = getValueFromVariable(
-				mergedConfig.settings,
+				mergedConfig,
 				blockName,
 				get( userConfig, finalPath ) ?? get( baseConfig, finalPath )
 			);
 			break;
 		case 'user':
 			result = getValueFromVariable(
-				mergedConfig.settings,
+				mergedConfig,
 				blockName,
 				get( userConfig, finalPath )
 			);
 			break;
 		case 'base':
 			result = getValueFromVariable(
-				baseConfig.settings,
+				baseConfig,
 				blockName,
 				get( baseConfig, finalPath )
 			);
@@ -168,6 +168,9 @@ const ROOT_BLOCK_SUPPORTS = [
 	'textDecoration',
 	'textTransform',
 	'padding',
+	'contentSize',
+	'wideSize',
+	'blockGap',
 ];
 export function getSupportedGlobalStylesPanels( name ) {

package/src/components/global-styles/screen-color-palette.js CHANGED Viewed

@@ -24,7 +24,7 @@ function ScreenColorPalette( { name } ) {
 				tabs={ [
 					{
 						name: 'solid',
-						title: 'Solid color',
+						title: 'Solid',
 						value: 'solid',
 					},
 					{