@wordpress/block-editor 12.21.0 → 12.23.0

package/build-style/style.css

@@ -126,15 +126,15 @@
 .block-editor-block-bindings-toolbar-indicator {
   display: inline-flex;
   align-items: center;
-  height: 48px;
+  justify-content: center;
   padding: 6px;
 }
-.block-editor-block-bindings-toolbar-indicator svg g {
-  stroke: var(--wp-bound-block-color);
-  fill: transparent;
-  stroke-width: 1.5;
-  stroke-linecap: round;
-  stroke-linejoin: round;
+.block-editor-block-bindings-toolbar-indicator svg {
+  fill: var(--wp-bound-block-color);
+}
+
+.edit-post-header__toolbar .selected-block-tools-wrapper .block-editor-block-toolbar .block-editor-block-bindings-toolbar-indicator {
+  height: 32px;
 }
 
 iframe[name=editor-canvas] {
@@ -968,6 +968,20 @@ iframe[name=editor-canvas].has-editor-padding {
   z-index: 1;
 }
 
+.interface-interface-skeleton__sidebar .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
+}
+.interface-interface-skeleton__sidebar .block-editor-block-patterns-list__list-item:hover .block-editor-block-preview__container {
+  box-shadow: 0 0 0 2px #1e1e1e;
+}
+
+.editor-inserter-sidebar .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
+  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.07);
+}
+.editor-inserter-sidebar .block-editor-block-patterns-list__list-item:hover .block-editor-block-preview__container {
+  box-shadow: 0 0 0 2px #1e1e1e, 0 15px 25px rgba(0, 0, 0, 0.07);
+}
+
 .block-editor-block-rename-modal {
   z-index: 1000001;
 }
@@ -1612,6 +1626,70 @@ iframe[name=editor-canvas].has-editor-padding {
   direction: ltr;
 }
 
+.block-editor-global-styles-background-panel__inspector-media-replace-container {
+  position: relative;
+}
+.block-editor-global-styles-background-panel__inspector-media-replace-container .components-drop-zone__content-icon {
+  display: none;
+}
+.block-editor-global-styles-background-panel__inspector-media-replace-container button.components-button {
+  color: #1e1e1e;
+  box-shadow: inset 0 0 0 1px #ddd;
+  width: 100%;
+  display: block;
+  height: 40px;
+}
+.block-editor-global-styles-background-panel__inspector-media-replace-container button.components-button:hover {
+  color: var(--wp-admin-theme-color);
+}
+.block-editor-global-styles-background-panel__inspector-media-replace-container button.components-button:focus {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__inspector-media-replace-title {
+  word-break: break-all;
+  white-space: normal;
+  text-align: start;
+  text-align-last: center;
+}
+.block-editor-global-styles-background-panel__inspector-media-replace-container .components-dropdown {
+  display: block;
+}
+
+.block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
+  background: #fff linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+  border-radius: 50% !important;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  display: block;
+  width: 20px;
+  height: 20px;
+  flex: none;
+}
+.block-editor-global-styles-background-panel__inspector-image-indicator-wrapper.has-image {
+  background: #fff;
+}
+
+.block-editor-global-styles-background-panel__inspector-image-indicator {
+  background-size: cover;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: block;
+  position: relative;
+}
+
+.block-editor-global-styles-background-panel__inspector-image-indicator::after {
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  bottom: -1px;
+  right: -1px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  border: 1px solid transparent;
+  box-sizing: inherit;
+}
+
 .block-editor-grid-visualizer {
   z-index: 30 !important;
 }
@@ -1935,10 +2013,6 @@ iframe[name=editor-canvas].has-editor-padding {
   right: 19px;
   top: 3px;
 }
