Second round of bugfixes for WP 6.3 RC3 (#53210)

* Top toolbar: Fix issues with save button overlap, and plugin buttons (#53101)

* Shorten the width of the top toolbar overlay and make doc title smaller.

* Add a scrim and a margin to handle plugin buttons better.

* Remove block tools back compat component schedule for deprecated in 6.3 (#53115)

* Removes usage of BlockToolsBackCompat

* Remove unwanted BlockTools from Nav sidebar

* Footnotes/RichText: fix getRichTextValues for deeply nested blocks (#53034)

* Defer to preceding handlers in command palette keyboard shortcut (#53001)

* Image block: fix image size at wide and full width (#53184)

* Fix regression with Edit site Navigate regions (#52940)

* Make the navigabel region wrap the inert sidebar.

* Adjust animation.

* Fix not expanding pattern in page editor (#53169)


---------

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>

* Footnotes: fix published preview (#53072)

* Footnotes: fix published preview

* remove var dump

* Fix php lint

* PHP lint

* Address feedback

* Add e2e test

* Footnotes: disable for synced patterns and prevent duplication for pages in site editor (#53003)

* Initial commit:
- Prevent footnote creation withing core/block
- Only insert a footnote if one isn't found in the entity block list

* Try grabbing controlled blocks from parent post content block

* Cache `selectedClientId`
Get hasParentCoreBlocks using separate useSelect call.

* Rename hasParentCoreBlocks to isBlockWithinPattern
Add comments

* Removing while loop since we're already fetching the post content parent in the `getBlockParentsByBlockName` call above

* Reinstating while loop because it can deal with nested blocks

---------

Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>

* Footnotes: add missing _ in revision field filter (#53135)

* Footnotes: add missing _ in revision field filter

* Use correct hook name

* Revert prefixing callback names

* don't display BlockContextualToolbar at all in contentonly locking (#53110)

* Render the footer conditionally in the global styles sidebar component so that any side effects from the footer wrapper are not rendered, e.g., styles and what not (#53204)

Ensure that the precise bottom margin persists if the footer isn't rendered

* Pattern: Add getBlockRootClientId call (#53206)

---------

Co-authored-by: Joen A <1204802+jasmussen@users.noreply.github.com>
Co-authored-by: Dave Smith <getdavemail@gmail.com>
Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com>
Co-authored-by: Mitchell Austin <mr.fye@oneandthesame.net>
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Co-authored-by: Andrea Fercia <a.fercia@gmail.com>
Co-authored-by: Kai Hao <kevin830726@gmail.com>
Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Co-authored-by: Andrei Draganescu <me@andreidraganescu.info>

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

@@ -33,7 +33,6 @@ import { useInBetweenInserter } from './use-in-between-inserter';
 import { store as blockEditorStore } from '../../store';
 import { usePreParsePatterns } from '../../utils/pre-parse-patterns';
 import { LayoutProvider, defaultLayout } from './layout';
-import BlockToolsBackCompat from '../block-tools/back-compat';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useInnerBlocksProps } from '../inner-blocks';
 import {
@@ -127,11 +126,9 @@ function Root( { className, ...settings } ) {
 export default function BlockList( settings ) {
 	usePreParsePatterns();
 	return (
-		<BlockToolsBackCompat>
-			<BlockEditContextProvider value={ DEFAULT_BLOCK_EDIT_CONTEXT }>
-				<Root { ...settings } />
-			</BlockEditContextProvider>
-		</BlockToolsBackCompat>
+		<BlockEditContextProvider value={ DEFAULT_BLOCK_EDIT_CONTEXT }>
+			<Root { ...settings } />
+		</BlockEditContextProvider>
 	);
 }
 

packages/block-editor/src/components/block-tools/block-contextual-toolbar.js

@@ -32,48 +32,56 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	const toolbarButtonRef = useRef();
 
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { blockType, hasParents, showParentSelector, selectedBlockClientId } =
-		useSelect( ( select ) => {
-			const {
-				getBlockName,
-				getBlockParents,
-				getSelectedBlockClientIds,
-				getBlockEditingMode,
-			} = unlock( select( blockEditorStore ) );
-			const { getBlockType } = select( blocksStore );
-			const selectedBlockClientIds = getSelectedBlockClientIds();
-			const _selectedBlockClientId = selectedBlockClientIds[ 0 ];
-			const parents = getBlockParents( _selectedBlockClientId );
-			const firstParentClientId = parents[ parents.length - 1 ];
-			const parentBlockName = getBlockName( firstParentClientId );
-			const parentBlockType = getBlockType( parentBlockName );
+	const {
+		blockType,
+		hasParents,
+		showParentSelector,
+		selectedBlockClientId,
+		isContentOnly,
+	} = useSelect( ( select ) => {
+		const {
+			getBlockName,
+			getBlockParents,
+			getSelectedBlockClientIds,
+			getBlockEditingMode,
+		} = unlock( select( blockEditorStore ) );
+		const { getBlockType } = select( blocksStore );
+		const selectedBlockClientIds = getSelectedBlockClientIds();
+		const _selectedBlockClientId = selectedBlockClientIds[ 0 ];
+		const parents = getBlockParents( _selectedBlockClientId );
+		const firstParentClientId = parents[ parents.length - 1 ];
+		const parentBlockName = getBlockName( firstParentClientId );
+		const parentBlockType = getBlockType( parentBlockName );
 
-			return {
-				selectedBlockClientId: _selectedBlockClientId,
-				blockType:
-					_selectedBlockClientId &&
-					getBlockType( getBlockName( _selectedBlockClientId ) ),
-				hasParents: parents.length,
-				showParentSelector:
-					parentBlockType &&
-					getBlockEditingMode( firstParentClientId ) === 'default' &&
-					hasBlockSupport(
-						parentBlockType,
-						'__experimentalParentSelector',
-						true
-					) &&
-					selectedBlockClientIds.length <= 1 &&
-					getBlockEditingMode( _selectedBlockClientId ) === 'default',
-			};
-		}, [] );
+		return {
+			selectedBlockClientId: _selectedBlockClientId,
+			blockType:
+				_selectedBlockClientId &&
+				getBlockType( getBlockName( _selectedBlockClientId ) ),
+			hasParents: parents.length,
+			isContentOnly:
+				getBlockEditingMode( _selectedBlockClientId ) === 'contentOnly',
+			showParentSelector:
+				parentBlockType &&
+				getBlockEditingMode( firstParentClientId ) === 'default' &&
+				hasBlockSupport(
+					parentBlockType,
+					'__experimentalParentSelector',
+					true
+				) &&
+				selectedBlockClientIds.length <= 1 &&
+				getBlockEditingMode( _selectedBlockClientId ) === 'default',
+		};
+	}, [] );
 
 	useEffect( () => {
 		setIsCollapsed( false );
 	}, [ selectedBlockClientId ] );
 
 	if (
-		blockType &&
-		! hasBlockSupport( blockType, '__experimentalToolbar', true )
+		isContentOnly ||
+		( blockType &&
+			! hasBlockSupport( blockType, '__experimentalToolbar', true ) )
 	) {
 		return null;
 	}

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

@@ -125,9 +125,18 @@
 		display: none;
 	}
 
+	// Add a scrim to the right of the collapsed button.
+	&.is-collapsed::after {
+		content: "";
+		position: absolute;
+		left: 100%;
+		width: $grid-unit-60;
+		height: 100%;
+		background: linear-gradient(to right, $white, transparent);
+	}
+
 	// on desktop and tablet viewports the toolbar is fixed
 	// on top of interface header
-
 	@include break-medium() {
 		&.is-fixed {
 
@@ -308,7 +317,7 @@
 		}
 	}
 
-	// on tablet vewports the toolbar is fixed
+	// on tablet viewports the toolbar is fixed
 	// on top of interface header and covers the whole header
 	// except for the inserter on the left
 	@include break-medium() {
@@ -328,7 +337,7 @@
 			// in full screen mode we need to account for
 			// the combined with of the tools at the right of the header and the margin left
 			// of the toolbar which includes four buttons
-			width: calc(100% - 240px - #{4 * $grid-unit-80});
+			width: calc(100% - 280px - #{4 * $grid-unit-80});
 		}
 	}
 }

packages/block-editor/src/components/inserter-list-item/index.js

@@ -49,7 +49,9 @@ function InserterListItem( {
 		];
 	}, [ item.name, item.initialAttributes, item.initialAttributes ] );
 
-	const isSynced = isReusableBlock( item ) || isTemplatePart( item );
+	const isSynced =
+		( isReusableBlock( item ) && item.syncStatus !== 'unsynced' ) ||
+		isTemplatePart( item );
 
 	return (
 		<InserterDraggableBlocks

packages/block-editor/src/components/inserter/hooks/use-block-types-state.js

@@ -5,6 +5,7 @@ import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
 	store as blocksStore,
+	parse,
 } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
@@ -37,12 +38,20 @@ const useBlockTypesState = ( rootClientId, onInsert ) => {
 	);
 
 	const onSelectItem = useCallback(
-		( { name, initialAttributes, innerBlocks }, shouldFocusBlock ) => {
-			const insertedBlock = createBlock(
-				name,
-				initialAttributes,
-				createBlocksFromInnerBlocksTemplate( innerBlocks )
-			);
+		(
+			{ name, initialAttributes, innerBlocks, syncStatus, content },
+			shouldFocusBlock
+		) => {
+			const insertedBlock =
+				syncStatus === 'unsynced'
+					? parse( content, {
+							__unstableSkipMigrationLogs: true,
+					  } )
+					: createBlock(
+							name,
+							initialAttributes,
+							createBlocksFromInnerBlocksTemplate( innerBlocks )
+					  );
 
 			onInsert( insertedBlock, undefined, shouldFocusBlock );
 		},

packages/block-editor/src/components/rich-text/get-rich-text-values.js

@@ -18,13 +18,13 @@ import { Content } from './content';
  * except that it does not render the elements to a string, but instead collects
  * the values of all rich text `Content` elements.
  */
-function addValuesForElement( element, ...args ) {
+function addValuesForElement( element, values, innerBlocks ) {
 	if ( null === element || undefined === element || false === element ) {
 		return;
 	}
 
 	if ( Array.isArray( element ) ) {
-		return addValuesForElements( element, ...args );
+		return addValuesForElements( element, values, innerBlocks );
 	}
 
 	switch ( typeof element ) {
@@ -38,35 +38,32 @@ function addValuesForElement( element, ...args ) {
 	switch ( type ) {
 		case StrictMode:
 		case Fragment:
-			return addValuesForElements( props.children, ...args );
+			return addValuesForElements( props.children, values, innerBlocks );
 		case RawHTML:
 			return;
 		case InnerBlocks.Content:
-			return addValuesForBlocks( ...args );
+			return addValuesForBlocks( values, innerBlocks );
 		case Content:
-			const [ values ] = args;
 			values.push( props.value );
 			return;
 	}
 
 	switch ( typeof type ) {
 		case 'string':
 			if ( typeof props.children !== 'undefined' ) {
-				return addValuesForElements( props.children, ...args );
+				return addValuesForElements(
+					props.children,
+					values,
+					innerBlocks
+				);
 			}
 			return;
 		case 'function':
-			if (
-				type.prototype &&
-				typeof type.prototype.render === 'function'
-			) {
-				return addValuesForElement(
-					new type( props ).render(),
-					...args
-				);
-			}
-
-			return addValuesForElement( type( props ), ...args );
+			const el =
+				type.prototype && typeof type.prototype.render === 'function'
+					? new type( props ).render()
+					: type( props );
+			return addValuesForElement( el, values, innerBlocks );
 	}
 }
 
@@ -78,20 +75,17 @@ function addValuesForElements( children, ...args ) {
 	}
 }
 
-function _getSaveElement( name, attributes, innerBlocks ) {
-	return getSaveElement(
-		name,
-		attributes,
-		innerBlocks.map( ( block ) =>
-			_getSaveElement( block.name, block.attributes, block.innerBlocks )
-		)
-	);
-}
-
 function addValuesForBlocks( values, blocks ) {
 	for ( let i = 0; i < blocks.length; i++ ) {
 		const { name, attributes, innerBlocks } = blocks[ i ];
-		const saveElement = _getSaveElement( name, attributes, innerBlocks );
+		const saveElement = getSaveElement(
+			name,
+			attributes,
+			// Instead of letting save elements use `useInnerBlocksProps.save`,
+			// force them to use InnerBlocks.Content instead so we can intercept
+			// a single component.
+			<InnerBlocks.Content />
+		);
 		addValuesForElement( saveElement, values, innerBlocks );
 	}
 }

packages/block-library/src/footnotes/format.js

@@ -26,6 +26,10 @@ import { unlock } from '../lock-unlock';
 const { usesContextKey } = unlock( privateApis );
 
 export const formatName = 'core/footnote';
+
+const POST_CONTENT_BLOCK_NAME = 'core/post-content';
+const SYNCED_PATTERN_BLOCK_NAME = 'core/block';
+
 export const format = {
 	title: __( 'Footnote' ),
 	tagName: 'sup',
@@ -44,13 +48,30 @@ export const format = {
 		const registry = useRegistry();
 		const {
 			getSelectedBlockClientId,
+			getBlocks,
 			getBlockRootClientId,
 			getBlockName,
-			getBlocks,
+			getBlockParentsByBlockName,
 		} = useSelect( blockEditorStore );
 		const footnotesBlockType = useSelect( ( select ) =>
 			select( blocksStore ).getBlockType( name )
 		);
+		/*
+		 * This useSelect exists because we need to use its return value
+		 * outside the event callback.
+		 */
+		const isBlockWithinPattern = useSelect( ( select ) => {
+			const {
+				getBlockParentsByBlockName: _getBlockParentsByBlockName,
+				getSelectedBlockClientId: _getSelectedBlockClientId,
+			} = select( blockEditorStore );
+			const parentCoreBlocks = _getBlockParentsByBlockName(
+				_getSelectedBlockClientId(),
+				SYNCED_PATTERN_BLOCK_NAME
+			);
+			return parentCoreBlocks && parentCoreBlocks.length > 0;
+		}, [] );
+
 		const { selectionChange, insertBlock } =
 			useDispatch( blockEditorStore );
 
@@ -62,6 +83,11 @@ export const format = {
 			return null;
 		}
 
+		// Checks if the selected block lives within a pattern.
+		if ( isBlockWithinPattern ) {
+			return null;
+		}
+
 		function onClick() {
 			registry.batch( () => {
 				let id;
@@ -86,10 +112,27 @@ export const format = {
 					onChange( newValue );
 				}
 
+				const selectedClientId = getSelectedBlockClientId();
+
+				/*
+				 * Attempts to find a common parent post content block.
+				 * This allows for locating blocks within a page edited in the site editor.
+				 */
+				const parentPostContent = getBlockParentsByBlockName(
+					selectedClientId,
+					POST_CONTENT_BLOCK_NAME
+				);
+
+				// When called with a post content block, getBlocks will return
+				// the block with controlled inner blocks included.
+				const blocks = parentPostContent.length
+					? getBlocks( parentPostContent[ 0 ] )
+					: getBlocks();
+
 				// BFS search to find the first footnote block.
 				let fnBlock = null;
 				{
-					const queue = [ ...getBlocks() ];
+					const queue = [ ...blocks ];
 					while ( queue.length ) {
 						const block = queue.shift();
 						if ( block.name === name ) {
@@ -104,12 +147,11 @@ export const format = {
 				// When there is no footnotes block in the post, create one and
 				// insert it at the bottom.
 				if ( ! fnBlock ) {
-					const clientId = getSelectedBlockClientId();
-					let rootClientId = getBlockRootClientId( clientId );
+					let rootClientId = getBlockRootClientId( selectedClientId );
 
 					while (
 						rootClientId &&
-						getBlockName( rootClientId ) !== 'core/post-content'
+						getBlockName( rootClientId ) !== POST_CONTENT_BLOCK_NAME
 					) {
 						rootClientId = getBlockRootClientId( rootClientId );
 					}