@wordpress/edit-site 4.13.1-next.957ca95e4c.0 → 4.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.13.1-next.957ca95e4c.0",
+	"version": "4.14.1",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,33 +27,33 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.16.1-next.957ca95e4c.0",
-		"@wordpress/api-fetch": "^6.13.1-next.957ca95e4c.0",
-		"@wordpress/block-editor": "^9.8.1-next.957ca95e4c.0",
-		"@wordpress/block-library": "^7.13.1-next.957ca95e4c.0",
-		"@wordpress/blocks": "^11.15.1-next.957ca95e4c.0",
-		"@wordpress/components": "^20.0.2-next.957ca95e4c.0",
-		"@wordpress/compose": "^5.14.1-next.957ca95e4c.0",
-		"@wordpress/core-data": "^5.0.1-next.957ca95e4c.0",
-		"@wordpress/data": "^7.0.1-next.957ca95e4c.0",
-		"@wordpress/deprecated": "^3.16.1-next.957ca95e4c.0",
-		"@wordpress/editor": "^12.15.1-next.957ca95e4c.0",
-		"@wordpress/element": "^4.14.1-next.957ca95e4c.0",
-		"@wordpress/hooks": "^3.16.1-next.957ca95e4c.0",
-		"@wordpress/html-entities": "^3.16.1-next.957ca95e4c.0",
-		"@wordpress/i18n": "^4.16.1-next.957ca95e4c.0",
-		"@wordpress/icons": "^9.7.1-next.957ca95e4c.0",
-		"@wordpress/interface": "^4.15.1-next.957ca95e4c.0",
-		"@wordpress/keyboard-shortcuts": "^3.14.1-next.957ca95e4c.0",
-		"@wordpress/keycodes": "^3.16.1-next.957ca95e4c.0",
-		"@wordpress/media-utils": "^4.7.1-next.957ca95e4c.0",
-		"@wordpress/notices": "^3.16.1-next.957ca95e4c.0",
-		"@wordpress/plugins": "^4.14.1-next.957ca95e4c.0",
-		"@wordpress/preferences": "^2.8.1-next.957ca95e4c.0",
-		"@wordpress/reusable-blocks": "^3.14.1-next.957ca95e4c.0",
-		"@wordpress/style-engine": "^0.15.1-next.957ca95e4c.0",
-		"@wordpress/url": "^3.17.1-next.957ca95e4c.0",
-		"@wordpress/viewport": "^4.14.1-next.957ca95e4c.0",
+		"@wordpress/a11y": "^3.17.0",
+		"@wordpress/api-fetch": "^6.14.0",
+		"@wordpress/block-editor": "^10.0.1",
+		"@wordpress/block-library": "^7.14.1",
+		"@wordpress/blocks": "^11.16.1",
+		"@wordpress/components": "^21.0.1",
+		"@wordpress/compose": "^5.15.1",
+		"@wordpress/core-data": "^5.0.1",
+		"@wordpress/data": "^7.1.1",
+		"@wordpress/deprecated": "^3.17.0",
+		"@wordpress/editor": "^12.16.1",
+		"@wordpress/element": "^4.15.0",
+		"@wordpress/hooks": "^3.17.0",
+		"@wordpress/html-entities": "^3.17.0",
+		"@wordpress/i18n": "^4.17.0",
+		"@wordpress/icons": "^9.8.0",
+		"@wordpress/interface": "^4.16.1",
+		"@wordpress/keyboard-shortcuts": "^3.15.1",
+		"@wordpress/keycodes": "^3.17.0",
+		"@wordpress/media-utils": "^4.8.0",
+		"@wordpress/notices": "^3.17.1",
+		"@wordpress/plugins": "^4.15.1",
+		"@wordpress/preferences": "^2.9.1",
+		"@wordpress/reusable-blocks": "^3.15.1",
+		"@wordpress/style-engine": "^1.0.0",
+		"@wordpress/url": "^3.18.0",
+		"@wordpress/viewport": "^4.15.1",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "272a74bbbaab10ee24424eafe9578e705fbfbbb4"
+	"gitHead": "56ef3f5a754e44155ee79e827c7a1d0efc1ee5aa"
 }

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit, unionBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -80,31 +79,50 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	);
 
 	const blockPatterns = useMemo(
-		() => unionBy( settingsBlockPatterns, restBlockPatterns, 'name' ),
-		[ settingsBlockPatterns, restBlockPatterns ]
+		() =>
+			[
+				...( settingsBlockPatterns || [] ),
+				...( restBlockPatterns || [] ),
+			]
+				.filter(
+					( x, index, arr ) =>
+						index === arr.findIndex( ( y ) => x.name === y.name )
+				)
+				.filter( ( { postTypes } ) => {
+					return (
+						! postTypes ||
+						( Array.isArray( postTypes ) &&
+							postTypes.includes( templateType ) )
+					);
+				} ),
+		[ settingsBlockPatterns, restBlockPatterns, templateType ]
 	);
 
 	const blockPatternCategories = useMemo(
 		() =>
-			unionBy(
-				settingsBlockPatternCategories,
-				restBlockPatternCategories,
-				'name'
+			[
+				...( settingsBlockPatternCategories || [] ),
+				...( restBlockPatternCategories || [] ),
+			].filter(
+				( x, index, arr ) =>
+					index === arr.findIndex( ( y ) => x.name === y.name )
 			),
 		[ settingsBlockPatternCategories, restBlockPatternCategories ]
 	);
 
-	const settings = useMemo(
-		() => ( {
-			...omit( storedSettings, [
-				'__experimentalAdditionalBlockPatterns',
-				'__experimentalAdditionalBlockPatternCategories',
-			] ),
+	const settings = useMemo( () => {
+		const {
+			__experimentalAdditionalBlockPatterns,
+			__experimentalAdditionalBlockPatternCategories,
+			...restStoredSettings
+		} = storedSettings;
+
+		return {
+			...restStoredSettings,
 			__experimentalBlockPatterns: blockPatterns,
 			__experimentalBlockPatternCategories: blockPatternCategories,
-		} ),
-		[ storedSettings, blockPatterns, blockPatternCategories ]
-	);
+		};
+	}, [ storedSettings, blockPatterns, blockPatternCategories ] );
 
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',

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

@@ -8,6 +8,7 @@ import {
 	__unstableEditorStyles as EditorStyles,
 	__unstableIframe as Iframe,
 	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useMergeRefs } from '@wordpress/compose';
@@ -37,9 +38,14 @@ const HANDLE_STYLES_OVERRIDE = {
 };
 
 function ResizableEditor( { enableResizing, settings, children, ...props } ) {
-	const deviceType = useSelect(
-		( select ) =>
-			select( editSiteStore ).__experimentalGetPreviewDeviceType(),
+	const { deviceType, isZoomOutMode } = useSelect(
+		( select ) => ( {
+			deviceType:
+				select( editSiteStore ).__experimentalGetPreviewDeviceType(),
+			isZoomOutMode:
+				select( blockEditorStore ).__unstableGetEditorMode() ===
+				'zoom-out',
+		} ),
 		[]
 	);
 	const deviceStyles = useResizeCanvas( deviceType );
@@ -163,6 +169,7 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 			} }
 		>
 			<Iframe
+				isZoomedOut={ isZoomOutMode }
 				style={ enableResizing ? { height } : deviceStyles }
 				head={
 					<>

package/src/components/code-editor/style.scss

@@ -6,14 +6,13 @@
 
 	&__body {
 		width: 100%;
-		padding: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15;
+		padding: $grid-unit-15;
 		max-width: $break-xlarge;
 		margin-left: auto;
 		margin-right: auto;
 
 		@include break-large() {
-			padding: $grid-unit-20 $grid-unit-30 #{ $grid-unit-60 * 2 } $grid-unit-30;
-			padding: 0 $grid-unit-30 $grid-unit-30 $grid-unit-30;
+			padding: $grid-unit-30;
 		}
 	}
 

package/src/components/editor/index.js

@@ -9,6 +9,7 @@ import {
 	BlockContextProvider,
 	BlockBreadcrumb,
 	BlockStyles,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
 	InterfaceSkeleton,
@@ -77,6 +78,7 @@ function Editor( { onError } ) {
 		nextShortcut,
 		editorMode,
 		showIconLabels,
+		blockEditorMode,
 	} = useSelect( ( select ) => {
 		const {
 			isInserterOpened,
@@ -89,6 +91,7 @@ function Editor( { onError } ) {
 			getEditorMode,
 		} = select( editSiteStore );
 		const { hasFinishedResolution, getEntityRecord } = select( coreStore );
+		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const postType = getEditedPostType();
 		const postId = getEditedPostId();
 
@@ -125,6 +128,7 @@ function Editor( { onError } ) {
 				'core/edit-site',
 				'showIconLabels'
 			),
+			blockEditorMode: __unstableGetEditorMode(),
 		};
 	}, [] );
 	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
@@ -320,11 +324,14 @@ function Editor( { onError } ) {
 												</>
 											}
 											footer={
-												<BlockBreadcrumb
-													rootLabelText={ __(
-														'Template'
-													) }
-												/>
+												blockEditorMode !==
+												'zoom-out' ? (
+													<BlockBreadcrumb
+														rootLabelText={ __(
+															'Template'
+														) }
+													/>
+												) : undefined
 											}
 											shortcuts={ {
 												previous: previousShortcut,

package/src/components/global-styles/gradients-palette-panel.js

@@ -45,7 +45,18 @@ export default function GradientPalettePanel( { name } ) {
 		'color.defaultGradients',
 		name
 	);
-	const [ duotonePalette ] = useSetting( 'color.duotone' ) || [];
+
+	const [ customDuotone ] = useSetting( 'color.duotone.custom' ) || [];
+	const [ defaultDuotone ] = useSetting( 'color.duotone.default' ) || [];
+	const [ themeDuotone ] = useSetting( 'color.duotone.theme' ) || [];
+	const [ defaultDuotoneEnabled ] = useSetting( 'color.defaultDuotone' );
+
+	const duotonePalette = [
+		...( customDuotone || [] ),
+		...( themeDuotone || [] ),
+		...( defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [] ),
+	];
+
 	return (
 		<VStack
 			className="edit-site-global-styles-gradient-palette-panel"
@@ -80,17 +91,19 @@ export default function GradientPalettePanel( { name } ) {
 				) }
 				slugPrefix="custom-"
 			/>
-			<div>
-				<Subtitle>{ __( 'Duotone' ) }</Subtitle>
-				<Spacer margin={ 3 } />
-				<DuotonePicker
-					duotonePalette={ duotonePalette }
-					disableCustomDuotone={ true }
-					disableCustomColors={ true }
-					clearable={ false }
-					onChange={ noop }
-				/>
-			</div>
+			{ !! duotonePalette && !! duotonePalette.length && (
+				<div>
+					<Subtitle>{ __( 'Duotone' ) }</Subtitle>
+					<Spacer margin={ 3 } />
+					<DuotonePicker
+						duotonePalette={ duotonePalette }
+						disableCustomDuotone={ true }
+						disableCustomColors={ true }
+						clearable={ false }
+						onChange={ noop }
+					/>
+				</div>
+			) }
 		</VStack>
 	);
 }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, cloneDeep, set, isEqual } from 'lodash';
+import { get, set, isEqual } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -48,7 +48,8 @@ export function useSetting( path, blockName, source = 'all' ) {
 
 	const setSetting = ( newValue ) => {
 		setUserConfig( ( currentConfig ) => {
-			const newUserConfig = cloneDeep( currentConfig );
+			// Deep clone `currentConfig` to avoid mutating it later.
+			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
 			const pathToSet = PATHS_WITH_MERGE[ path ]
 				? fullPath + '.custom'
 				: fullPath;
@@ -109,7 +110,8 @@ export function useStyle( path, blockName, source = 'all' ) {
 
 	const setStyle = ( newValue ) => {
 		setUserConfig( ( currentConfig ) => {
-			const newUserConfig = cloneDeep( currentConfig );
+			// Deep clone `currentConfig` to avoid mutating it later.
+			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
 			set(
 				newUserConfig,
 				finalPath,
@@ -166,7 +168,6 @@ const ROOT_BLOCK_SUPPORTS = [
 	'fontWeight',
 	'lineHeight',
 	'textDecoration',
-	'textTransform',
 	'padding',
 	'contentSize',
 	'wideSize',

package/src/components/global-styles/typography-panel.js

@@ -6,6 +6,7 @@ import {
 	__experimentalFontFamilyControl as FontFamilyControl,
 	__experimentalFontAppearanceControl as FontAppearanceControl,
 	__experimentalLetterSpacingControl as LetterSpacingControl,
+	__experimentalTextTransformControl as TextTransformControl,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
@@ -53,12 +54,28 @@ function useHasAppearanceControl( name ) {
 	return hasFontStyles || hasFontWeights;
 }
 
-function useHasLetterSpacingControl( name ) {
+function useHasLetterSpacingControl( name, element ) {
+	const setting = useSetting( 'typography.letterSpacing', name )[ 0 ];
+	if ( ! setting ) {
+		return false;
+	}
+	if ( ! name && element === 'heading' ) {
+		return true;
+	}
 	const supports = getSupportedGlobalStylesPanels( name );
-	return (
-		useSetting( 'typography.letterSpacing', name )[ 0 ] &&
-		supports.includes( 'letterSpacing' )
-	);
+	return supports.includes( 'letterSpacing' );
+}
+
+function useHasTextTransformControl( name, element ) {
+	const setting = useSetting( 'typography.textTransform', name )[ 0 ];
+	if ( ! setting ) {
+		return false;
+	}
+	if ( ! name && element === 'heading' ) {
+		return true;
+	}
+	const supports = getSupportedGlobalStylesPanels( name );
+	return supports.includes( 'textTransform' );
 }
 
 export default function TypographyPanel( { name, element } ) {
@@ -84,7 +101,8 @@ export default function TypographyPanel( { name, element } ) {
 		supports.includes( 'fontWeight' );
 	const hasLineHeightEnabled = useHasLineHeightControl( name );
 	const hasAppearanceControl = useHasAppearanceControl( name );
-	const hasLetterSpacingControl = useHasLetterSpacingControl( name );
+	const hasLetterSpacingControl = useHasLetterSpacingControl( name, element );
+	const hasTextTransformControl = useHasTextTransformControl( name, element );
 
 	/* Disable font size controls when the option to style all headings is selected. */
 	let hasFontSizeEnabled = supports.includes( 'fontSize' );
@@ -117,6 +135,10 @@ export default function TypographyPanel( { name, element } ) {
 		prefix + 'typography.letterSpacing',
 		name
 	);
+	const [ textTransform, setTextTransform ] = useStyle(
+		prefix + 'typography.textTransform',
+		name
+	);
 	const [ backgroundColor ] = useStyle( prefix + 'color.background', name );
 	const [ gradientValue ] = useStyle( prefix + 'color.gradient', name );
 	const [ color ] = useStyle( prefix + 'color.text', name );
@@ -248,6 +270,18 @@ export default function TypographyPanel( { name, element } ) {
 						__unstableInputWidth="auto"
 					/>
 				) }
+				{ hasTextTransformControl && (
+					<div className="edit-site-typography-panel__full-width-control">
+						<TextTransformControl
+							value={ textTransform }
+							onChange={ setTextTransform }
+							showNone
+							isBlock
+							size="__unstable-large"
+							__nextHasNoMarginBottom
+						/>
+					</div>
+				) }
 			</Grid>
 		</PanelBody>
 	);

package/src/components/global-styles/use-global-styles-output.js

@@ -1,16 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	first,
-	forEach,
-	get,
-	isEmpty,
-	kebabCase,
-	pickBy,
-	reduce,
-	set,
-} from 'lodash';
+import { get, isEmpty, kebabCase, pickBy, reduce, set } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -208,7 +199,7 @@ export function getStylesDeclarations(
 				return declarations;
 			}
 			const pathToValue = value;
-			if ( first( pathToValue ) === 'elements' || useEngine ) {
+			if ( pathToValue[ 0 ] === 'elements' || useEngine ) {
 				return declarations;
 			}
 
@@ -330,8 +321,8 @@ export function getLayoutStyles( {
 	if ( gapValue && tree?.settings?.layout?.definitions ) {
 		Object.values( tree.settings.layout.definitions ).forEach(
 			( { className, name, spacingStyles } ) => {
-				// Allow skipping default layout for themes that opt-in to block styles, but opt-out of blockGap.
-				if ( ! hasBlockGapSupport && 'default' === name ) {
+				// Allow outputting fallback gap styles for flex layout type when block gap support isn't available.
+				if ( ! hasBlockGapSupport && 'flex' !== name ) {
 					return;
 				}
 
@@ -457,7 +448,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 		} );
 	}
 
-	forEach( ELEMENTS, ( selector, name ) => {
+	Object.entries( ELEMENTS ).forEach( ( [ name, selector ] ) => {
 		if ( !! tree.styles?.elements[ name ] ) {
 			nodes.push( {
 				styles: tree.styles?.elements[ name ],
@@ -467,42 +458,53 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 	} );
 
 	// Iterate over blocks: they can have styles & elements.
-	forEach( tree.styles?.blocks, ( node, blockName ) => {
-		const blockStyles = pickStyleKeys( node );
-		if ( !! blockStyles && !! blockSelectors?.[ blockName ]?.selector ) {
-			nodes.push( {
-				duotoneSelector: blockSelectors[ blockName ].duotoneSelector,
-				fallbackGapValue: blockSelectors[ blockName ].fallbackGapValue,
-				hasLayoutSupport: blockSelectors[ blockName ].hasLayoutSupport,
-				selector: blockSelectors[ blockName ].selector,
-				styles: blockStyles,
-				featureSelectors: blockSelectors[ blockName ].featureSelectors,
-			} );
-		}
-
-		forEach( node?.elements, ( value, elementName ) => {
+	Object.entries( tree.styles?.blocks ?? {} ).forEach(
+		( [ blockName, node ] ) => {
+			const blockStyles = pickStyleKeys( node );
 			if (
-				!! value &&
-				!! blockSelectors?.[ blockName ] &&
-				!! ELEMENTS?.[ elementName ]
+				!! blockStyles &&
+				!! blockSelectors?.[ blockName ]?.selector
 			) {
 				nodes.push( {
-					styles: value,
-					selector: blockSelectors[ blockName ].selector
-						.split( ',' )
-						.map( ( sel ) => {
-							const elementSelectors =
-								ELEMENTS[ elementName ].split( ',' );
-							return elementSelectors.map(
-								( elementSelector ) =>
-									sel + ' ' + elementSelector
-							);
-						} )
-						.join( ',' ),
+					duotoneSelector:
+						blockSelectors[ blockName ].duotoneSelector,
+					fallbackGapValue:
+						blockSelectors[ blockName ].fallbackGapValue,
+					hasLayoutSupport:
+						blockSelectors[ blockName ].hasLayoutSupport,
+					selector: blockSelectors[ blockName ].selector,
+					styles: blockStyles,
+					featureSelectors:
+						blockSelectors[ blockName ].featureSelectors,
 				} );
 			}
-		} );
-	} );
+
+			Object.entries( node?.elements ?? {} ).forEach(
+				( [ elementName, value ] ) => {
+					if (
+						!! value &&
+						!! blockSelectors?.[ blockName ] &&
+						!! ELEMENTS?.[ elementName ]
+					) {
+						nodes.push( {
+							styles: value,
+							selector: blockSelectors[ blockName ].selector
+								.split( ',' )
+								.map( ( sel ) => {
+									const elementSelectors =
+										ELEMENTS[ elementName ].split( ',' );
+									return elementSelectors.map(
+										( elementSelector ) =>
+											sel + ' ' + elementSelector
+									);
+								} )
+								.join( ',' ),
+						} );
+					}
+				}
+			);
+		}
+	);
 
 	return nodes;
 };
@@ -537,17 +539,19 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 	}
 
 	// Blocks.
-	forEach( tree.settings?.blocks, ( node, blockName ) => {
-		const blockPresets = pickPresets( node );
-		const blockCustom = node.custom;
-		if ( ! isEmpty( blockPresets ) || !! blockCustom ) {
-			nodes.push( {
-				presets: blockPresets,
-				custom: blockCustom,
-				selector: blockSelectors[ blockName ].selector,
-			} );
+	Object.entries( tree.settings?.blocks ?? {} ).forEach(
+		( [ blockName, node ] ) => {
+			const blockPresets = pickPresets( node );
+			const blockCustom = node.custom;
+			if ( ! isEmpty( blockPresets ) || !! blockCustom ) {
+				nodes.push( {
+					presets: blockPresets,
+					custom: blockCustom,
+					selector: blockSelectors[ blockName ].selector,
+				} );
+			}
 		}
-	} );
+	);
 
 	return nodes;
 };
@@ -601,8 +605,13 @@ export const toStyles = (
 	}
 
 	if ( useRootPaddingAlign ) {
-		ruleset +=
-			'padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left);';
+		ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } 
+			.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } 
+			.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; } 
+			.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } 
+			.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; } 
+			.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } 
+			.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0;`;
 	}
 
 	ruleset += '}';

package/src/components/header/document-actions/index.js

@@ -19,7 +19,7 @@ import {
 	__experimentalText as Text,
 } from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
-import { useRef } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
 function getBlockDisplayText( block ) {
@@ -73,10 +73,19 @@ export default function DocumentActions( {
 } ) {
 	const { label } = useSecondaryText();
 
-	// The title ref is passed to the popover as the anchorRef so that the
-	// dropdown is centered over the whole title area rather than just one
-	// part of it.
-	const titleRef = useRef();
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Use the title wrapper as the popover anchor so that the dropdown is
+			// centered over the whole title area rather than just one part of it.
+			anchor: popoverAnchor,
+		} ),
+		[ popoverAnchor ]
+	);
 
 	// Return a simple loading indicator until we have information to show.
 	if ( ! isLoaded ) {
@@ -103,7 +112,7 @@ export default function DocumentActions( {
 			} ) }
 		>
 			<div
-				ref={ titleRef }
+				ref={ setPopoverAnchor }
 				className="edit-site-document-actions__title-wrapper"
 			>
 				<Text
@@ -130,9 +139,7 @@ export default function DocumentActions( {
 
 				{ dropdownContent && (
 					<Dropdown
-						popoverProps={ {
-							anchorRef: titleRef.current,
-						} }
+						popoverProps={ popoverProps }
 						position="bottom center"
 						renderToggle={ ( { isOpen, onToggle } ) => (
 							<Button