@wordpress/block-editor 13.0.2 → 13.0.4

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

@@ -21,7 +21,7 @@ import TextAlignmentControl from '../text-alignment-control';
 import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
 import WritingModeControl from '../writing-mode-control';
-import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
+import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
 
 const MIN_TEXT_COLUMNS = 1;
@@ -135,6 +135,7 @@ function TypographyToolsPanel( {
 	panelId,
 	children,
 } ) {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const resetAll = () => {
 		const updatedValue = resetAllFilter( value );
 		onChange( updatedValue );
@@ -145,7 +146,7 @@ function TypographyToolsPanel( {
 			label={ __( 'Typography' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
-			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+			dropdownMenuProps={ dropdownMenuProps }
 		>
 			{ children }
 		</ToolsPanel>

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

@@ -881,6 +881,7 @@ export const toStyles = (
 		marginReset: true,
 		presets: true,
 		rootPadding: true,
+		variationStyles: false,
 		...styleOptions,
 	};
 	const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
@@ -923,8 +924,8 @@ export const toStyles = (
 			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 :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }
-				.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0;
+				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }
+				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0;
 				`;
 		}
 
@@ -1010,7 +1011,7 @@ export const toStyles = (
 					);
 				}
 
-				if ( styleVariationSelectors ) {
+				if ( options.variationStyles && styleVariationSelectors ) {
 					Object.entries( styleVariationSelectors ).forEach(
 						( [ styleVariationName, styleVariationSelector ] ) => {
 							const styleVariations =

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

@@ -3,6 +3,11 @@
  */
 import fastDeepEqual from 'fast-deep-equal/es6';
 
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
@@ -136,12 +141,18 @@ export const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
 	'typography.fontFamily': 'fontFamily',
 };
 
-export const TOOLSPANEL_DROPDOWNMENU_PROPS = {
-	popoverProps: {
-		placement: 'left-start',
-		offset: 259, // Inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
-	},
-};
+export function useToolsPanelDropdownMenuProps() {
+	const isMobile = useViewportMatch( 'medium', '<' );
+	return ! isMobile
+		? {
+				popoverProps: {
+					placement: 'left-start',
+					// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
+					offset: 259,
+				},
+		  }
+		: {};
+}
 
 function findInPresetsBy(
 	features,

package/src/components/iframe/content.scss

@@ -11,6 +11,7 @@
 .block-editor-iframe__scale-container {
 	width: 100%;
 	height: 100%;
+	display: flex;
 }
 
 .block-editor-iframe__scale-container.is-zoomed-out {

package/src/components/image-editor/aspect-ratio-dropdown.js

@@ -78,7 +78,6 @@ export default function AspectRatioDropdown( { toggleProps } ) {
 			label={ __( 'Aspect Ratio' ) }
 			popoverProps={ POPOVER_PROPS }
 			toggleProps={ toggleProps }
-			className="wp-block-image__aspect-ratio"
 		>
 			{ ( { onClose } ) => (
 				<>

package/src/components/inspector-controls/block-support-tools-panel.js

@@ -10,7 +10,7 @@ import { useCallback } from '@wordpress/element';
  */
 import { store as blockEditorStore } from '../../store';
 import { cleanEmptyObject } from '../../hooks/utils';
-import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../global-styles/utils';
+import { useToolsPanelDropdownMenuProps } from '../global-styles/utils';
 
 export default function BlockSupportToolsPanel( { children, group, label } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
@@ -20,7 +20,7 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 		getSelectedBlockClientId,
 		hasMultiSelection,
 	} = useSelect( blockEditorStore );
-
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const panelId = getSelectedBlockClientId();
 	const resetAll = useCallback(
 		( resetFilters = [] ) => {
@@ -72,7 +72,7 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 			shouldRenderPlaceholderItems // Required to maintain fills ordering.
 			__experimentalFirstVisibleItemClass="first"
 			__experimentalLastVisibleItemClass="last"
-			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+			dropdownMenuProps={ dropdownMenuProps }
 		>
 			{ children }
 		</ToolsPanel>

package/src/hooks/block-style-variation.js

@@ -16,6 +16,7 @@ import {
 import { useStyleOverride } from './utils';
 import { store as blockEditorStore } from '../store';
 import { globalStylesDataKey } from '../store/private-keys';
+import { unlock } from '../lock-unlock';
 
 const VARIATION_PREFIX = 'is-style-';
 
@@ -59,7 +60,127 @@ function getVariationNameFromClass( className, registeredStyles = [] ) {
 	return null;
 }
 
-function useBlockSyleVariation( name, variation, clientId ) {
+// A helper component to apply a style override using the useStyleOverride hook.
+function OverrideStyles( { override } ) {
+	useStyleOverride( override );
+}
+
+/**
+ * This component is used to generate new block style variation overrides
+ * based on an incoming theme config. If a matching style is found in the config,
+ * a new override is created and returned. The overrides can be used in conjunction with
+ * useStyleOverride to apply the new styles to the editor. Its use is
+ * subject to change.
+ *
+ * @param {Object} props        Props.
+ * @param {Object} props.config A global styles object, containing settings and styles.
+ * @return {JSX.Element|undefined} An array of new block variation overrides.
+ */
+export function __unstableBlockStyleVariationOverridesWithConfig( { config } ) {
+	const { getBlockStyles, overrides } = useSelect(
+		( select ) => ( {
+			getBlockStyles: select( blocksStore ).getBlockStyles,
+			overrides: unlock( select( blockEditorStore ) ).getStyleOverrides(),
+		} ),
+		[]
+	);
+	const { getBlockName } = useSelect( blockEditorStore );
+
+	const overridesWithConfig = useMemo( () => {
+		if ( ! overrides?.length ) {
+			return;
+		}
+		const newOverrides = [];
+		const overriddenClientIds = [];
+		for ( const [ , override ] of overrides ) {
+			if (
+				override?.variation &&
+				override?.clientId &&
+				/*
+				 * Because this component overwrites existing style overrides,
+				 * filter out any overrides that are already present in the store.
+				 */
+				! overriddenClientIds.includes( override.clientId )
+			) {
+				const blockName = getBlockName( override.clientId );
+				const configStyles =
+					config?.styles?.blocks?.[ blockName ]?.variations?.[
+						override.variation
+					];
+				if ( configStyles ) {
+					const variationConfig = {
+						settings: config?.settings,
+						// The variation style data is all that is needed to generate
+						// the styles for the current application to a block. The variation
+						// name is updated to match the instance specific class name.
+						styles: {
+							blocks: {
+								[ blockName ]: {
+									variations: {
+										[ `${ override.variation }-${ override.clientId }` ]:
+											configStyles,
+									},
+								},
+							},
+						},
+					};
+					const blockSelectors = getBlockSelectors(
+						getBlockTypes(),
+						getBlockStyles,
+						override.clientId
+					);
+					const hasBlockGapSupport = false;
+					const hasFallbackGapSupport = true;
+					const disableLayoutStyles = true;
+					const disableRootPadding = true;
+					const variationStyles = toStyles(
+						variationConfig,
+						blockSelectors,
+						hasBlockGapSupport,
+						hasFallbackGapSupport,
+						disableLayoutStyles,
+						disableRootPadding,
+						{
+							blockGap: false,
+							blockStyles: true,
+							layoutStyles: false,
+							marginReset: false,
+							presets: false,
+							rootPadding: false,
+							variationStyles: true,
+						}
+					);
+					newOverrides.push( {
+						id: `${ override.variation }-${ override.clientId }`,
+						css: variationStyles,
+						__unstableType: 'variation',
+						variation: override.variation,
+						// The clientId will be stored with the override and used to ensure
+						// the order of overrides matches the order of blocks so that the
+						// correct CSS cascade is maintained.
+						clientId: override.clientId,
+					} );
+					overriddenClientIds.push( override.clientId );
+				}
+			}
+		}
+		return newOverrides;
+	}, [ config, overrides, getBlockStyles, getBlockName ] );
+
+	if ( ! overridesWithConfig || ! overridesWithConfig.length ) {
+		return;
+	}
+
+	return (
+		<>
+			{ overridesWithConfig.map( ( override ) => (
+				<OverrideStyles key={ override.id } override={ override } />
+			) ) }
+		</>
+	);
+}
+
+function useBlockStyleVariation( name, variation, clientId ) {
 	// Prefer global styles data in GlobalStylesContext, which are available
 	// if in the site editor. Otherwise fall back to whatever is in the
 	// editor settings and available in the post editor.
@@ -112,7 +233,7 @@ function useBlockProps( { name, className, clientId } ) {
 	const variation = getVariationNameFromClass( className, registeredStyles );
 	const variationClass = `${ VARIATION_PREFIX }${ variation }-${ clientId }`;
 
-	const { settings, styles } = useBlockSyleVariation(
+	const { settings, styles } = useBlockStyleVariation(
 		name,
 		variation,
 		clientId
@@ -132,7 +253,7 @@ function useBlockProps( { name, className, clientId } ) {
 		const hasBlockGapSupport = false;
 		const hasFallbackGapSupport = true;
 		const disableLayoutStyles = true;
-		const isTemplate = true;
+		const disableRootPadding = true;
 
 		return toStyles(
 			variationConfig,
@@ -140,7 +261,7 @@ function useBlockProps( { name, className, clientId } ) {
 			hasBlockGapSupport,
 			hasFallbackGapSupport,
 			disableLayoutStyles,
-			isTemplate,
+			disableRootPadding,
 			{
 				blockGap: false,
 				blockStyles: true,
@@ -148,6 +269,7 @@ function useBlockProps( { name, className, clientId } ) {
 				marginReset: false,
 				presets: false,
 				rootPadding: false,
+				variationStyles: true,
 			}
 		);
 	}, [ variation, settings, styles, getBlockStyles, clientId ] );
@@ -156,6 +278,7 @@ function useBlockProps( { name, className, clientId } ) {
 		id: `variation-${ clientId }`,
 		css: variationStyles,
 		__unstableType: 'variation',
+		variation,
 		// The clientId will be stored with the override and used to ensure
 		// the order of overrides matches the order of blocks so that the
 		// correct CSS cascade is maintained.

package/src/hooks/duotone.js

@@ -295,26 +295,30 @@ function useDuotoneStyles( {
 			return;
 		}
 
-		// Safari does not always update the duotone filter when the duotone colors
-		// are changed. When using Safari, force the block element to be repainted by
-		// the browser to ensure any changes are reflected visually. This logic matches
-		// that used on the site frontend in `block-supports/duotone.php`.
+		// Safari does not always update the duotone filter when the duotone
+		// colors are changed. When using Safari, force the block element to be
+		// repainted by the browser to ensure any changes are reflected
+		// visually. This logic matches that used on the site frontend in
+		// `block-supports/duotone.php`.
 		if ( blockElement && isSafari ) {
 			const display = blockElement.style.display;
-			// Switch to `inline-block` to force a repaint. In the editor, `inline-block`
-			// is used instead of `none` to ensure that scroll position is not affected,
-			// as `none` results in the editor scrolling to the top of the block.
+			// Switch to `inline-block` to force a repaint. In the editor,
+			// `inline-block` is used instead of `none` to ensure that scroll
+			// position is not affected, as `none` results in the editor
+			// scrolling to the top of the block.
 			blockElement.style.display = 'inline-block';
-			// Simply accessing el.offsetHeight flushes layout and style
-			// changes in WebKit without having to wait for setTimeout.
+			// Simply accessing el.offsetHeight flushes layout and style changes
+			// in WebKit without having to wait for setTimeout.
 			// eslint-disable-next-line no-unused-expressions
 			blockElement.offsetHeight;
 			blockElement.style.display = display;
 		}
-	}, [ isValidFilter, blockElement ] );
+		// `colors` must be a dependency so this effect runs when the colors
+		// change in Safari.
+	}, [ isValidFilter, blockElement, colors ] );
 }
 
-function useBlockProps( { name, style } ) {
+function useBlockProps( { clientId, name, style } ) {
 	const id = useInstanceId( useBlockProps );
 	const selector = useMemo( () => {
 		const blockType = getBlockType( name );
@@ -362,7 +366,7 @@ function useBlockProps( { name, style } ) {
 	const shouldRender = selector && attribute;
 
 	useDuotoneStyles( {
-		clientId: id,
+		clientId,
 		id: filterClass,
 		selector,
 		attribute,

package/src/hooks/index.js

@@ -88,3 +88,4 @@ export { getTypographyClassesAndStyles } from './use-typography-props';
 export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';
 export { useZoomOut } from './use-zoom-out';
+export { __unstableBlockStyleVariationOverridesWithConfig } from './block-style-variation';

package/src/hooks/use-bindings-attributes.js

@@ -97,6 +97,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 			unlock( select( blocksStore ) ).getAllBlockBindingsSources()
 		);
 		const { name, clientId, context } = props;
+		const hasParentPattern = !! props.context[ 'pattern/overrides' ];
 		const hasPatternOverridesDefaultBinding =
 			props.attributes.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
 				?.source === 'core/pattern-overrides';
@@ -216,13 +217,20 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 						}
 					}
 
-					// Only apply normal attribute updates to blocks
-					// that have partial bindings. Currently this is
-					// only skipped for pattern overrides sources.
 					if (
-						! hasPatternOverridesDefaultBinding &&
+						// Don't update non-connected attributes if the block is using pattern overrides
+						// and the editing is happening while overriding the pattern (not editing the original).
+						! (
+							hasPatternOverridesDefaultBinding &&
+							hasParentPattern
+						) &&
 						Object.keys( keptAttributes ).length
 					) {
+						// Don't update caption and href until they are supported.
+						if ( hasPatternOverridesDefaultBinding ) {
+							delete keptAttributes?.caption;
+							delete keptAttributes?.href;
+						}
 						setAttributes( keptAttributes );
 					}
 				} );
@@ -236,6 +244,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 				setAttributes,
 				sources,
 				hasPatternOverridesDefaultBinding,
+				hasParentPattern,
 			]
 		);
 

package/src/hooks/utils.js

@@ -140,6 +140,7 @@ export function useStyleOverride( {
 	css,
 	assets,
 	__unstableType,
+	variation,
 	clientId,
 } = {} ) {
 	const { setStyleOverride, deleteStyleOverride } = unlock(
@@ -159,6 +160,7 @@ export function useStyleOverride( {
 			css,
 			assets,
 			__unstableType,
+			variation,
 			clientId,
 		};
 		// Batch updates to style overrides to avoid triggering cascading renders

package/src/private-apis.js

@@ -20,7 +20,11 @@ import { cleanEmptyObject, useStyleOverride } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
 import { BlockRemovalWarningModal } from './components/block-removal-warning-modal';
-import { useLayoutClasses, useLayoutStyles } from './hooks';
+import {
+	useLayoutClasses,
+	useLayoutStyles,
+	__unstableBlockStyleVariationOverridesWithConfig,
+} from './hooks';
 import DimensionsTool from './components/dimensions-tool';
 import ResolutionTool from './components/resolution-tool';
 import TextAlignmentControl from './components/text-alignment-control';
@@ -88,4 +92,5 @@ lock( privateApis, {
 	PrivatePublishDateTimePicker,
 	useSpacingSizes,
 	useBlockDisplayTitle,
+	__unstableBlockStyleVariationOverridesWithConfig,
 } );