Cherry-picked commits for WordPress 6.4 RC1 v2 (#55348)

* Add selector as id to layout style overrides. (#55291) * Fix flickering when focusing on global style variations (#55267) * ProgressBar: use text color to ensure enough contrast against background (#55285) * Use text color at different opacities for track and indicator * Add high contrast mode styles * CHANGELOG # Conflicts: # packages/components/CHANGELOG.md * Remove empty attrs. (#54496) * Remove empty attrs. * Fix linter errors --------- Co-authored-by: Sarah Norris <[email protected]> * Add IS_GUTENBERG_PLUGIN flag to LastRevision (#55253) * useBlockPreview: Try outputting EditorStyles to ensure local style overrides are rendered (#55288) * useBlockPreview: Try alternative fix for displaying local style overrides * Avoid duplicate styles, fix rendering issues in Safari * Add more explanatory comments * Remove additional check for styles within the block preview, as it is not needed since EditorStyles handles its own style overrides retrieval * Bug: PHP notice when an image with lightbox is deleted (#55370) * Fix PHP notice when an image with lightbox is deleted * Fix PHP notice when an image with lightbox is deleted --------- Co-authored-by: tellthemachines <[email protected]> Co-authored-by: Aki Hamano <[email protected]> Co-authored-by: Marco Ciampini <[email protected]> Co-authored-by: Jonny Harris <[email protected]> Co-authored-by: Andrew Serong <[email protected]> Co-authored-by: Kishan Jasani <[email protected]>
WordPress · Oct 16, 2023 · 8e94be2 · 8e94be2
1 parent f1b647d
commit 8e94be2
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 37 deletions.
diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/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>
 	);

diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/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 }

diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/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 } />;
 	},

diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
@@ -170,8 +170,8 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	if ( isset( $block['attrs']['id'] ) ) {
 		$img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] );
 		$img_metadata     = wp_get_attachment_metadata( $block['attrs']['id'] );
