@wordpress/block-editor 12.10.5 → 12.10.7

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.10.5",
+	"version": "12.10.7",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,36 +35,36 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.42.5",
-		"@wordpress/api-fetch": "^6.39.5",
-		"@wordpress/blob": "^3.42.5",
-		"@wordpress/blocks": "^12.19.5",
-		"@wordpress/commands": "^0.13.5",
-		"@wordpress/components": "^25.8.5",
-		"@wordpress/compose": "^6.19.5",
-		"@wordpress/data": "^9.12.5",
-		"@wordpress/date": "^4.42.5",
-		"@wordpress/deprecated": "^3.42.5",
-		"@wordpress/dom": "^3.42.5",
-		"@wordpress/element": "^5.19.5",
-		"@wordpress/escape-html": "^2.42.5",
-		"@wordpress/hooks": "^3.42.5",
-		"@wordpress/html-entities": "^3.42.5",
-		"@wordpress/i18n": "^4.42.5",
-		"@wordpress/icons": "^9.33.5",
-		"@wordpress/is-shallow-equal": "^4.42.5",
-		"@wordpress/keyboard-shortcuts": "^4.19.5",
-		"@wordpress/keycodes": "^3.42.5",
-		"@wordpress/notices": "^4.10.5",
-		"@wordpress/preferences": "^3.19.5",
-		"@wordpress/private-apis": "^0.24.5",
-		"@wordpress/rich-text": "^6.19.5",
-		"@wordpress/shortcode": "^3.42.5",
-		"@wordpress/style-engine": "^1.25.5",
-		"@wordpress/token-list": "^2.42.5",
-		"@wordpress/url": "^3.43.5",
-		"@wordpress/warning": "^2.42.5",
-		"@wordpress/wordcount": "^3.42.5",
+		"@wordpress/a11y": "^3.42.7",
+		"@wordpress/api-fetch": "^6.39.7",
+		"@wordpress/blob": "^3.42.7",
+		"@wordpress/blocks": "^12.19.7",
+		"@wordpress/commands": "^0.13.7",
+		"@wordpress/components": "^25.8.7",
+		"@wordpress/compose": "^6.19.7",
+		"@wordpress/data": "^9.12.7",
+		"@wordpress/date": "^4.42.7",
+		"@wordpress/deprecated": "^3.42.7",
+		"@wordpress/dom": "^3.42.7",
+		"@wordpress/element": "^5.19.7",
+		"@wordpress/escape-html": "^2.42.7",
+		"@wordpress/hooks": "^3.42.7",
+		"@wordpress/html-entities": "^3.42.7",
+		"@wordpress/i18n": "^4.42.7",
+		"@wordpress/icons": "^9.33.7",
+		"@wordpress/is-shallow-equal": "^4.42.7",
+		"@wordpress/keyboard-shortcuts": "^4.19.7",
+		"@wordpress/keycodes": "^3.42.7",
+		"@wordpress/notices": "^4.10.7",
+		"@wordpress/preferences": "^3.19.7",
+		"@wordpress/private-apis": "^0.24.7",
+		"@wordpress/rich-text": "^6.19.7",
+		"@wordpress/shortcode": "^3.42.7",
+		"@wordpress/style-engine": "^1.25.7",
+		"@wordpress/token-list": "^2.42.7",
+		"@wordpress/url": "^3.43.7",
+		"@wordpress/warning": "^2.42.7",
+		"@wordpress/wordcount": "^3.42.7",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "edc87d3e33740b82b30f5e21c5953ecded84f08f"
+	"gitHead": "5551609efcf6d5b15ac55842bbbb310faea607f9"
 }

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

@@ -16,6 +16,7 @@ import deprecated from '@wordpress/deprecated';
  */
 import { ExperimentalBlockEditorProvider } from '../provider';
 import AutoHeightBlockPreview from './auto';
+import EditorStyles from '../editor-styles';
 import { store as blockEditorStore } from '../../store';
 import { BlockListItems } from '../block-list';
 
@@ -113,7 +114,11 @@ export function useBlockPreview( { blocks, props = {}, layout } ) {
 		[]
 	);
 	const settings = useMemo(
-		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		() => ( {
+			...originalSettings,
+			styles: undefined, // Clear styles included by the parent settings, as they are already output by the parent's EditorStyles.
+			__unstableIsPreviewMode: true,
+		} ),
 		[ originalSettings ]
 	);
 	const disabledRef = useDisabled();
