Backport fixes for WordPress 5.8 RC4

lib/block-patterns.php

@@ -93,7 +93,7 @@ function register_gutenberg_patterns() {
 							<!-- wp:post-template -->
 							<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
 							<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:post-title {"isLink":true} /-->
-							<!-- wp:post-excerpt {"wordCount":20} /-->
+							<!-- wp:post-excerpt /-->
 							<!-- wp:post-date /--></div>
 							<!-- /wp:group -->
 							<!-- /wp:post-template -->

lib/class-wp-theme-json-gutenberg.php

@@ -1393,7 +1393,7 @@ public static function get_from_editor_settings( $settings ) {
 				$theme_settings['settings']['spacing'] = array();
 			}
 			$theme_settings['settings']['spacing']['units'] = ( true === $settings['enableCustomUnits'] ) ?
-				array( 'px', 'em', 'rem', 'vh', 'vw' ) :
+				array( 'px', 'em', 'rem', 'vh', 'vw', '%' ) :
 				$settings['enableCustomUnits'];
 		}
 

lib/experimental-default-theme.json

@@ -212,7 +212,7 @@
 		"spacing": {
 			"customMargin": false,
 			"customPadding": false,
-			"units": [ "px", "em", "rem", "vh", "vw" ]
+			"units": [ "px", "em", "rem", "vh", "vw", "%" ]
 		},
 		"border": {
 			"customColor": false,

packages/block-editor/src/components/iframe/index.js

@@ -49,6 +49,19 @@ function styleSheetsCompat( doc ) {
 			return;
 		}
 
+		// Generally, ignore inline styles. We add inline styles belonging to a
+		// stylesheet later, which may or may not match the selectors.
+		if ( ownerNode.tagName !== 'LINK' ) {
+			return;
+		}
+
+		// Don't try to add the reset styles, which were removed as a dependency
+		// from `edit-blocks` for the iframe since we don't need to reset admin
+		// styles.
+		if ( ownerNode.id === 'wp-reset-editor-styles-css' ) {
+			return;
+		}
+
 		const isMatch = Array.from( cssRules ).find(
 			( { selectorText } ) =>
 				selectorText &&
@@ -62,9 +75,17 @@ function styleSheetsCompat( doc ) {
 				`Stylesheet ${ ownerNode.id } was not properly added.
 For blocks, use the block API's style (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) or editorStyle (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style).
 For themes, use add_editor_style (https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#editor-styles).`,
-				ownerNode
+				ownerNode.outerHTML
 			);
 			doc.head.appendChild( ownerNode.cloneNode( true ) );
+
+			// Add inline styles belonging to the stylesheet.
+			const inlineCssId = ownerNode.id.replace( '-css', '-inline-css' );
+			const inlineCssElement = document.getElementById( inlineCssId );
+
+			if ( inlineCssElement ) {
+				doc.head.appendChild( inlineCssElement.cloneNode( true ) );
+			}
 		}
 	} );
 }
