@wordpress/block-editor 12.19.3 → 12.20.0

package/build-style/style-rtl.css

@@ -782,7 +782,7 @@ iframe[name=editor-canvas].has-editor-padding {
   outline: none;
 }
 .components-button.block-editor-block-mover-button:focus-visible::before {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 
@@ -957,14 +957,6 @@ iframe[name=editor-canvas].has-editor-padding {
   z-index: 1000001;
 }
 
-.block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
-  padding: 0;
-}
-
-.block-editor-block-styles + .default-style-picker__default-switcher {
-  margin-top: 16px;
-}
-
 .block-editor-block-styles__preview-panel {
   display: none;
   z-index: 90;
@@ -1002,7 +994,7 @@ iframe[name=editor-canvas].has-editor-padding {
   color: #fff;
 }
 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:focus, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:focus {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .block-editor-block-styles__variants .block-editor-block-styles__item-text {
@@ -2005,7 +1997,7 @@ iframe[name=editor-canvas].has-editor-padding {
   box-shadow: none;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
   text-decoration: none;
 }
@@ -3150,7 +3142,7 @@ iframe[name=editor-canvas].has-editor-padding {
 }
 
 .html-anchor-control .components-external-link {
-  display: block;
+  display: inline-block;
   margin-top: 8px;
 }
 
@@ -3521,16 +3513,14 @@ iframe[name=editor-canvas].has-editor-padding {
 }
 .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
   width: auto;
+  position: relative;
 }
 @media (min-width: 600px) {
-  .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
-    position: relative;
-  }
-  .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container::before {
+  .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
     content: "";
     height: 1px;
     width: 100%;
-    background: #1e1e1e;
+    background: #e0e0e0;
     position: absolute;
     top: 50%;
     right: 50%;
@@ -3538,6 +3528,11 @@ iframe[name=editor-canvas].has-editor-padding {
     margin-top: -0.5px;
   }
 }
+@media (min-width: 782px) {
+  .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
+    background: #1e1e1e;
+  }
+}
 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container,
 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
   padding-right: 6px;

package/build-style/style.css

@@ -782,7 +782,7 @@ iframe[name=editor-canvas].has-editor-padding {
   outline: none;
 }
 .components-button.block-editor-block-mover-button:focus-visible::before {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 
@@ -957,14 +957,6 @@ iframe[name=editor-canvas].has-editor-padding {
   z-index: 1000001;
 }
 
-.block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
-  padding: 0;
-}
-
-.block-editor-block-styles + .default-style-picker__default-switcher {
-  margin-top: 16px;
-}
-
 .block-editor-block-styles__preview-panel {
   display: none;
   z-index: 90;
@@ -1002,7 +994,7 @@ iframe[name=editor-canvas].has-editor-padding {
   color: #fff;
 }
 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:focus, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:focus {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .block-editor-block-styles__variants .block-editor-block-styles__item-text {
@@ -2006,7 +1998,7 @@ iframe[name=editor-canvas].has-editor-padding {
   box-shadow: none;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
   text-decoration: none;
 }
@@ -3151,7 +3143,7 @@ iframe[name=editor-canvas].has-editor-padding {
 }
 
 .html-anchor-control .components-external-link {
-  display: block;
+  display: inline-block;
   margin-top: 8px;
 }
 
@@ -3522,16 +3514,14 @@ iframe[name=editor-canvas].has-editor-padding {
 }
 .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
   width: auto;
+  position: relative;
 }
 @media (min-width: 600px) {
-  .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
-    position: relative;
-  }
-  .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container::before {
+  .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
     content: "";
     height: 1px;
     width: 100%;
-    background: #1e1e1e;
+    background: #e0e0e0;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -3539,6 +3529,11 @@ iframe[name=editor-canvas].has-editor-padding {
     margin-top: -0.5px;
   }
 }
+@media (min-width: 782px) {
+  .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
+    background: #1e1e1e;
+  }
+}
 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container,
 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
   padding-left: 6px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.19.3",
+	"version": "12.20.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,41 +35,40 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.51.1",
-		"@wordpress/api-fetch": "^6.48.1",
-		"@wordpress/blob": "^3.51.1",
-		"@wordpress/blocks": "^12.28.3",
-		"@wordpress/commands": "^0.22.2",
-		"@wordpress/components": "^26.0.2",
-		"@wordpress/compose": "^6.28.1",
-		"@wordpress/data": "^9.21.1",
-		"@wordpress/date": "^4.51.1",
-		"@wordpress/deprecated": "^3.51.1",
-		"@wordpress/dom": "^3.51.1",
-		"@wordpress/element": "^5.28.1",
-		"@wordpress/escape-html": "^2.51.1",
-		"@wordpress/hooks": "^3.51.1",
-		"@wordpress/html-entities": "^3.51.1",
-		"@wordpress/i18n": "^4.51.1",
-		"@wordpress/icons": "^9.42.1",
-		"@wordpress/is-shallow-equal": "^4.51.1",
-		"@wordpress/keyboard-shortcuts": "^4.28.1",
-		"@wordpress/keycodes": "^3.51.1",
-		"@wordpress/notices": "^4.19.1",
-		"@wordpress/preferences": "^3.28.2",
-		"@wordpress/private-apis": "^0.33.1",
-		"@wordpress/rich-text": "^6.28.2",
-		"@wordpress/style-engine": "^1.34.1",
-		"@wordpress/token-list": "^2.51.1",
-		"@wordpress/url": "^3.52.1",
-		"@wordpress/warning": "^2.51.1",
-		"@wordpress/wordcount": "^3.51.1",
+		"@wordpress/a11y": "^3.52.0",
+		"@wordpress/api-fetch": "^6.49.0",
+		"@wordpress/blob": "^3.52.0",
+		"@wordpress/blocks": "^12.29.0",
+		"@wordpress/commands": "^0.23.0",
+		"@wordpress/components": "^27.0.0",
+		"@wordpress/compose": "^6.29.0",
+		"@wordpress/data": "^9.22.0",
+		"@wordpress/date": "^4.52.0",
+		"@wordpress/deprecated": "^3.52.0",
+		"@wordpress/dom": "^3.52.0",
+		"@wordpress/element": "^5.29.0",
+		"@wordpress/escape-html": "^2.52.0",
+		"@wordpress/hooks": "^3.52.0",
+		"@wordpress/html-entities": "^3.52.0",
+		"@wordpress/i18n": "^4.52.0",
+		"@wordpress/icons": "^9.43.0",
+		"@wordpress/is-shallow-equal": "^4.52.0",
+		"@wordpress/keyboard-shortcuts": "^4.29.0",
+		"@wordpress/keycodes": "^3.52.0",
+		"@wordpress/notices": "^4.20.0",
+		"@wordpress/preferences": "^3.29.0",
+		"@wordpress/private-apis": "^0.34.0",
+		"@wordpress/rich-text": "^6.29.0",
+		"@wordpress/style-engine": "^1.35.0",
+		"@wordpress/token-list": "^2.52.0",
+		"@wordpress/url": "^3.53.0",
+		"@wordpress/warning": "^2.52.0",
+		"@wordpress/wordcount": "^3.52.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"deepmerge": "^4.3.0",
 		"diff": "^4.0.2",
-		"dom-scroll-into-view": "^1.2.1",
 		"fast-deep-equal": "^3.1.3",
 		"memize": "^2.1.0",
 		"postcss": "^8.4.21",
@@ -87,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b12d75c5c5256fda2a0509bb432e20ddd3354d5e"
+	"gitHead": "c139588f4c668b38bafbc5431f2f4e3903dbe683"
 }