@@ -128,6 +133,7 @@ export function useBlockPreview( { blocks, props = {}, layout } ) {
 			value={ renderedBlocks }
 			settings={ settings }
 		>
+			<EditorStyles />
 			<BlockListItems renderAppender={ false } layout={ layout } />
 		</ExperimentalBlockEditorProvider>
 	);

package/src/hooks/duotone.js

@@ -37,11 +37,22 @@ import { scopeSelector } from '../components/global-styles/utils';
 import { useBlockSettings } from './utils';
 import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
 import { useBlockEditingMode } from '../components/block-editing-mode';
+import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
 
 const EMPTY_ARRAY = [];
 
+// Safari does not always update the duotone filter when the duotone colors
+// are changed. This browser check is later used to force a re-render of the block
+// element to ensure the duotone filter is updated. The check is included at the
+// root of this file as it only needs to be run once per page load.
+const isSafari =
+	window?.navigator.userAgent &&
+	window.navigator.userAgent.includes( 'Safari' ) &&
+	! window.navigator.userAgent.includes( 'Chrome' ) &&
+	! window.navigator.userAgent.includes( 'Chromium' );
+
 extend( [ namesPlugin ] );
 
 function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
@@ -223,6 +234,7 @@ const withDuotoneControls = createHigherOrderComponent(
 );
 
 function DuotoneStyles( {
+	clientId,
 	id: filterId,
 	selector: duotoneSelector,
 	attribute: duotoneAttr,
@@ -278,6 +290,8 @@ function DuotoneStyles( {
 		useDispatch( blockEditorStore )
 	);
 
+	const blockElement = useBlockElement( clientId );
+
 	useEffect( () => {
 		if ( ! isValidFilter ) return;
 
@@ -294,12 +308,30 @@ function DuotoneStyles( {
 			__unstableType: 'svgs',
 		} );
 
+		// 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.
+			blockElement.style.display = 'inline-block';
+			// 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;
+		}
+
 		return () => {
 			deleteStyleOverride( filterId );
 			deleteStyleOverride( `duotone-${ filterId }` );
 		};
 	}, [
 		isValidFilter,
+		blockElement,
 		colors,
 		selector,
 		filterId,
@@ -378,6 +410,7 @@ const withDuotoneStyles = createHigherOrderComponent(
 			<>
 				{ shouldRender && (
 					<DuotoneStyles
+						clientId={ props.clientId }
 						id={ filterClass }
 						selector={ selector }
 						attribute={ attribute }

package/src/hooks/layout.js

@@ -408,11 +408,11 @@ export const withLayoutStyles = createHigherOrderComponent(
 
 		useEffect( () => {
 			if ( ! css ) return;
-			setStyleOverride( id, { css } );
+			setStyleOverride( selector, { css } );
 			return () => {
-				deleteStyleOverride( id );
+				deleteStyleOverride( selector );
 			};
-		}, [ id, css, setStyleOverride, deleteStyleOverride ] );
+		}, [ selector, css, setStyleOverride, deleteStyleOverride ] );
 
 		return (
 			<BlockListBlock
@@ -472,11 +472,11 @@ export const withChildLayoutStyles = createHigherOrderComponent(
 
 		useEffect( () => {
 			if ( ! css ) return;
-			setStyleOverride( id, { css } );
+			setStyleOverride( selector, { css } );
 			return () => {
-				deleteStyleOverride( id );
+				deleteStyleOverride( selector );
 			};
-		}, [ id, css, setStyleOverride, deleteStyleOverride ] );
+		}, [ selector, css, setStyleOverride, deleteStyleOverride ] );
 
 		return <BlockListBlock { ...props } className={ className } />;
 	},

package/src/hooks/utils.js

@@ -279,6 +279,8 @@ export function useBlockSettings( name, parentLayout ) {
 		isBackgroundEnabled,
 		isLinkEnabled,
 		isTextEnabled,
+		isHeadingEnabled,
+		isButtonEnabled,
 	] );
 
 	return useSettingsForBlockElement( rawSettings, name );

package/src/lock-unlock.js

@@ -5,6 +5,6 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
 		'@wordpress/block-editor'
 	);