@@ -232,12 +253,23 @@ function Iframe( { contentRef, children, head, ...props }, ref ) {
 	head = (
 		<>
 			<style>{ 'body{margin:0}' }</style>
-			{ styles.map( ( { tagName, href, id, rel, media }, index ) => {
-				const TagName = tagName.toLowerCase();
-				return (
-					<TagName { ...{ href, id, rel, media } } key={ index } />
-				);
-			} ) }
+			{ styles.map(
+				( { tagName, href, id, rel, media, textContent } ) => {
+					const TagName = tagName.toLowerCase();
+
+					if ( TagName === 'style' ) {
+						return (
+							<TagName { ...{ id } } key={ id }>
+								{ textContent }
+							</TagName>
+						);
+					}
+
+					return (
+						<TagName { ...{ href, id, rel, media } } key={ id } />
+					);
+				}
+			) }
 			{ head }
 		</>
 	);

packages/block-editor/src/components/rich-text/use-input-rules.js

@@ -60,7 +60,7 @@ export function useInputRules( props ) {
 		}
 
 		function onInput( event ) {
-			const { inputType } = event;
+			const { inputType, type } = event;
 			const {
 				value,
 				onChange,
@@ -69,7 +69,7 @@ export function useInputRules( props ) {
 			} = propsRef.current;
 
 			// Only run input rules when inserting text.
-			if ( inputType !== 'insertText' ) {
+			if ( inputType !== 'insertText' && type !== 'compositionend' ) {
 				return;
 			}
 
@@ -99,8 +99,10 @@ export function useInputRules( props ) {
 		}
 
 		element.addEventListener( 'input', onInput );
+		element.addEventListener( 'compositionend', onInput );
 		return () => {
 			element.removeEventListener( 'input', onInput );
+			element.removeEventListener( 'compositionend', onInput );
 		};
 	}, [] );
 }

packages/block-editor/src/components/use-setting/index.js

@@ -41,7 +41,7 @@ const deprecatedFlags = {
 		}
 
 		if ( settings.enableCustomUnits === true ) {
-			return [ 'px', 'em', 'rem', 'vh', 'vw' ];
+			return [ 'px', 'em', 'rem', 'vh', 'vw', '%' ];
 		}
 
 		return settings.enableCustomUnits;

packages/block-editor/src/components/writing-flow/index.js

@@ -1,9 +1,15 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs } from '@wordpress/compose';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -14,14 +20,7 @@ import useArrowNav from './use-arrow-nav';
 import useSelectAll from './use-select-all';
 import { store as blockEditorStore } from '../../store';
 
