Cherry-picked commits for WordPress 6.4 Beta 3 v2 (#55193)

* Site Editor Styles Screen: Fix dancing styles previews (#55183)

* Pulling across changes from WordPress/wordpress-develop#5441 (#55181)

Removed var

* Add `aria-label` attribute to navigation block only when it is open (#54816)

* Add `aria-label` only when is open

* Remove unnecessary `label` property in edit

* Escape translation

* Move navigation context to `wp_json_encode`

* Add `wp_json_encode` flags

* Paste: fix MS Word list paste (#55127)

* Paste: fix MS Word list paste

* Match mso-list:Ignore

* Fix inline paste

* Fix scrollbars on pattern transforms (#55069)

* Fix scrollbars on pattern transforms

* Fix single pattern previews

* Improve classname semantics

* Remove modal title

* Reset styles on window resize (#55077)

Co-authored-by: Ricardo Artemio Morales <[email protected]>

---------

Co-authored-by: Andrew Serong <[email protected]>
Co-authored-by: Ramon <[email protected]>
Co-authored-by: Mario Santos <[email protected]>
Co-authored-by: Ella <[email protected]>
Co-authored-by: Daniel Richards <[email protected]>
Co-authored-by: Ricardo Artemio Morales <[email protected]>

packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js

@@ -60,10 +60,7 @@ function PreviewPatternsPopover( { patterns, onSelect } ) {
 					className="block-editor-block-switcher__preview__popover"
 					position="bottom right"
 				>
-					<div className="block-editor-block-switcher__preview">
-						<div className="block-editor-block-switcher__preview-title">
-							{ __( 'Preview' ) }
-						</div>
+					<div className="block-editor-block-switcher__preview is-pattern-list-preview">
 						<BlockPatternsList
 							patterns={ patterns }
 							onSelect={ onSelect }

packages/block-editor/src/components/block-switcher/style.scss

@@ -98,6 +98,7 @@
 
 .block-editor-block-switcher__preview__popover {
 	display: none;
+	overflow: hidden;
 
 	// Position correctly. Needs specificity.
 	&.components-popover {
@@ -115,6 +116,7 @@
 		border-radius: $radius-block-ui;
 		outline: none;
 		box-shadow: none;
+		overflow: auto;
 	}
 
 	.block-editor-block-switcher__preview {
@@ -124,6 +126,10 @@
 		// Use padding to prevent the pattern previews focus style from being cut-off.
 		padding: 0 $grid-unit-20;
 		overflow: hidden;
+
+		&.is-pattern-list-preview {
+			overflow: unset;
+		}
 	}
 }
 

packages/block-library/src/image/index.php

@@ -200,6 +200,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$w->set_attribute( 'data-wp-init', 'effects.core.image.setCurrentSrc' );
 	$w->set_attribute( 'data-wp-on--load', 'actions.core.image.handleLoad' );
 	$w->set_attribute( 'data-wp-effect', 'effects.core.image.setButtonStyles' );
+	$w->set_attribute( 'data-wp-effect--setStylesOnResize', 'effects.core.image.setStylesOnResize' );
 	$body_content = $w->get_updated_html();
 
 	// Wrap the image in the body content with a button.

packages/block-library/src/image/view.js

@@ -105,7 +105,10 @@ store(
 						context.core.image.scrollDelta = 0;
 
 						context.core.image.lightboxEnabled = true;
-						setStyles( context, event );
+						setStyles(
+							context,
+							event.target.previousElementSibling
+						);
 
 						context.core.image.scrollTopReset =
 							window.pageYOffset ||
@@ -338,6 +341,15 @@ store(
 							context.core.image.imageButtonHeight = offsetHeight;
 						}
 					},
+					setStylesOnResize: ( { state, context, ref } ) => {
+						if (
+							context.core.image.lightboxEnabled &&
+							( state.core.image.windowWidth ||
+								state.core.image.windowHeight )
+						) {
+							setStyles( context, ref );
+						}
+					},
 				},
 			},
 		},
@@ -362,17 +374,16 @@ store(
  * @param {Object} context - An Interactivity API context
  * @param {Object} event - A triggering event
  */
-function setStyles( context, event ) {
+function setStyles( context, ref ) {
 	// The reference img element lies adjacent
 	// to the event target button in the DOM.
 	let {
 		naturalWidth,
 		naturalHeight,
 		offsetWidth: originalWidth,
 		offsetHeight: originalHeight,
-	} = event.target.previousElementSibling;
-	let { x: screenPosX, y: screenPosY } =
-		event.target.previousElementSibling.getBoundingClientRect();
+	} = ref;
+	let { x: screenPosX, y: screenPosY } = ref.getBoundingClientRect();
 
 	// Natural ratio of the image clicked to open the lightbox.
 	const naturalRatio = naturalWidth / naturalHeight;

packages/block-library/src/latest-posts/edit.js

@@ -484,9 +484,10 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								.join( ' ' ) }
 							{ createInterpolateElement(
 								sprintf(
-									/* translators: 1: The static string "Read more", 2: The post title only visible to screen readers. */
-									__( '… <a>%1$s<span>: %2$s</span></a>' ),
-									__( 'Read more' ),
+									/* translators: 1: Hidden accessibility text: Post title */
+									__(
+										'… <a>Read more<span>: %1$s</span></a>'
+									),
 									titleTrimmed || __( '(no title)' )
 								),
 								{

packages/block-library/src/latest-posts/index.php

@@ -152,10 +152,9 @@ function render_block_core_latest_posts( $attributes ) {
 				if ( $excerpt_length <= $block_core_latest_posts_excerpt_length ) {
 					$trimmed_excerpt  = substr( $trimmed_excerpt, 0, -11 );
 					$trimmed_excerpt .= sprintf(
-						/* translators: 1: A URL to a post, 2: The static string "Read more", 3: The post title only visible to screen readers. */
-						__( '… <a href="%1$s" rel="noopener noreferrer">%2$s<span class="screen-reader-text">: %3$s</span></a>' ),
+						/* translators: 1: A URL to a post, 2: Hidden accessibility text: Post title */
+						__( '… <a href="%1$s" rel="noopener noreferrer">Read more<span class="screen-reader-text">: %2$s</span></a>' ),
 						esc_url( $post_link ),
-						__( 'Read more' ),
 						esc_html( $title )
 					);
 				}

packages/block-library/src/navigation/edit/index.js

@@ -884,7 +884,6 @@ function Navigation( {
 						<ResponsiveWrapper
 							id={ clientId }
 							onToggle={ setResponsiveMenuVisibility }
-							label={ __( 'Menu' ) }
 							hasIcon={ hasIcon }
 							icon={ icon }
 							isOpen={ isResponsiveMenuOpen }

packages/block-library/src/navigation/index.php

@@ -696,9 +696,22 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$responsive_dialog_directives    = '';
 	$close_button_directives         = '';
 	if ( $should_load_view_script ) {
+		$nav_element_context             = wp_json_encode(
+			array(
+				'core' => array(
+					'navigation' => array(
+						'overlayOpenedBy' => array(),
+						'type'            => 'overlay',
+						'roleAttribute'   => '',
+						'ariaLabel'       => __( 'Menu' ),
+					),
+				),
+			),
+			JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP
+		);
 		$nav_element_directives          = '
 			data-wp-interactive
-			data-wp-context=\'{ "core": { "navigation": { "overlayOpenedBy": {}, "type": "overlay", "roleAttribute": "" } } }\'
+			data-wp-context=\'' . $nav_element_context . '\'
 		';
 		$open_button_directives          = '
 			data-wp-on--click="actions.core.navigation.openMenuOnClick"
@@ -714,6 +727,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		';
 		$responsive_dialog_directives    = '
 			data-wp-bind--aria-modal="selectors.core.navigation.ariaModal"
+			data-wp-bind--aria-label="selectors.core.navigation.ariaLabel"
 			data-wp-bind--role="selectors.core.navigation.roleAttribute"
 			data-wp-effect="effects.core.navigation.focusFirstElement"
 		';
@@ -723,11 +737,11 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	}
 
 	$responsive_container_markup = sprintf(
-		'<button aria-haspopup="true" %3$s class="%6$s" %11$s>%9$s</button>
-			<div class="%5$s" style="%7$s" id="%1$s" %12$s>
+		'<button aria-haspopup="true" %3$s class="%6$s" %10$s>%8$s</button>
+			<div class="%5$s" style="%7$s" id="%1$s" %11$s>
 				<div class="wp-block-navigation__responsive-close" tabindex="-1">
-					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s" %13$s>
-							<button %4$s class="wp-block-navigation__responsive-container-close" %14$s>%10$s</button>
+					<div class="wp-block-navigation__responsive-dialog" %12$s>
+							<button %4$s class="wp-block-navigation__responsive-container-close" %13$s>%9$s</button>
 						<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
 							%2$s
 						</div>
@@ -741,7 +755,6 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		esc_attr( implode( ' ', $responsive_container_classes ) ),
 		esc_attr( implode( ' ', $open_button_classes ) ),
 		esc_attr( safecss_filter_attr( $colors['overlay_inline_styles'] ) ),
-		__( 'Menu' ),
 		$toggle_button_content,
 		$toggle_close_button_content,
 		$open_button_directives,

packages/block-library/src/navigation/view.js

@@ -87,6 +87,13 @@ wpStore( {
 						? 'true'
 						: null;
 				},
+				ariaLabel: ( store ) => {
+					const { context, selectors } = store;
+					return context.core.navigation.type === 'overlay' &&
+						selectors.core.navigation.isMenuOpen( store )
+						? context.core.navigation.ariaLabel
+						: null;
+				},
 				isMenuOpen: ( { context } ) =>
 					// The menu is opened if either `click`, `hover` or `focus` is true.
 					Object.values(

packages/block-library/src/query/index.php

@@ -34,7 +34,8 @@ function render_block_core_query( $attributes, $content, $block ) {
 								'loadedText'  => __( 'Page Loaded.' ),
 							),
 						),
-					)
+					),
+					JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP
 				)
 			);
 			$content = $p->get_updated_html();

packages/blocks/src/api/raw-handling/ms-list-converter.js

@@ -3,6 +3,12 @@
  */
 const { parseInt } = window;
 
+/**
+ * Internal dependencies
+ */
+import { deepFilterHTML } from './utils';
+import msListIgnore from './ms-list-ignore';
+
 function isList( node ) {
 	return node.nodeName === 'OL' || node.nodeName === 'UL';
 }
@@ -14,23 +20,10 @@ export default function msListConverter( node, doc ) {
 
 	const style = node.getAttribute( 'style' );
 
-	if ( ! style ) {
-		return;
-	}
-
-	// Quick check.
-	if ( style.indexOf( 'mso-list' ) === -1 ) {
-		return;
-	}
-
-	const matches = /mso-list\s*:[^;]+level([0-9]+)/i.exec( style );
-
-	if ( ! matches ) {
+	if ( ! style || ! style.includes( 'mso-list' ) ) {
 		return;
 	}
 
-	let level = parseInt( matches[ 1 ], 10 ) - 1 || 0;
-
 	const prevNode = node.previousElementSibling;
 
 	// Add new list if no previous.
@@ -53,13 +46,11 @@ export default function msListConverter( node, doc ) {
 
 	let receivingNode = listNode;
 
-	// Remove the first span with list info.
-	node.removeChild( node.firstChild );
-
 	// Add content.
-	while ( node.firstChild ) {
-		listItem.appendChild( node.firstChild );
-	}
+	listItem.innerHTML = deepFilterHTML( node.innerHTML, [ msListIgnore ] );
+
+	const matches = /mso-list\s*:[^;]+level([0-9]+)/i.exec( style );
+	let level = matches ? parseInt( matches[ 1 ], 10 ) - 1 || 0 : 0;
 
 	// Change pointer depending on indentation level.
 	while ( level-- ) {

packages/blocks/src/api/raw-handling/ms-list-ignore.js

@@ -0,0 +1,27 @@
+/**
+ * Looks for comments, and removes them.
+ *
+ * @param {Node} node The node to be processed.
+ * @return {void}
+ */
+export default function msListIgnore( node ) {
+	if ( node.nodeType !== node.ELEMENT_NODE ) {
+		return;
+	}
+
+	const style = node.getAttribute( 'style' );
+
+	if ( ! style || ! style.includes( 'mso-list' ) ) {
+		return;
+	}
+
+	const rules = style.split( ';' ).reduce( ( acc, rule ) => {
+		const [ key, value ] = rule.split( ':' );
+		acc[ key.trim().toLowerCase() ] = value.trim().toLowerCase();
+		return acc;
+	}, {} );
+
+	if ( rules[ 'mso-list' ] === 'ignore' ) {
+		node.remove();
+	}
+}

packages/blocks/src/api/raw-handling/paste-handler.js

@@ -17,6 +17,7 @@ import isInlineContent from './is-inline-content';
 import phrasingContentReducer from './phrasing-content-reducer';
 import headRemover from './head-remover';
 import msListConverter from './ms-list-converter';
+import msListIgnore from './ms-list-ignore';
 import listReducer from './list-reducer';
 import imageCorrector from './image-corrector';
 import blockquoteNormaliser from './blockquote-normaliser';
@@ -49,6 +50,7 @@ function filterInlineHTML( HTML, preserveWhiteSpace ) {
 	HTML = deepFilterHTML( HTML, [
 		headRemover,
 		googleDocsUIDRemover,
+		msListIgnore,
 		phrasingContentReducer,
 		commentRemover,
 	] );

packages/blocks/src/api/raw-handling/test/ms-list-converter.js

@@ -7,7 +7,7 @@ import { deepFilterHTML } from '../utils';
 describe( 'msListConverter', () => {
 	it( 'should convert unordered list', () => {
 		const input =
-			'<p style="mso-list:l0 level1 lfo1"><span>* </span>test</p>';
+			'<p style="mso-list:l0 level1 lfo1"><span style="mso-list:Ignore">* </span>test</p>';
 		const output = '<ul><li>test</li></ul>';
 		expect( deepFilterHTML( input, [ msListConverter ] ) ).toEqual(
 			output
@@ -16,7 +16,7 @@ describe( 'msListConverter', () => {
 
 	it( 'should convert ordered list', () => {
 		const input =
-			'<p style="mso-list:l0 level1 lfo1"><span>1 </span>test</p>';
+			'<p style="mso-list:l0 level1 lfo1"><span style="mso-list:Ignore">1 </span>test</p>';
 		const output = '<ol type="1"><li>test</li></ol>';
 		expect( deepFilterHTML( input, [ msListConverter ] ) ).toEqual(
 			output
@@ -25,11 +25,11 @@ describe( 'msListConverter', () => {
 
 	it( 'should convert indented list', () => {
 		const input1 =
-			'<p style="mso-list:l0 level1 lfo1"><span>* </span>test</p>';
+			'<p style="mso-list:l0 level1 lfo1"><span style="mso-list:Ignore">* </span>test</p>';
 		const input2 =
-			'<p style="mso-list:l0 level2 lfo1"><span>* </span>test</p>';
+			'<p style="mso-list:l0 level2 lfo1"><span style="mso-list:Ignore">* </span>test</p>';
 		const input3 =
-			'<p style="mso-list:l0 level1 lfo1"><span>* </span>test</p>';
+			'<p style="mso-list:l0 level1 lfo1"><span style="mso-list:Ignore">* </span>test</p>';
 		const output =
 			'<ul><li>test<ul><li>test</li></ul></li><li>test</li></ul>';
 		expect(
@@ -39,13 +39,13 @@ describe( 'msListConverter', () => {
 
 	it( 'should convert deep indented list', () => {
 		const input1 =
-			'<p style="mso-list:l0 level1 lfo1"><span>* </span>test</p>';
+			'<p style="mso-list:l0 level1 lfo1"><span style="mso-list:Ignore">* </span>test</p>';
 		const input2 =
-			'<p style="mso-list:l0 level2 lfo1"><span>* </span>test</p>';
+			'<p style="mso-list:l0 level2 lfo1"><span style="mso-list:Ignore">* </span>test</p>';
 		const input3 =
-			'<p style="mso-list:l0 level3 lfo1"><span>* </span>test</p>';
+			'<p style="mso-list:l0 level3 lfo1"><span style="mso-list:Ignore">* </span>test</p>';
 		const input4 =
-			'<p style="mso-list:l0 level1 lfo1"><span>* </span>test</p>';
+			'<p style="mso-list:l0 level1 lfo1"><span style="mso-list:Ignore">* </span>test</p>';
 		const output =
 			'<ul><li>test<ul><li>test<ul><li>test</li></ul></li></ul></li><li>test</li></ul>';
 		expect(

packages/edit-site/src/components/sidebar-navigation-screen/style.scss

@@ -76,6 +76,19 @@
 }
 
 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
+	@include break-medium() {
+		// Safari does not currently support `scrollbar-gutter: stable`, so at
+		// particular viewport sizes it's possible for previews to render prior to a
+		// scrollbar appearing. This then causes a scrollbar to appear, which reduces
+		// the width of the container and can cause the preview's width to change.
+		// As a result, the preview can go into an endless loop of resizing, causing
+		// the preview elements to appear to "dance". A workaround is to provide a
+		// max-width for the container, which prevents the introduction of the scrollbar
+		// from causing the preview's width to change.
+		// See: https://github.com/WordPress/gutenberg/issues/55112
+		max-width: 292px;
+	}
+
 	.edit-site-global-styles-variations_item-preview {
 		border: $gray-900 $border-width solid;
 	}

test/integration/__snapshots__/blocks-raw-handling.test.js.snap

@@ -26,7 +26,9 @@ exports[`Blocks raw handling pasteHandler iframe-embed 1`] = `""`;
 
 exports[`Blocks raw handling pasteHandler markdown 1`] = `"This is a heading with <em>italic</em><br>This is a paragraph with a <a href="https://w.org/">link</a>, <strong>bold</strong>, and <del>strikethrough</del>.<br>Preserve<br>line breaks please.<br>Lists<br>A<br>Bulleted Indented<br>List<br>One<br>Two<br>Three<br>Table<br>First Header<br>Second Header<br>Content from cell 1<br>Content from cell 2<br>Content in the first column<br>Content in the second column<br><br><br><br>Table with empty cells.<br>Quote<br>First<br>Second<br>Code<br>Inline <code>code</code> tags should work.<br><code>This is a code block.</code>"`;
 
-exports[`Blocks raw handling pasteHandler ms-word 1`] = `"This is a title<br>&nbsp;<br>This is a subtitle<br>&nbsp;<br>This is a heading level 1<br>&nbsp;<br>This is a heading level 2<br>&nbsp;<br>This is a <strong>paragraph</strong> with a <a href="https://w.org/">link</a>.<br>&nbsp;<br>·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; A<br>·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Bulleted<br>o&nbsp;&nbsp; Indented<br>·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; List<br>&nbsp;<br>1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; One<br>2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Two<br>3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Three<br>&nbsp;<br>One<br>Two<br>Three<br>1<br>2<br>3<br>I<br>II<br>III<br>&nbsp;<br>An image:<br>&nbsp;<br><img width="451" height="338" src="file:LOW-RES.png"><br><a href="#anchor">This is an anchor link</a> that leads to the next paragraph.<br><a id="anchor">This is the paragraph with the anchor.</a><br><a href="#nowhere">This is an anchor link</a> that leads nowhere.<br><a>This is a paragraph with an anchor with no link pointing to it.</a><br>This is a reference to a footnote<a href="#_ftn1" id="_ftnref1">[1]</a>.<br>This is a reference to an endnote<a href="#_edn1" id="_ednref1">[i]</a>.<br><br><br><a href="#_ftnref1" id="_ftn1">[1]</a> This is a footnote.<br><br><br><a href="#_ednref1" id="_edn1">[i]</a> This is an endnote."`;
+exports[`Blocks raw handling pasteHandler ms-word 1`] = `"This is a title<br>&nbsp;<br>This is a subtitle<br>&nbsp;<br>This is a heading level 1<br>&nbsp;<br>This is a heading level 2<br>&nbsp;<br>This is a <strong>paragraph</strong> with a <a href="https://w.org/">link</a>.<br>&nbsp;<br>A<br>Bulleted<br>Indented<br>List<br>&nbsp;<br>One<br>Two<br>Three<br>&nbsp;<br>One<br>Two<br>Three<br>1<br>2<br>3<br>I<br>II<br>III<br>&nbsp;<br>An image:<br>&nbsp;<br><img width="451" height="338" src="file:LOW-RES.png"><br><a href="#anchor">This is an anchor link</a> that leads to the next paragraph.<br><a id="anchor">This is the paragraph with the anchor.</a><br><a href="#nowhere">This is an anchor link</a> that leads nowhere.<br><a>This is a paragraph with an anchor with no link pointing to it.</a><br>This is a reference to a footnote<a href="#_ftn1" id="_ftnref1">[1]</a>.<br>This is a reference to an endnote<a href="#_edn1" id="_ednref1">[i]</a>.<br><br><br><a href="#_ftnref1" id="_ftn1">[1]</a> This is a footnote.<br><br><br><a href="#_ednref1" id="_edn1">[i]</a> This is an endnote."`;
+
+exports[`Blocks raw handling pasteHandler ms-word-list 1`] = `"<a>This is a headline?</a><br>This is a text:<br>One<br>Two<br>Three<br><a>Lorem Ipsum.</a><br>&nbsp;"`;
 
 exports[`Blocks raw handling pasteHandler ms-word-online 1`] = `"This is a <em>heading</em>&nbsp;<br>This is a <strong>paragraph </strong>with a <a href="https://w.org/" target="_blank" rel="noreferrer noopener">link</a>.&nbsp;<br>A&nbsp;<br>Bulleted&nbsp;<br>Indented&nbsp;<br>List&nbsp;<br>&nbsp;<br>One&nbsp;<br>Two&nbsp;<br>Three&nbsp;<br><br>One&nbsp;<br>Two&nbsp;<br>Three&nbsp;<br>1&nbsp;<br>2&nbsp;<br>3&nbsp;<br>I&nbsp;<br>II&nbsp;<br>III&nbsp;<br>&nbsp;<br>An image:&nbsp;<br><img src="data:image/jpeg;base64,###">&nbsp;"`;