-.block-editor-link-control__search-enter svg {
-  position: relative;
-  top: -2px;
-}
 
 .block-editor-link-control__search-actions {
   padding: 8px 16px 16px;
@@ -2362,7 +2436,7 @@ iframe[name=editor-canvas].has-editor-padding {
 }
 .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
   transition: transform 0.2s;
-  transform: translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+  transform: translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) * 			-1));
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
@@ -2381,7 +2455,7 @@ iframe[name=editor-canvas].has-editor-padding {
   align-items: center;
   width: 100%;
   height: auto;
-  padding: 6px 4px 6px 0;
+  padding: 6px 6px 6px 0;
   text-align: left;
   border-radius: 2px;
   position: relative;
@@ -2472,7 +2546,7 @@ iframe[name=editor-canvas].has-editor-padding {
   padding: 0;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell {
-  padding-right: 4px;
+  padding-right: 6px;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell .components-button.has-icon {
   height: 24px;
@@ -2709,14 +2783,6 @@ iframe[name=editor-canvas].has-editor-padding {
   display: none;
 }
 
-.block-editor-list-view-block-select-button__bindings svg g {
-  stroke: var(--wp-bound-block-color);
-  fill: transparent;
-  stroke-width: 1.5;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
 .modal-open .block-editor-media-replace-flow__options {
   display: none;
 }
@@ -3221,11 +3287,6 @@ iframe[name=editor-canvas].has-editor-padding {
   font-size: 12px;
 }
 
-.html-anchor-control .components-external-link {
-  display: inline-block;
-  margin-top: 8px;
-}
-
 .block-editor-hooks__block-hooks {
   /**
    * Since we're displaying the block icon alongside the block name,
@@ -3247,70 +3308,6 @@ iframe[name=editor-canvas].has-editor-padding {
   margin-bottom: 16px;
 }
 
-.block-editor-hooks__background__inspector-media-replace-container {
-  position: relative;
-}
-.block-editor-hooks__background__inspector-media-replace-container .components-drop-zone__content-icon {
-  display: none;
-}
-.block-editor-hooks__background__inspector-media-replace-container button.components-button {
-  color: #1e1e1e;
-  box-shadow: inset 0 0 0 1px #ddd;
-  width: 100%;
-  display: block;
-  height: 40px;
-}
-.block-editor-hooks__background__inspector-media-replace-container button.components-button:hover {
-  color: var(--wp-admin-theme-color);
-}
-.block-editor-hooks__background__inspector-media-replace-container button.components-button:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-.block-editor-hooks__background__inspector-media-replace-container .block-editor-hooks__background__inspector-media-replace-title {
-  word-break: break-all;
-  white-space: normal;
-  text-align: start;
-  text-align-last: center;
-}
-.block-editor-hooks__background__inspector-media-replace-container .components-dropdown {
-  display: block;
-}
-
-.block-editor-hooks__background__inspector-image-indicator-wrapper {
-  background: #fff linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
-  border-radius: 50% !important;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
-  display: block;
-  width: 20px;
-  height: 20px;
-  flex: none;
-}
-.block-editor-hooks__background__inspector-image-indicator-wrapper.has-image {
-  background: #fff;
-}
-
-.block-editor-hooks__background__inspector-image-indicator {
-  background-size: cover;
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  display: block;
-  position: relative;
-}
-
-.block-editor-hooks__background__inspector-image-indicator::after {
-  content: "";
-  position: absolute;
-  top: -1px;
-  left: -1px;
-  bottom: -1px;
-  right: -1px;
-  border-radius: 50%;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
-  border: 1px solid transparent;
-  box-sizing: inherit;
-}
-
 .border-block-support-panel .single-column {
   grid-column: span 1;
 }
@@ -3669,7 +3666,6 @@ iframe[name=editor-canvas].has-editor-padding {
   flex-direction: column;
   height: 100%;
   gap: 16px;
-  overflow-y: hidden;
 }
 .block-editor-inserter__main-area.show-as-tabs {
   gap: 0;
@@ -3781,6 +3777,7 @@ iframe[name=editor-canvas].has-editor-padding {
 .block-editor-inserter__no-tab-container {
   overflow-y: auto;
   flex-grow: 1;
+  position: relative;
 }
 
 .block-editor-inserter__panel-header {
@@ -3948,13 +3945,6 @@ iframe[name=editor-canvas].has-editor-padding {
   padding: 16px 24px;
 }
 
-.block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
-  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.07);
-}
-.block-editor-block-patterns-list__list-item:hover .block-editor-block-preview__container {
-  box-shadow: 0 0 0 2px #1e1e1e, 0 15px 25px rgba(0, 0, 0, 0.07);
-}
-
 .block-editor-inserter__patterns-category-panel {
   padding: 0 16px;
   display: flex;
@@ -4337,6 +4327,9 @@ iframe[name=editor-canvas].has-editor-padding {
 .is-zoom-out .block-editor-inserter__patterns-category-dialog {
   position: static;
 }
+.is-zoom-out .block-editor-inserter__media-dialog {
+  position: static;
+}
 
 .spacing-sizes-control .spacing-sizes-control__custom-value-input,
 .spacing-sizes-control .spacing-sizes-control__label {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.21.0",
+	"version": "12.23.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,35 +35,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.53.0",
-		"@wordpress/api-fetch": "^6.50.0",
-		"@wordpress/blob": "^3.53.0",
-		"@wordpress/blocks": "^12.30.0",
-		"@wordpress/commands": "^0.24.0",
-		"@wordpress/components": "^27.1.0",
-		"@wordpress/compose": "^6.30.0",
-		"@wordpress/data": "^9.23.0",
-		"@wordpress/date": "^4.53.0",
-		"@wordpress/deprecated": "^3.53.0",
-		"@wordpress/dom": "^3.53.0",
-		"@wordpress/element": "^5.30.0",
-		"@wordpress/escape-html": "^2.53.0",
-		"@wordpress/hooks": "^3.53.0",
-		"@wordpress/html-entities": "^3.53.0",
-		"@wordpress/i18n": "^4.53.0",
-		"@wordpress/icons": "^9.44.0",
-		"@wordpress/is-shallow-equal": "^4.53.0",
-		"@wordpress/keyboard-shortcuts": "^4.30.0",
-		"@wordpress/keycodes": "^3.53.0",
-		"@wordpress/notices": "^4.21.0",
-		"@wordpress/preferences": "^3.30.0",
-		"@wordpress/private-apis": "^0.35.0",
-		"@wordpress/rich-text": "^6.30.0",
-		"@wordpress/style-engine": "^1.36.0",
-		"@wordpress/token-list": "^2.53.0",
-		"@wordpress/url": "^3.54.0",
-		"@wordpress/warning": "^2.53.0",
-		"@wordpress/wordcount": "^3.53.0",
+		"@wordpress/a11y": "^3.55.0",
+		"@wordpress/api-fetch": "^6.52.0",
+		"@wordpress/blob": "^3.55.0",
+		"@wordpress/blocks": "^12.32.0",
+		"@wordpress/commands": "^0.26.0",
+		"@wordpress/components": "^27.3.0",
+		"@wordpress/compose": "^6.32.0",
+		"@wordpress/data": "^9.25.0",
+		"@wordpress/date": "^4.55.0",
+		"@wordpress/deprecated": "^3.55.0",
+		"@wordpress/dom": "^3.55.0",
+		"@wordpress/element": "^5.32.0",
+		"@wordpress/escape-html": "^2.55.0",
+		"@wordpress/hooks": "^3.55.0",
+		"@wordpress/html-entities": "^3.55.0",
+		"@wordpress/i18n": "^4.55.0",
+		"@wordpress/icons": "^9.46.0",
+		"@wordpress/is-shallow-equal": "^4.55.0",
+		"@wordpress/keyboard-shortcuts": "^4.32.0",
+		"@wordpress/keycodes": "^3.55.0",
+		"@wordpress/notices": "^4.23.0",
+		"@wordpress/preferences": "^3.32.0",
+		"@wordpress/private-apis": "^0.37.0",
+		"@wordpress/rich-text": "^6.32.0",
+		"@wordpress/style-engine": "^1.38.0",
+		"@wordpress/token-list": "^2.55.0",
+		"@wordpress/url": "^3.56.0",
+		"@wordpress/warning": "^2.55.0",
+		"@wordpress/wordcount": "^3.55.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ac3c3e465a083081a86a4da6ee6fb817b41e5130"
+	"gitHead": "ac2b13783c28f959770cf029a797a712f59e1958"
 }

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

@@ -98,16 +98,10 @@ export default function BlockActions( {
 			return removeBlocks( clientIds, updateSelection );
 		},
 		onInsertBefore() {
-			const clientId = Array.isArray( clientIds )
-				? clientIds[ 0 ]
-				: clientId;
-			insertBeforeBlock( clientId );
+			insertBeforeBlock( clientIds[ 0 ] );
 		},
 		onInsertAfter() {
-			const clientId = Array.isArray( clientIds )
-				? clientIds[ clientIds.length - 1 ]
-				: clientId;
-			insertAfterBlock( clientId );
+			insertAfterBlock( clientIds[ clientIds.length - 1 ] );
 		},
 		onMoveTo() {
 			setNavigationMode( true );

package/src/components/block-bindings-toolbar-indicator/style.scss

@@ -1,14 +1,16 @@
 .block-editor-block-bindings-toolbar-indicator {
 	display: inline-flex;
 	align-items: center;
-	height: 48px;
+	justify-content: center;
 	padding: 6px;
-
-	svg g {
-		stroke: var(--wp-bound-block-color);
-		fill: transparent;
-		stroke-width: 1.5;
-		stroke-linecap: round;
-		stroke-linejoin: round;
+	svg {
+		fill: var(--wp-bound-block-color);
 	}
 }
+
+.edit-post-header__toolbar
+.selected-block-tools-wrapper
+.block-editor-block-toolbar
+.block-editor-block-bindings-toolbar-indicator {
+	height: 32px;
+}

package/src/components/block-heading-level-dropdown/README.md

@@ -28,23 +28,23 @@ const MyHeadingLevelToolbar = () => (
 
 #### options
 
-The list of available HTML tags, passed from the block.
+The list of available heading levels, passed from the block.
 
 -   Type: `Object`
 -   Required: no
 
 #### value
 
-The chosen HTML tag.
+The chosen heading level.
 
--   Type: `string`
+-   Type: `number`
 -   Required: no
 
 #### onChange
 
-Callback to run when toolbar value is changed.
+Function called with the selected value changes.
 
--   Type: `string`
+-   Type: `() => number`
 -   Required: yes
 
 ## Related components

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

@@ -22,10 +22,10 @@ const POPOVER_PROPS = {
  *
  * @typedef WPHeadingLevelDropdownProps
  *
- * @property {number}                 value    The chosen heading level.
- * @property {number[]}               options  An array of supported heading levels.
- * @property {(newValue:number)=>any} onChange Callback to run when
- *                                             toolbar value is changed.
+ * @property {number}     value    The chosen heading level.
+ * @property {number[]}   options  An array of supported heading levels.
+ * @property {()=>number} onChange Function called with
+ *                                 the selected value changes.
  */
 
 /**
@@ -53,7 +53,7 @@ export default function HeadingLevelDropdown( {
 						targetLevel === 0
 							? __( 'Paragraph' )
 							: sprintf(
-									// translators: %s: heading level e.g: "1", "2", "3"
+									// translators: %d: heading level e.g: "1", "2", "3"
 									__( 'Heading %d' ),
 									targetLevel
 							  ),

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

@@ -18,9 +18,10 @@ const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];
  *
  * @typedef WPHeadingLevelDropdownProps
  *
- * @property {number}                 selectedLevel The chosen heading level.
- * @property {(newValue:number)=>any} onChange      Callback to run when
- *                                                  toolbar value is changed.
+ * @property {number}     value    The chosen heading level.
+ * @property {number[]}   options  An array of supported heading levels.
+ * @property {()=>number} onChange Function called with
+ *                                 the selected value changes.
  */
 
 /**
@@ -48,7 +49,7 @@ export default function HeadingLevelDropdown( {
 					isPressed={ isActive }
 				/>
 			),
-			// translators: %s: heading level e.g: "1", "2", "3"
+			// translators: %d: heading level e.g: "1", "2", "3"
 			title: sprintf( __( 'Heading %d' ), targetLevel ),
 			isActive,
 			onClick: () => onChangeCallback( targetLevel ),

package/src/components/block-list/block-crash-boundary.native.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { logException } from '@wordpress/react-native-bridge';
+
+class BlockCrashBoundary extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.state = {
+			error: null,
+		};
+	}
+
+	static getDerivedStateFromError( error ) {
+		return { error };
+	}
+
+	componentDidCatch( error ) {
+		const { blockName } = this.props;
+
+		logException( error, {
+			context: {
+				component_stack: error.componentStack,
+				block_name: blockName,
+			},
+			isHandled: true,
+			handledBy: 'Block-level Error Boundary',
+		} );
+	}
+
+	render() {
+		const { error } = this.state;
+		if ( ! error ) {
+			return this.props.children;
+		}
+
+		return this.props.fallback;
+	}
+}
+
+export default BlockCrashBoundary;

package/src/components/block-list/block-crash-warning.native.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Warning from '../warning';
+
+const warning = (
+	<Warning
+		message={ __(
+			'This block has encountered an error and cannot be previewed.'
+		) }
+	/>
+);
+
+export default () => warning;

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

@@ -112,7 +112,10 @@ function BlockListBlock( {
 		...context
 	} = useContext( PrivateBlockContext );
 	const { removeBlock } = useDispatch( blockEditorStore );
-	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
+	const onRemove = useCallback(
+		() => removeBlock( clientId ),
+		[ clientId, removeBlock ]
+	);
 
 	const parentLayout = useLayout() || {};
 
@@ -222,6 +225,11 @@ function BlockListBlock( {
 	// We set a new context with the adjusted and filtered wrapperProps (through
 	// `editor.BlockListBlock`), which the `BlockListBlockProvider` did not have
 	// access to.
+	// Note that the context value doesn't have to be memoized in this case
+	// because when it changes, this component will be re-rendered anyway, and
+	// none of the consumers (BlockListBlock and useBlockProps) are memoized or
+	// "pure". This is different from the public BlockEditContext, where
+	// consumers might be memoized or "pure".
 	return (
 		<PrivateBlockContext.Provider
 			value={ {
@@ -451,8 +459,16 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 					}
 
 					moveFirstItemUp( rootClientId );
-				} else {
-					removeBlock( clientId );
+				} else if (
+					getBlockName( clientId ) !== getDefaultBlockName()
+				) {
+					const replacement = switchToBlockType(
+						getBlock( clientId ),
+						getDefaultBlockName()
+					);
+					if ( replacement && replacement.length ) {
+						replaceBlocks( clientId, replacement );
+					}
 				}
 			}
 		},

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

@@ -49,6 +49,8 @@ import { useLayout } from './layout';
 import useScrollUponInsertion from './use-scroll-upon-insertion';
 import { useSettings } from '../use-settings';
 import { unlock } from '../../lock-unlock';
+import BlockCrashBoundary from './block-crash-boundary';
+import BlockCrashWarning from './block-crash-warning';
 
 const EMPTY_ARRAY = [];
 
@@ -139,14 +141,19 @@ function BlockWrapper( {
 				isSelected={ isSelected }
 				name={ name }
 			/>
-			<BlockDraggable
-				clientId={ clientId }
-				draggingClientId={ draggingClientId }
-				enabled={ draggingEnabled }
-				testID="draggable-trigger-content"
+			<BlockCrashBoundary
+				blockName={ name }
+				fallback={ <BlockCrashWarning /> }
 			>
-				{ children }
-			</BlockDraggable>
+				<BlockDraggable
+					clientId={ clientId }
+					draggingClientId={ draggingClientId }
+					enabled={ draggingEnabled }
+					testID="draggable-trigger-content"
+				>
+					{ children }
+				</BlockDraggable>
+			</BlockCrashBoundary>
 		</Pressable>
 	);
 }

package/src/components/block-list/content.scss

@@ -360,6 +360,22 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	z-index: z-index("{core/image aligned left or right} .wp-block");
 }
 
+body.is-zoomed-out {
+	display: flex;
+	flex-direction: column;
+
+	> .is-root-container {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+
+		> main {
+			flex: 1;
+		}
+	}
+}
+
 .wp-site-blocks > [data-align="left"] {
 	float: left;
 	margin-right: 2em;

package/src/components/block-mover/button.js

@@ -65,6 +65,7 @@ const BlockMoverButton = forwardRef(
 			? clientIds
 			: [ clientIds ];
 		const blocksCount = normalizedClientIds.length;
+		const { disabled } = props;
 
 		const {
 			blockType,
@@ -98,7 +99,9 @@ const BlockMoverButton = forwardRef(
 
 				return {
 					blockType: block ? getBlockType( block.name ) : null,
-					isDisabled: direction === 'up' ? isFirstBlock : isLastBlock,
+					isDisabled:
+						disabled ||
+						( direction === 'up' ? isFirstBlock : isLastBlock ),
 					rootClientId: blockRootClientId,
 					firstIndex: firstBlockIndex,
 					isFirst: isFirstBlock,