-/**
- * Handles selection and navigation across blocks. This component should be
- * wrapped around BlockList.
- *
- * @param {Object}    props          Component properties.
- * @param {WPElement} props.children Children to be rendered.
- */
-export default function WritingFlow( { children } ) {
+function WritingFlow( { children, ...props }, forwardedRef ) {
 	const [ before, ref, after ] = useTabNav();
 	const hasMultiSelection = useSelect(
 		( select ) => select( blockEditorStore ).hasMultiSelection(),
@@ -31,14 +30,19 @@ export default function WritingFlow( { children } ) {
 		<>
 			{ before }
 			<div
+				{ ...props }
 				ref={ useMergeRefs( [
+					forwardedRef,
 					ref,
 					useMultiSelection(),
 					useSelectAll(),
 					useArrowNav(),
 				] ) }
-				className="block-editor-writing-flow"
-				tabIndex={ hasMultiSelection ? '0' : undefined }
+				className={ classNames(
+					props.className,
+					'block-editor-writing-flow'
+				) }
+				tabIndex={ -1 }
 				aria-label={
 					hasMultiSelection
 						? __( 'Multiple selected blocks' )
@@ -51,3 +55,12 @@ export default function WritingFlow( { children } ) {
 		</>
 	);
 }
+
+/**
+ * Handles selection and navigation across blocks. This component should be
+ * wrapped around BlockList.
+ *
+ * @param {Object}    props          Component properties.
+ * @param {WPElement} props.children Children to be rendered.
+ */
+export default forwardRef( WritingFlow );

packages/block-editor/src/components/writing-flow/use-select-all.js

@@ -7,64 +7,66 @@ import { first, last } from 'lodash';
  * WordPress dependencies
  */
 import { isEntirelySelected } from '@wordpress/dom';
-import { useRef, useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useShortcut } from '@wordpress/keyboard-shortcuts';
+import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
+import { useRefEffect } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 
 export default function useSelectAll() {
-	const ref = useRef();
 	const {
 		getBlockOrder,
 		getSelectedBlockClientIds,
 		getBlockRootClientId,
 	} = useSelect( blockEditorStore );
 	const { multiSelect } = useDispatch( blockEditorStore );
+	const isMatch = useShortcutEventMatch();
 
-	const callback = useCallback( ( event ) => {
-		const selectedClientIds = getSelectedBlockClientIds();
+	return useRefEffect( ( node ) => {
+		function onKeyDown( event ) {
+			if ( ! isMatch( 'core/block-editor/select-all', event ) ) {
+				return;
+			}
 
-		if ( ! selectedClientIds.length ) {
-			return;
-		}
+			const selectedClientIds = getSelectedBlockClientIds();
 
-		if (
-			selectedClientIds.length === 1 &&
-			! isEntirelySelected( event.target )
-		) {
-			return;
-		}
+			if (
+				selectedClientIds.length === 1 &&
+				! isEntirelySelected( event.target )
+			) {
+				return;
+			}
 
-		const [ firstSelectedClientId ] = selectedClientIds;
-		const rootClientId = getBlockRootClientId( firstSelectedClientId );
-		let blockClientIds = getBlockOrder( rootClientId );
+			const [ firstSelectedClientId ] = selectedClientIds;
+			const rootClientId = getBlockRootClientId( firstSelectedClientId );
+			let blockClientIds = getBlockOrder( rootClientId );
 
-		// If we have selected all sibling nested blocks, try selecting up a
-		// level. See: https://github.com/WordPress/gutenberg/pull/31859/
-		if ( selectedClientIds.length === blockClientIds.length ) {
-			blockClientIds = getBlockOrder(
-				getBlockRootClientId( rootClientId )
-			);
-		}
+			// If we have selected all sibling nested blocks, try selecting up a
+			// level. See: https://github.com/WordPress/gutenberg/pull/31859/
+			if ( selectedClientIds.length === blockClientIds.length ) {
+				blockClientIds = getBlockOrder(
+					getBlockRootClientId( rootClientId )
+				);
+			}
 
-		const firstClientId = first( blockClientIds );
-		const lastClientId = last( blockClientIds );
+			const firstClientId = first( blockClientIds );
+			const lastClientId = last( blockClientIds );
 
-		if ( firstClientId === lastClientId ) {
-			return;
+			if ( firstClientId === lastClientId ) {
+				return;
+			}
+
+			multiSelect( firstClientId, lastClientId );
+			event.preventDefault();
 		}
 
-		multiSelect( firstClientId, lastClientId );
-		event.preventDefault();
-	}, [] );
+		node.addEventListener( 'keydown', onKeyDown );
 
-	useShortcut( 'core/block-editor/select-all', callback, {
-		target: ref,
+		return () => {
+			node.removeEventListener( 'keydown', onKeyDown );
+		};
 	} );
-
-	return ref;
 }

packages/block-editor/src/components/writing-flow/use-tab-nav.js

@@ -84,6 +84,7 @@ export default function useTabNav() {
 		function onKeyDown( event ) {
 			if ( event.keyCode === ESCAPE && ! hasMultiSelection() ) {
 				event.stopPropagation();
+				event.preventDefault();
 				setNavigationMode( true );
 				return;
 			}
@@ -102,6 +103,13 @@ export default function useTabNav() {
 			const direction = isShift ? 'findPrevious' : 'findNext';
 
 			if ( ! hasMultiSelection() && ! getSelectedBlockClientId() ) {
+				// Preserve the behaviour of entering navigation mode when
+				// tabbing into the content without a block selection.
+				// `onFocusCapture` already did this previously, but we need to
+				// do it again here because after clearing block selection,
+				// focus land on the writing flow container and pressing Tab
+				// will no longer send focus through the focus capture element.
+				if ( event.target === node ) setNavigationMode( true );
 				return;
 			}
 

packages/block-library/src/post-excerpt/block.json

@@ -9,10 +9,6 @@
 		"textAlign": {
 			"type": "string"
 		},
-		"wordCount": {
-			"type": "number",
-			"default": 55
-		},
 		"moreText": {
 			"type": "string"
 		},