-		$img_width        = $img_metadata['width'];
-		$img_height       = $img_metadata['height'];
+		$img_width        = $img_metadata['width'] ?? 'none';
+		$img_height       = $img_metadata['height'] ?? 'none';
 	} else {
 		$img_uploaded_src = $processor->get_attribute( 'src' );
 		$img_width        = 'none';

diff --git a/packages/block-serialization-default-parser/class-wp-block-parser.php b/packages/block-serialization-default-parser/class-wp-block-parser.php
@@ -48,14 +48,6 @@ class WP_Block_Parser {
 	 */
 	public $stack;
 
-	/**
-	 * Empty associative array, here due to PHP quirks
-	 *
-	 * @since 4.4.0
-	 * @var array empty associative array
-	 */
-	public $empty_attrs;
-
 	/**
 	 * Parses a document and returns a list of block structures
 	 *
@@ -69,11 +61,10 @@ class WP_Block_Parser {
 	 * @return array[]
 	 */
 	public function parse( $document ) {
-		$this->document    = $document;
-		$this->offset      = 0;
-		$this->output      = array();
-		$this->stack       = array();
-		$this->empty_attrs = array();
+		$this->document = $document;
+		$this->offset   = 0;
+		$this->output   = array();
+		$this->stack    = array();
 
 		while ( $this->proceed() ) {
 			continue;
@@ -287,7 +278,7 @@ public function next_token() {
 		 */
 		$attrs = $has_attrs
 			? json_decode( $matches['attrs'][0], /* as-associative */ true )
-			: $this->empty_attrs;
+			: array();
 
 		/*
 		 * This state isn't allowed
@@ -318,7 +309,7 @@ public function next_token() {
 	 * @return WP_Block_Parser_Block freeform block object.
 	 */
 	public function freeform( $inner_html ) {
-		return new WP_Block_Parser_Block( null, $this->empty_attrs, array(), $inner_html, array( $inner_html ) );
+		return new WP_Block_Parser_Block( null, array(), array(), $inner_html, array( $inner_html ) );
 	}
 
 	/**

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   `ProgressBar`: use text color to ensure enough contrast against background ([#55285](https://github.com/WordPress/gutenberg/pull/55285)).
+
 ### Bug Fix
 
 -   `Placeholder`: Improved DOM structure and screen reader announcements ([#45801](https://github.com/WordPress/gutenberg/pull/45801)).

diff --git a/packages/components/src/progress-bar/styles.ts b/packages/components/src/progress-bar/styles.ts
@@ -27,11 +27,17 @@ export const Track = styled.div`
 	width: 100%;
 	max-width: 160px;
 	height: ${ CONFIG.borderWidthFocus };
-	background-color: var(
-		--wp-components-color-gray-300,
-		${ COLORS.gray[ 300 ] }
+	/* Text color at 10% opacity */
+	background-color: color-mix(
+		in srgb,
+		var( --wp-components-color-foreground, ${ COLORS.gray[ 900 ] } ),
+		transparent 90%
 	);
 	border-radius: ${ CONFIG.radiusBlockUi };
+
+	// Windows high contrast mode.
+	outline: 2px solid transparent;
+	outline-offset: 2px;
 `;
 
 export const Indicator = styled.div< {
@@ -43,7 +49,16 @@ export const Indicator = styled.div< {
 	top: 0;
 	height: 100%;
 	border-radius: ${ CONFIG.radiusBlockUi };
-	background-color: ${ COLORS.theme.accent };
+	/* Text color at 90% opacity */
+	background-color: color-mix(
+		in srgb,
+		var( --wp-components-color-foreground, ${ COLORS.gray[ 900 ] } ),
+		transparent 10%
+	);
+
+	// Windows high contrast mode.
+	outline: 2px solid transparent;
+	outline-offset: -2px;
 
 	${ ( { isIndeterminate, value } ) =>
 		isIndeterminate

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -85,23 +85,35 @@
 
 .edit-site-global-styles-variations_item {
 	box-sizing: border-box;
+	// To round the outline in Windows 10 high contrast mode.
+	border-radius: $radius-block-ui;
 
 	.edit-site-global-styles-variations_item-preview {
 		padding: $border-width * 2;
 		border-radius: $radius-block-ui;
-		border: $gray-200 $border-width solid;
+		box-shadow: 0 0 0 $border-width $gray-200;
+		// Shown in Windows 10 high contrast mode.
+		outline: 1px solid transparent;
 	}
 
 	&.is-active .edit-site-global-styles-variations_item-preview {
-		border: $gray-900 $border-width solid;
+		box-shadow: 0 0 0 $border-width $gray-900;
+		// Shown in Windows 10 high contrast mode.
+		outline-width: 3px;
 	}
 
 	&:hover .edit-site-global-styles-variations_item-preview {
-		border: var(--wp-admin-theme-color) $border-width solid;
+		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
 	}
 
 	&:focus .edit-site-global-styles-variations_item-preview {
-		border: var(--wp-admin-theme-color) var(--wp-admin-border-width-focus) solid;
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	}
+
+	&:focus-visible {
+		// Shown in Windows 10 high contrast mode.
+		outline: 3px solid transparent;
+		outline-offset: 0;
 	}
 }
 

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/last-revision.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/last-revision.js
@@ -31,6 +31,10 @@ const useRevisionData = () => {
 function PostLastRevisionCheck( { children } ) {
 	const { lastRevisionId, revisionsCount } = useRevisionData();
 
+	if ( ! process.env.IS_GUTENBERG_PLUGIN ) {
+		return null;
+	}
+
 	if ( ! lastRevisionId || revisionsCount < 2 ) {
 		return null;
 	}

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -90,17 +90,16 @@
 	}
 
 	.edit-site-global-styles-variations_item-preview {
-		border: $gray-900 $border-width solid;
+		box-shadow: 0 0 0 $border-width $gray-900;
 	}
 	.edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview {
-		border: $gray-100 $border-width solid;
+		box-shadow: 0 0 0 $border-width $gray-100;
 	}
 	.edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview {
-		border: var(--wp-admin-theme-color) $border-width solid;
+		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
 	}
-
 	.edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview {
-		border: var(--wp-admin-theme-color) var(--wp-admin-border-width-focus) solid;
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 	}
 }