package/src/components/block-canvas/index.js

@@ -14,6 +14,7 @@ import Iframe from '../iframe';
 import WritingFlow from '../writing-flow';
 import { useMouseMoveTypingReset } from '../observe-typing';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
+import { useBlockCommands } from '../use-block-commands';
 
 export function ExperimentalBlockCanvas( {
 	shouldIframe = true,
@@ -23,6 +24,7 @@ export function ExperimentalBlockCanvas( {
 	contentRef: contentRefProp,
 	iframeProps,
 } ) {
+	useBlockCommands();
 	const resetTypingRef = useMouseMoveTypingReset();
 	const clearerRef = useBlockSelectionClearer();
 	const localRef = useRef();

package/src/components/block-heading-level-dropdown/index.js

@@ -46,31 +46,23 @@ export default function HeadingLevelDropdown( {
 			icon={ <HeadingLevelIcon level={ value } /> }
 			label={ __( 'Change level' ) }
 			controls={ options.map( ( targetLevel ) => {
-				{
-					const isActive = targetLevel === value;
-
-					return {
-						icon: (
-							<HeadingLevelIcon
-								level={ targetLevel }
-								isPressed={ isActive }
-							/>
-						),
-						title:
-							targetLevel === 0
-								? __( 'Paragraph' )
-								: sprintf(
-										// translators: %s: heading level e.g: "1", "2", "3"
-										__( 'Heading %d' ),
-										targetLevel
-								  ),
-						isActive,
-						onClick() {
-							onChange( targetLevel );
-						},
-						role: 'menuitemradio',
-					};
-				}
+				const isActive = targetLevel === value;
+				return {
+					icon: <HeadingLevelIcon level={ targetLevel } />,
+					title:
+						targetLevel === 0
+							? __( 'Paragraph' )
+							: sprintf(
+									// translators: %s: heading level e.g: "1", "2", "3"
+									__( 'Heading %d' ),
+									targetLevel
+							  ),
+					isActive,
+					onClick() {
+						onChange( targetLevel );
+					},
+					role: 'menuitemradio',
+				};
 			} ) }
 		/>
 	);

package/src/components/block-inspector/index.js

@@ -5,7 +5,6 @@ import { __ } from '@wordpress/i18n';
 import {
 	getBlockType,
 	getUnregisteredTypeHandlerName,
-	hasBlockSupport,
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { PanelBody, __unstableMotion as motion } from '@wordpress/components';
@@ -21,7 +20,6 @@ import BlockVariationTransforms from '../block-variation-transforms';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 import BlockStyles from '../block-styles';
-import DefaultStylePicker from '../default-style-picker';
 import { default as InspectorControls } from '../inspector-controls';
 import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
 import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
@@ -275,15 +273,6 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 						<div>
 							<PanelBody title={ __( 'Styles' ) }>
 								<BlockStyles clientId={ clientId } />
-								{ hasBlockSupport(
-									blockName,
-									'defaultStylePicker',
-									true
-								) && (
-									<DefaultStylePicker
-										blockName={ blockName }
-									/>
-								) }
 							</PanelBody>
 						</div>
 					) }

package/src/components/block-list/index.js

@@ -46,19 +46,26 @@ const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
 
 function Root( { className, ...settings } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { isOutlineMode, isFocusMode, editorMode } = useSelect(
-		( select ) => {
-			const { getSettings, __unstableGetEditorMode } =
-				select( blockEditorStore );
-			const { outlineMode, focusMode } = getSettings();
-			return {
-				isOutlineMode: outlineMode,
-				isFocusMode: focusMode,
-				editorMode: __unstableGetEditorMode(),
-			};
-		},
-		[]
-	);
+	const {
+		isOutlineMode,
+		isFocusMode,
+		editorMode,
+		temporarilyEditingAsBlocks,
+	} = useSelect( ( select ) => {
+		const {
+			getSettings,
+			__unstableGetEditorMode,
+			__unstableGetTemporarilyEditingAsBlocks,
+		} = select( blockEditorStore );
+		const { outlineMode, focusMode } = getSettings();
+		return {
+			isOutlineMode: outlineMode,
+			isFocusMode: focusMode,
+			editorMode: __unstableGetEditorMode(),
+			temporarilyEditingAsBlocks:
+				__unstableGetTemporarilyEditingAsBlocks(),
+		};
+	}, [] );
 	const registry = useRegistry();
 	const { setBlockVisibility } = useDispatch( blockEditorStore );
 
@@ -115,6 +122,11 @@ function Root( { className, ...settings } ) {
 	return (
 		<IntersectionObserver.Provider value={ intersectionObserver }>
 			<div { ...innerBlocksProps } />
+			{ !! temporarilyEditingAsBlocks && (
+				<StopEditingAsBlocksOnOutsideSelect
+					clientId={ temporarilyEditingAsBlocks }
+				/>
+			) }
 		</IntersectionObserver.Provider>
 	);
 }
@@ -159,43 +171,36 @@ function Items( {
 	// function on every render.
 	const hasAppender = CustomAppender !== false;
 	const hasCustomAppender = !! CustomAppender;
-	const {
-		order,
-		selectedBlocks,
-		visibleBlocks,
-		temporarilyEditingAsBlocks,
-		shouldRenderAppender,
-	} = useSelect(
-		( select ) => {
-			const {
-				getBlockOrder,
-				getSelectedBlockClientId,
-				getSelectedBlockClientIds,
-				__unstableGetVisibleBlocks,
-				__unstableGetTemporarilyEditingAsBlocks,
-				getTemplateLock,
-				getBlockEditingMode,
-				__unstableGetEditorMode,
-			} = select( blockEditorStore );
-			const selectedBlockClientId = getSelectedBlockClientId();
-			return {
-				order: getBlockOrder( rootClientId ),
-				selectedBlocks: getSelectedBlockClientIds(),
-				visibleBlocks: __unstableGetVisibleBlocks(),
-				temporarilyEditingAsBlocks:
-					__unstableGetTemporarilyEditingAsBlocks(),
-				shouldRenderAppender:
-					hasAppender &&
-					( hasCustomAppender
-						? ! getTemplateLock( rootClientId ) &&
-						  getBlockEditingMode( rootClientId ) !== 'disabled' &&
-						  __unstableGetEditorMode() !== 'zoom-out'
-						: rootClientId === selectedBlockClientId ||
-						  ( ! rootClientId && ! selectedBlockClientId ) ),
-			};
-		},
-		[ rootClientId, hasAppender, hasCustomAppender ]
-	);
+	const { order, selectedBlocks, visibleBlocks, shouldRenderAppender } =
+		useSelect(
+			( select ) => {
+				const {
+					getBlockOrder,
+					getSelectedBlockClientId,
+					getSelectedBlockClientIds,
+					__unstableGetVisibleBlocks,
+					getTemplateLock,
+					getBlockEditingMode,
+					__unstableGetEditorMode,
+				} = select( blockEditorStore );
+				const selectedBlockClientId = getSelectedBlockClientId();
+				return {
+					order: getBlockOrder( rootClientId ),
+					selectedBlocks: getSelectedBlockClientIds(),
+					visibleBlocks: __unstableGetVisibleBlocks(),
+					shouldRenderAppender:
+						hasAppender &&
+						( hasCustomAppender
+							? ! getTemplateLock( rootClientId ) &&
+							  getBlockEditingMode( rootClientId ) !==
+									'disabled' &&
+							  __unstableGetEditorMode() !== 'zoom-out'
+							: rootClientId === selectedBlockClientId ||
+							  ( ! rootClientId && ! selectedBlockClientId ) ),
+				};
+			},
+			[ rootClientId, hasAppender, hasCustomAppender ]
+		);
 
 	return (
 		<LayoutProvider value={ layout }>
@@ -216,11 +221,6 @@ function Items( {
 				</AsyncModeProvider>
 			) ) }
 			{ order.length < 1 && placeholder }
-			{ !! temporarilyEditingAsBlocks && (
-				<StopEditingAsBlocksOnOutsideSelect
-					clientId={ temporarilyEditingAsBlocks }
-				/>
-			) }
 			{ shouldRenderAppender && (
 				<BlockListAppender
 					tagName={ __experimentalAppenderTagName }

package/src/components/block-preview/index.js

@@ -54,7 +54,11 @@ export function BlockPreview( {
 		[]
 	);
 	const settings = useMemo(
-		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		() => ( {
+			...originalSettings,
+			focusMode: false, // Disable "Spotlight mode".
+			__unstableIsPreviewMode: true,
+		} ),
 		[ originalSettings ]
 	);
 	const renderedBlocks = useMemo(
@@ -117,6 +121,7 @@ export function useBlockPreview( { blocks, props = {}, layout } ) {
 		() => ( {
 			...originalSettings,
 			styles: undefined, // Clear styles included by the parent settings, as they are already output by the parent's EditorStyles.
+			focusMode: false, // Disable "Spotlight mode".
 			__unstableIsPreviewMode: true,
 		} ),
 		[ originalSettings ]

package/src/components/block-settings-menu/block-parent-selector-menu-item.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { MenuItem } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockParentSelectorMenuItem( {
+	parentClientId,
+	parentBlockType,
+} ) {
+	const isSmallViewport = useViewportMatch( 'medium', '<' );
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	// Allows highlighting the parent block outline when focusing or hovering
+	// the parent block selector within the child.
+	const menuItemRef = useRef();
+	const gesturesProps = useShowHoveredOrFocusedGestures( {
+		ref: menuItemRef,
+		highlightParent: true,
+	} );
+
+	if ( ! isSmallViewport ) {
+		return null;
+	}
+
+	return (
+		<MenuItem
+			{ ...gesturesProps }
+			ref={ menuItemRef }
+			icon={ <BlockIcon icon={ parentBlockType.icon } /> }
+			onClick={ () => selectBlock( parentClientId ) }
+		>
+			{ sprintf(
+				/* translators: %s: Name of the block's parent. */
+				__( 'Select parent block (%s)' ),
+				parentBlockType.title
+			) }
+		</MenuItem>
+	);
+}