Add latest bugfixes from 16.1 RC2

docs/reference-guides/core-blocks.md

@@ -340,7 +340,7 @@ Insert an image to make a visual statement. ([Source](https://github.com/WordPre
 -	**Name:** core/image
 -	**Category:** media
 -	**Supports:** anchor, behaviors (lightbox), color (~~background~~, ~~text~~), filter (duotone)
--	**Attributes:** align, alt, caption, height, href, id, linkClass, linkDestination, linkTarget, rel, sizeSlug, title, url, width
+-	**Attributes:** align, alt, aspectRatio, caption, height, href, id, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width
 
 ## Latest Comments
 

lib/compat/wordpress-6.3/blocks.php

@@ -47,6 +47,7 @@ function gutenberg_rename_reusable_block_cpt_to_pattern( $args, $post_type ) {
 		$args['labels']['new_item']                 = __( 'New Pattern' );
 		$args['labels']['edit_item']                = __( 'Edit Pattern' );
 		$args['labels']['view_item']                = __( 'View Pattern' );
+		$args['labels']['view_items']               = __( 'View Patterns' );
 		$args['labels']['all_items']                = __( 'All Patterns' );
 		$args['labels']['search_items']             = __( 'Search Patterns' );
 		$args['labels']['not_found']                = __( 'No Patterns found.' );

packages/base-styles/_variables.scss

@@ -48,7 +48,7 @@ $icon-size: 24px;
 $button-size: 36px;
 $button-size-next-default-40px: 40px; // transitionary variable for next default button size
 $button-size-small: 24px;
-$button-size-small-next-default-32px: 32px; // transitionary variable for next small button size
+$button-size-compact: 32px;
 $header-height: 60px;
 $panel-header-height: $grid-unit-60;
 $nav-sidebar-width: 360px;

packages/base-styles/_z-index.scss

@@ -182,6 +182,7 @@ $z-layers: (
 	".customize-widgets__block-toolbar": 7,
 
 	// Site editor layout
+	".edit-site-layout__header-container": 4,
 	".edit-site-layout__hub": 3,
 	".edit-site-layout__header": 2,
 	".edit-site-page-header": 2,

packages/block-editor/README.md

@@ -711,6 +711,7 @@ _Properties_
 -   _maxWidth_ `number`: Max width to constraint resizing
 -   _allowedBlockTypes_ `boolean|Array`: Allowed block types
 -   _hasFixedToolbar_ `boolean`: Whether or not the editor toolbar is fixed
+-   _distractionFree_ `boolean`: Whether or not the editor UI is distraction free
 -   _focusMode_ `boolean`: Whether the focus mode is enabled or not
 -   _styles_ `Array`: Editor Styles
 -   _keepCaretInsideBlock_ `boolean`: Whether caret should move between blocks in edit mode

packages/block-editor/package.json

@@ -32,6 +32,7 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
+		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/api-fetch": "file:../api-fetch",

packages/block-editor/src/components/alignment-control/test/__snapshots__/index.js.snap

@@ -25,7 +25,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
+            d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
           />
         </svg>
       </button>
@@ -48,7 +48,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
+            d="M7.5 5.5h9V4h-9v1.5Zm-3.5 7h16V11H4v1.5Zm3.5 7h9V18h-9v1.5Z"
           />
         </svg>
       </button>
@@ -80,7 +80,7 @@ exports[`AlignmentUI should match snapshot when controls are hidden 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
+          d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
         />
       </svg>
     </button>
@@ -113,7 +113,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
+            d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
           />
         </svg>
       </button>
@@ -136,7 +136,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
+            d="M7.5 5.5h9V4h-9v1.5Zm-3.5 7h16V11H4v1.5Zm3.5 7h9V18h-9v1.5Z"
           />
         </svg>
       </button>
@@ -159,7 +159,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M11.1 19.8H20v-1.5h-8.9v1.5zm0-15.6v1.5H20V4.2h-8.9zM4 12.8h16v-1.5H4v1.5z"
+            d="M11.111 5.5H20V4h-8.889v1.5ZM4 12.5h16V11H4v1.5Zm7.111 7H20V18h-8.889v1.5Z"
           />
         </svg>
       </button>

packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap

@@ -23,7 +23,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are hidden 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M4 9v6h14V9H4zm8-4.8H4v1.5h8V4.2zM4 19.8h8v-1.5H4v1.5z"
+          d="M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z"
         />
       </svg>
     </button>
@@ -55,7 +55,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M5 15h14V9H5v6zm0 4.8h14v-1.5H5v1.5zM5 4.2v1.5h14V4.2H5z"
+            d="M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM5 9h14v6H5V9Z"
           />
         </svg>
       </button>
@@ -77,7 +77,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M4 9v6h14V9H4zm8-4.8H4v1.5h8V4.2zM4 19.8h8v-1.5H4v1.5z"
+            d="M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z"
           />
         </svg>
       </button>
@@ -99,7 +99,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M7 9v6h10V9H7zM5 19.8h14v-1.5H5v1.5zM5 4.3v1.5h14V4.3H5z"
+            d="M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM7 9h10v6H7V9Z"
           />
         </svg>
       </button>
@@ -121,7 +121,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M6 15h14V9H6v6zm6-10.8v1.5h8V4.2h-8zm0 15.6h8v-1.5h-8v1.5z"
+            d="M19 5.5h-8V4h8v1.5ZM19 20h-8v-1.5h8V20ZM5 9h14v6H5V9Z"
           />
         </svg>
       </button>

packages/block-editor/src/components/block-lock/toolbar.js

@@ -3,7 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { useReducer } from '@wordpress/element';
+import { focus } from '@wordpress/dom';
+import { useReducer, useRef, useEffect } from '@wordpress/element';
 import { lock } from '@wordpress/icons';
 
 /**
@@ -12,19 +13,45 @@ import { lock } from '@wordpress/icons';
 import BlockLockModal from './modal';
 import useBlockLock from './use-block-lock';
 
-export default function BlockLockToolbar( { clientId } ) {
+export default function BlockLockToolbar( { clientId, wrapperRef } ) {
 	const { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );
 
 	const [ isModalOpen, toggleModal ] = useReducer(
 		( isActive ) => ! isActive,
 		false
 	);
 
-	if ( ! canLock ) {
-		return null;
-	}
+	const lockButtonRef = useRef( null );
+	const isFirstRender = useRef( true );
+
+	const shouldHideBlockLockUI =
+		! canLock || ( canEdit && canMove && canRemove );
+
+	// Restore focus manually on the first focusable element in the toolbar
+	// when the block lock modal is closed and the block is not locked anymore.
+	// See https://github.com/WordPress/gutenberg/issues/51447
+	useEffect( () => {
+		if ( isFirstRender.current ) {
+			isFirstRender.current = false;
+			return;
+		}
+
+		if ( ! isModalOpen && shouldHideBlockLockUI ) {
+			focus.focusable
+				.find( wrapperRef.current, {
+					sequential: false,
+				} )
+				.find(
+					( element ) =>
+						element.tagName === 'BUTTON' &&
+						element !== lockButtonRef.current
+				)
+				?.focus();
+		}
+		// wrapperRef is a reference object and should be stable
+	}, [ isModalOpen, shouldHideBlockLockUI, wrapperRef ] );
 
-	if ( canEdit && canMove && canRemove ) {
+	if ( shouldHideBlockLockUI ) {
 		return null;
 	}
 
@@ -35,6 +62,7 @@ export default function BlockLockToolbar( { clientId } ) {
 					icon={ lock }
 					label={ __( 'Unlock' ) }
 					onClick={ toggleModal }
+					ref={ lockButtonRef }
 				/>
 			</ToolbarGroup>
 			{ isModalOpen && (

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

@@ -78,6 +78,8 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		};
 	}, [] );
 
+	const toolbarWrapperRef = useRef( null );
+
 	// Handles highlighting the current block outline on hover or focus of the
 	// block type toolbar area.
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
@@ -123,27 +125,28 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 	} );
 
 	return (
-		<div className={ classes }>
+		<div className={ classes } ref={ toolbarWrapperRef }>
 			{ ! isMultiToolbar &&
 				isLargeViewport &&
 				blockEditingMode === 'default' && <BlockParentSelector /> }
-			<div ref={ nodeRef } { ...showMoversGestures }>
-				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
-					blockEditingMode === 'default' && (
+			{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
+				blockEditingMode === 'default' && (
+					<div ref={ nodeRef } { ...showMoversGestures }>
 						<ToolbarGroup className="block-editor-block-toolbar__block-controls">
 							<BlockSwitcher clientIds={ blockClientIds } />
 							{ ! isMultiToolbar && (
 								<BlockLockToolbar
 									clientId={ blockClientIds[ 0 ] }
+									wrapperRef={ toolbarWrapperRef }
 								/>
 							) }
 							<BlockMover
 								clientIds={ blockClientIds }
 								hideDragHandle={ hideDragHandle }
 							/>
 						</ToolbarGroup>
-					) }
-			</div>
+					</div>
+				) }
 			{ shouldShowVisualToolbar && isMultiToolbar && (
 				<BlockGroupToolbar />
 			) }

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

@@ -121,6 +121,10 @@
 		}
 	}
 
+	&:has(.block-editor-block-toolbar:empty) {
+		display: none;
+	}
+
 	// on desktop and tablet viewports the toolbar is fixed
 	// on top of interface header
 

packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js

@@ -0,0 +1,124 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	SelectControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
+ */
+
+/**
+ * @type {SelectControlProps[]}
+ */
+export const DEFAULT_ASPECT_RATIO_OPTIONS = [
+	{
+		label: _x( 'Original', 'Aspect ratio option for dimensions control' ),
+		value: 'auto',
+	},
+	{
+		label: _x(
+			'Square - 1:1',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '1',
+	},
+	{
+		label: _x(
+			'Standard - 4:3',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '4/3',
+	},
+	{
+		label: _x(
+			'Portrait - 3:4',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '3/4',
+	},
+	{
+		label: _x(
+			'Classic - 3:2',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '3/2',
+	},
+	{
+		label: _x(
+			'Classic Portrait - 2:3',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '2/3',
+	},
+	{
+		label: _x(
+			'Wide - 16:9',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '16/9',
+	},
+	{
+		label: _x(
+			'Tall - 9:16',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '9/16',
+	},
+	{
+		label: _x( 'Custom', 'Aspect ratio option for dimensions control' ),
+		value: 'custom',
+		disabled: true,
+		hidden: true,
+	},
+];
+
+/**
+ * @callback AspectRatioToolPropsOnChange
+ * @param {string} [value] New aspect ratio value.
+ * @return {void} No return.
+ */
+
+/**
+ * @typedef {Object} AspectRatioToolProps
+ * @property {string}                       [panelId]          ID of the panel this tool is associated with.
+ * @property {string}                       [value]            Current aspect ratio value.
+ * @property {AspectRatioToolPropsOnChange} [onChange]         Callback to update the aspect ratio value.
+ * @property {SelectControlProps[]}         [options]          Aspect ratio options.
+ * @property {string}                       [defaultValue]     Default aspect ratio value.
+ * @property {boolean}                      [isShownByDefault] Whether the tool is shown by default.
+ */
+
+export default function AspectRatioTool( {
+	panelId,
+	value,
+	onChange = () => {},
+	options = DEFAULT_ASPECT_RATIO_OPTIONS,
+	defaultValue = DEFAULT_ASPECT_RATIO_OPTIONS[ 0 ].value,
+	isShownByDefault = true,
+} ) {
+	// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
+	const displayValue = value ?? 'auto';
+
+	return (
+		<ToolsPanelItem
+			hasValue={ () => displayValue !== defaultValue }
+			label={ __( 'Aspect ratio' ) }
+			onDeselect={ () => onChange( undefined ) }
+			isShownByDefault={ isShownByDefault }
+			panelId={ panelId }
+		>
+			<SelectControl
+				label={ __( 'Aspect ratio' ) }
+				value={ displayValue }
+				options={ options }
+				onChange={ onChange }
+				size={ '__unstable-large' }
+				__nextHasNoMarginBottom
+			/>
+		</ToolsPanelItem>
+	);
+}