@wordpress/block-editor 12.25.0 → 12.26.0

package/build-style/style-rtl.css

@@ -416,6 +416,14 @@ iframe[name=editor-canvas].has-editor-padding {
   display: none;
 }
 
+.components-popover.block-editor-block-popover__inbetween .block-editor-button-pattern-inserter__button {
+  pointer-events: all;
+  position: absolute;
+  transform: translateX(50%) translateY(-50%);
+  top: 50%;
+  right: 50%;
+}
+
 .block-editor-block-lock-modal {
   z-index: 1000001;
 }
@@ -3295,6 +3303,7 @@ iframe[name=editor-canvas].has-editor-padding {
    * injected color controls can appear as a single item group without
    * the contrast checkers suddenly appearing between items.
    */
+  /* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/58936 is fixed. */
   order: 9999;
   grid-column: span 2;
   margin-top: 16px;
@@ -3723,7 +3732,7 @@ iframe[name=editor-canvas].has-editor-padding {
   overflow: hidden;
 }
 .block-editor-inserter__tabs .block-editor-inserter__tablist {
-  border-bottom: 1px solid #ddd;
+  width: 100%;
 }
 .block-editor-inserter__tabs .block-editor-inserter__tablist button[role=tab] {
   flex-grow: 1;
@@ -3789,7 +3798,8 @@ iframe[name=editor-canvas].has-editor-padding {
   width: 100%;
 }
 
-.block-editor-inserter__no-results {
+.block-editor-inserter__no-results,
+.block-editor-inserter__patterns-loading {
   padding: 32px;
   text-align: center;
 }
@@ -4234,11 +4244,11 @@ iframe[name=editor-canvas].has-editor-padding {
   display: none;
 }
 
-.is-zoom-out .block-editor-inserter__menu {
+.block-editor-inserter__menu.is-zoom-out {
   display: flex;
 }
 @media (min-width: 782px) {
-  .is-zoom-out .show-panel::after {
+  .block-editor-inserter__menu.is-zoom-out.show-panel::after {
     content: "";
     display: block;
     width: 300px;

package/build-style/style.css

@@ -416,6 +416,14 @@ iframe[name=editor-canvas].has-editor-padding {
   display: none;
 }
 
+.components-popover.block-editor-block-popover__inbetween .block-editor-button-pattern-inserter__button {
+  pointer-events: all;
+  position: absolute;
+  transform: translateX(-50%) translateY(-50%);
+  top: 50%;
+  left: 50%;
+}
+
 .block-editor-block-lock-modal {
   z-index: 1000001;
 }
@@ -3296,6 +3304,7 @@ iframe[name=editor-canvas].has-editor-padding {
    * injected color controls can appear as a single item group without
    * the contrast checkers suddenly appearing between items.
    */
+  /* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/58936 is fixed. */
   order: 9999;
   grid-column: span 2;
   margin-top: 16px;
@@ -3724,7 +3733,7 @@ iframe[name=editor-canvas].has-editor-padding {
   overflow: hidden;
 }
 .block-editor-inserter__tabs .block-editor-inserter__tablist {
-  border-bottom: 1px solid #ddd;
+  width: 100%;
 }
 .block-editor-inserter__tabs .block-editor-inserter__tablist button[role=tab] {
   flex-grow: 1;
@@ -3790,7 +3799,8 @@ iframe[name=editor-canvas].has-editor-padding {
   width: 100%;
 }
 
-.block-editor-inserter__no-results {
+.block-editor-inserter__no-results,
+.block-editor-inserter__patterns-loading {
   padding: 32px;
   text-align: center;
 }
@@ -4235,11 +4245,11 @@ iframe[name=editor-canvas].has-editor-padding {
   display: none;
 }
 
-.is-zoom-out .block-editor-inserter__menu {
+.block-editor-inserter__menu.is-zoom-out {
   display: flex;
 }
 @media (min-width: 782px) {
-  .is-zoom-out .show-panel::after {
+  .block-editor-inserter__menu.is-zoom-out.show-panel::after {
     content: "";
     display: block;
     width: 300px;

package/build-types/components/block-context/index.d.ts

@@ -5,7 +5,7 @@
  *
  * @param {BlockContextProviderProps} props
  */
-export function BlockContextProvider({ value, children }: BlockContextProviderProps): JSX.Element;
+export function BlockContextProvider({ value, children }: BlockContextProviderProps): import("react").JSX.Element;
 export default Context;
 export type ReactNode = import('react').ReactNode;
 export type BlockContextProviderProps = {

package/build-types/components/block-context/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/block-context/index.js"],"names":[],"mappings":"AAkBA;;;;;;GAMG;AACH,0DAFW,yBAAyB,eAUnC;;wBA5Ba,OAAO,OAAO,EAAE,SAAS;;;;;;WAKzB,OAAO,MAAM,MAAG;;;;cAEhB,SAAS;;AAPvB,qDAAqD;AAErD;;;;;;GAMG;AAEH,wDAAwD;AACxD,uBADW,OAAO,OAAO,EAAE,OAAO,CAAC,OAAO,MAAM,MAAG,CAAC,CAChB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/block-context/index.js"],"names":[],"mappings":"AAkBA;;;;;;GAMG;AACH,0DAFW,yBAAyB,+BAUnC;;wBA5Ba,OAAO,OAAO,EAAE,SAAS;;;;;;WAKzB,OAAO,MAAM,MAAG;;;;cAEhB,SAAS;;AAPvB,qDAAqD;AAErD;;;;;;GAMG;AAEH,wDAAwD;AACxD,uBADW,OAAO,OAAO,EAAE,OAAO,CAAC,OAAO,MAAM,MAAG,CAAC,CAChB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.25.0",
+	"version": "12.26.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,37 +35,37 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.57.0",
-		"@wordpress/api-fetch": "^6.54.0",
-		"@wordpress/blob": "^3.57.0",
-		"@wordpress/blocks": "^12.34.0",
-		"@wordpress/commands": "^0.28.0",
-		"@wordpress/components": "^27.5.0",
-		"@wordpress/compose": "^6.34.0",
-		"@wordpress/data": "^9.27.0",
-		"@wordpress/date": "^4.57.0",
-		"@wordpress/deprecated": "^3.57.0",
-		"@wordpress/dom": "^3.57.0",
-		"@wordpress/element": "^5.34.0",
-		"@wordpress/escape-html": "^2.57.0",
-		"@wordpress/hooks": "^3.57.0",
-		"@wordpress/html-entities": "^3.57.0",
-		"@wordpress/i18n": "^4.57.0",
-		"@wordpress/icons": "^9.48.0",
-		"@wordpress/is-shallow-equal": "^4.57.0",
-		"@wordpress/keyboard-shortcuts": "^4.34.0",
-		"@wordpress/keycodes": "^3.57.0",
-		"@wordpress/notices": "^4.25.0",
-		"@wordpress/preferences": "^3.34.0",
-		"@wordpress/private-apis": "^0.39.0",
-		"@wordpress/rich-text": "^6.34.0",
-		"@wordpress/style-engine": "^1.40.0",
-		"@wordpress/token-list": "^2.57.0",
-		"@wordpress/url": "^3.58.0",
-		"@wordpress/warning": "^2.57.0",
-		"@wordpress/wordcount": "^3.57.0",
+		"@wordpress/a11y": "^3.58.0",
+		"@wordpress/api-fetch": "^6.55.0",
+		"@wordpress/blob": "^3.58.0",
+		"@wordpress/blocks": "^12.35.0",
+		"@wordpress/commands": "^0.29.0",
+		"@wordpress/components": "^27.6.0",
+		"@wordpress/compose": "^6.35.0",
+		"@wordpress/data": "^9.28.0",
+		"@wordpress/date": "^4.58.0",
+		"@wordpress/deprecated": "^3.58.0",
+		"@wordpress/dom": "^3.58.0",
+		"@wordpress/element": "^5.35.0",
+		"@wordpress/escape-html": "^2.58.0",
+		"@wordpress/hooks": "^3.58.0",
+		"@wordpress/html-entities": "^3.58.0",
+		"@wordpress/i18n": "^4.58.0",
+		"@wordpress/icons": "^9.49.0",
+		"@wordpress/is-shallow-equal": "^4.58.0",
+		"@wordpress/keyboard-shortcuts": "^4.35.0",
+		"@wordpress/keycodes": "^3.58.0",
+		"@wordpress/notices": "^4.26.0",
+		"@wordpress/preferences": "^3.35.0",
+		"@wordpress/private-apis": "^0.40.0",
+		"@wordpress/rich-text": "^6.35.0",
+		"@wordpress/style-engine": "^1.41.0",
+		"@wordpress/token-list": "^2.58.0",
+		"@wordpress/url": "^3.59.0",
+		"@wordpress/warning": "^2.58.0",
+		"@wordpress/wordcount": "^3.58.0",
 		"change-case": "^4.1.2",
-		"classnames": "^2.3.1",
+		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"deepmerge": "^4.3.0",
 		"diff": "^4.0.2",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
+	"gitHead": "42f38f287506a6b3ed8ccba839b18ad066821044"
 }

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

@@ -31,10 +31,12 @@ export default function BlockActions( {
 				getDirectInsertBlock,
 				canMoveBlocks,
 				canRemoveBlocks,
+				getBlockEditingMode,
 			} = select( blockEditorStore );
 
 			const blocks = getBlocksByClientId( clientIds );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+			const rootBlockEditingMode = getBlockEditingMode( rootClientId );
 			const canInsertDefaultBlock = canInsertBlockType(
 				getDefaultBlockName(),
 				rootClientId
@@ -46,7 +48,9 @@ export default function BlockActions( {
 			return {
 				canMove: canMoveBlocks( clientIds, rootClientId ),
 				canRemove: canRemoveBlocks( clientIds, rootClientId ),
-				canInsertBlock: canInsertDefaultBlock || !! directInsertBlock,
+				canInsertBlock:
+					( canInsertDefaultBlock || !! directInsertBlock ) &&
+					rootBlockEditingMode === 'default',
 				canCopyStyles: blocks.every( ( block ) => {
 					return (
 						!! block &&

package/src/components/block-alignment-control/ui.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -85,7 +85,7 @@ function BlockAlignmentUI( {
 												key={ controlName }
 												icon={ icon }
 												iconPosition="left"
-												className={ classNames(
+												className={ clsx(
 													'components-dropdown-menu__menu-item',
 													{
 														'is-active': isSelected,

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -45,7 +45,7 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 	const { selectBlock } = useDispatch( blockEditorStore );
 
 	return (
-		<div className={ classnames( 'block-editor-block-card', className ) }>
+		<div className={ clsx( 'block-editor-block-card', className ) }>
 			{ parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.
 				<Button
 					onClick={ () => selectBlock( parentNavBlockClientId ) }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 // diff doesn't tree-shake correctly, so we import from the individual
 // module here, to avoid including too much of the library
 import { diffChars } from 'diff/lib/diff/character';
@@ -28,7 +28,7 @@ function BlockCompare( {
 		const difference = diffChars( originalContent, newContent );
 
 		return difference.map( ( item, pos ) => {
-			const classes = classnames( {
+			const classes = clsx( {
 				'block-editor-block-compare__added': item.added,
 				'block-editor-block-compare__removed': item.removed,
 			} );

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

@@ -1,46 +1,13 @@
 .block-editor-block-list__block.has-block-overlay {
 	cursor: default;
 
-	&::before {
-		content: "";
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: transparent;
-		border: none;
-		border-radius: $radius-block-ui;
-		z-index: z-index(".block-editor-block-list__block.has-block-overlay");
-	}
-
-	&:not(.is-multi-selected)::after {
-		content: none !important;
-	}
-
-	&:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before {
-		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
-	}
-
-	&.is-reusable:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before,
-	&.wp-block-template-part:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before {
-		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
-		box-shadow: 0 0 0 $border-width var(--wp-block-synced-color) inset;
-	}
-
-	&.is-selected:not(.is-dragging-blocks)::before {
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
-	}
-
 	.block-editor-block-list__block {
 		pointer-events: none;
 	}
 
-	.block-editor-iframe__body.is-zoomed-out &::before {
-		// Unfortunately because of the vw unit, this is not always going to be exact
-		// When the scrollbar is visible, the frame exceeds the canvas by a few pixels.
-		width: calc(100vw);
-		left: calc(( 100% - 100vw ) / 2);
+	.block-editor-block-list__block.has-block-overlay::before {
+		left: 0;
+		right: 0;
+		width: auto;
 	}
 }

package/src/components/block-draggable/test/helpers.native.js

@@ -108,11 +108,11 @@ export const initializeWithBlocksLayouts = async ( blocks ) => {
 /**
  * Fires long-press gesture event on a block.
  *
- * @param {HTMLElement} block                  Block test instance.
- * @param {string}      testID                 Id for querying the draggable trigger element.
- * @param {Object}      [options]              Configuration options for the gesture event.
- * @param {boolean}     [options.failed]       Determines if the gesture should fail.
- * @param {number}      [options.triggerIndex] In case there are multiple draggable triggers, this specifies the index to use.
+ * @param {import('react-test-renderer').ReactTestInstance} block                  Block test instance.
+ * @param {string}                                          testID                 Id for querying the draggable trigger element.
+ * @param {Object}                                          [options]              Configuration options for the gesture event.
+ * @param {boolean}                                         [options.failed]       Determines if the gesture should fail.
+ * @param {number}                                          [options.triggerIndex] In case there are multiple draggable triggers, this specifies the index to use.
  */
 export const fireLongPress = (
 	block,
@@ -140,8 +140,8 @@ export const fireLongPress = (
 /**
  * Fires pan gesture event on a BlockDraggable component.
  *
- * @param {HTMLElement} blockDraggable BlockDraggable test instance.
- * @param {Object}      [touchEvents]  Array of touch events to dispatch on the pan gesture.
+ * @param {import('react-test-renderer').ReactTestInstance} blockDraggable BlockDraggable test instance.
+ * @param {Object}                                          [touchEvents]  Array of touch events to dispatch on the pan gesture.
  */
 export const firePanGesture = (
 	blockDraggable,
@@ -169,7 +169,7 @@ export const firePanGesture = (
  *
  * @param {import('@testing-library/react-native').RenderAPI} screen The Testing Library screen.
  *
- * @return {HTMLElement} Draggable chip test instance.
+ * @return {import('react-test-renderer').ReactTestInstance} Draggable chip test instance.
  */
 export const getDraggableChip = ( { getByTestId } ) => {
 	let draggableChip;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -75,7 +75,7 @@ const EditWithGeneratedProps = ( props ) => {
 	const generatedClassName = hasBlockSupport( blockType, 'className', true )
 		? getBlockDefaultClassName( name )
 		: null;
-	const className = classnames(
+	const className = clsx(
 		generatedClassName,
 		attributes.className,
 		props.className

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -30,7 +30,7 @@ function BlockIcon( { icon, showColors = false, className, context } ) {
 	return (
 		<span
 			style={ style }
-			className={ classnames( 'block-editor-block-icon', className, {
+			className={ clsx( 'block-editor-block-icon', className, {
 				'has-colors': showColors,
 			} ) }
 		>

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

@@ -95,7 +95,8 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			blockType: _blockType,
 			topLevelLockedBlock:
 				getContentLockingParent( _selectedBlockClientId ) ||
-				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly'
+				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly' ||
+				_selectedBlockName === 'core/block'
 					? _selectedBlockClientId
 					: undefined ),
 		};

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -64,7 +64,7 @@ function mergeWrapperProps( propsA, propsB ) {
 		propsA?.hasOwnProperty( 'className' ) &&
 		propsB?.hasOwnProperty( 'className' )
 	) {
-		newProps.className = classnames( propsA.className, propsB.className );
+		newProps.className = clsx( propsA.className, propsB.className );
 	}
 
 	if (
@@ -177,7 +177,7 @@ function BlockListBlock( {
 	if ( isAligned ) {
 		blockEdit = (
 			<div
-				className={ classnames( 'wp-block', isSticky && className ) }
+				className={ clsx( 'wp-block', isSticky && className ) }
 				data-align={ wrapperProps[ 'data-align' ] }
 			>
 				{ blockEdit }
@@ -217,7 +217,7 @@ function BlockListBlock( {
 
 	const { 'data-align': dataAlign, ...restWrapperProps } = wrapperProps ?? {};
 
-	restWrapperProps.className = classnames(
+	restWrapperProps.className = clsx(
 		restWrapperProps.className,
 		dataAlign && themeSupportsLayout && `align${ dataAlign }`,
 		! ( dataAlign && isSticky ) && className

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Pressable, View } from 'react-native';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -73,7 +73,7 @@ function mergeWrapperProps( propsA, propsB ) {
 		propsA?.hasOwnProperty( 'className' ) &&
 		propsB?.hasOwnProperty( 'className' )
 	) {
-		newProps.className = classnames( propsA.className, propsB.className );
+		newProps.className = clsx( propsA.className, propsB.className );
 	}
 
 	if (