@wordpress/block-editor 12.3.3 → 12.3.5

package/build-style/content-rtl.css

@@ -707,6 +707,9 @@
 .block-editor-default-block-appender .block-editor-default-block-appender__content {
   opacity: 0.62;
 }
+:where(body .is-layout-constrained) .block-editor-default-block-appender > :first-child:first-child {
+  margin-block-start: 0;
+}
 .block-editor-default-block-appender .components-drop-zone__content-icon {
   display: none;
 }

package/build-style/content.css

@@ -707,6 +707,9 @@
 .block-editor-default-block-appender .block-editor-default-block-appender__content {
   opacity: 0.62;
 }
+:where(body .is-layout-constrained) .block-editor-default-block-appender > :first-child:first-child {
+  margin-block-start: 0;
+}
 .block-editor-default-block-appender .components-drop-zone__content-icon {
   display: none;
 }

package/build-style/style-rtl.css

@@ -333,42 +333,72 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 @media (min-width: 782px) {
   .block-editor-block-contextual-toolbar.is-fixed {
-    margin-right: 64px;
+    margin-right: 180px;
     position: fixed;
-    top: 40px;
+    top: 39px;
     min-height: initial;
     border-bottom: none;
     display: flex;
   }
   .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
     width: initial;
-    margin-right: 216px;
   }
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
-    margin-right: 120px;
-    top: 8px;
+    margin-right: 240px;
+    top: 7px;
   }
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
     width: initial;
-    margin-right: 280px;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers {
+    flex-grow: initial;
+    width: initial;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers::before {
+    content: "";
+    width: 1px;
+    height: 24px;
+    margin-top: 12px;
+    margin-left: 0;
+    background-color: #ddd;
+    position: relative;
+    right: -2px;
+    top: -1px;
   }
   .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
     border: none;
   }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar::after {
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar .components-button.has-icon svg {
+    display: none;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar .components-button.has-icon::after {
+    content: attr(aria-label);
+    font-size: 12px;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar::before {
     content: "";
     width: 1px;
     height: 24px;
     margin-top: 12px;
-    margin-bottom: 12px;
+    margin-left: 8px;
     background-color: #ddd;
-    position: absolute;
-    right: 44px;
+    position: relative;
+    right: 0;
     top: -1px;
   }
   .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar {
     border: none;
   }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar {
+    width: 256px;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar .components-button.has-icon svg {
+    display: none;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar .components-button.has-icon::after {
+    content: attr(aria-label);
+    font-size: 12px;
+  }
   .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar::before {
     content: "";
     width: 1px;
@@ -376,20 +406,15 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
     margin-bottom: 12px;
     background-color: #ddd;
     position: relative;
-    right: -12px;
+    right: -8px;
     height: 24px;
+    top: -1px;
   }
   .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
-    margin-right: 64px;
-  }
-  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    margin-right: 384px;
+    margin-right: 80px;
   }
   .is-fullscreen-mode .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
-    margin-right: 128px;
-  }
-  .is-fullscreen-mode .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    margin-right: 448px;
+    margin-right: 144px;
   }
   .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
     right: 0;
@@ -447,7 +472,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 @media (min-width: 960px) {
   .block-editor-block-contextual-toolbar.is-fixed {
-    width: initial;
+    width: calc(100% - 240px - 256px);
   }
 }
 
@@ -2654,8 +2679,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 .block-editor-list-view-drop-indicator .block-editor-list-view-drop-indicator__line {
   background: var(--wp-admin-theme-color);
-  height: 6px;
-  border: 1px solid #fff;
+  height: 4px;
   border-radius: 4px;
 }
 
@@ -4115,6 +4139,32 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   margin: 0;
 }
 
+.block-editor-inserter__hint {
+  margin: 16px 16px 0;
+}
+
+.reusable-blocks-menu-items__rename-hint {
+  align-items: top;
+  background: #f0f0f0;
+  border-radius: 2px;
+  color: #1e1e1e;
+  display: flex;
+  flex-direction: row;
+  max-width: 380px;
+}
+
+.reusable-blocks-menu-items__rename-hint-content {
+  margin: 12px 12px 12px 0;
+}
+
+.reusable-blocks-menu-items__rename-hint-dismiss {
+  margin: 4px 0 4px 4px;
+}
+
+.components-menu-group .reusable-blocks-menu-items__rename-hint {
+  margin: 0;
+}
+
 .block-editor-post-preview__dropdown {
   padding: 0;
 }

package/build-style/style.css

@@ -333,42 +333,72 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 @media (min-width: 782px) {
   .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 64px;
+    margin-left: 180px;
     position: fixed;
-    top: 40px;
+    top: 39px;
     min-height: initial;
     border-bottom: none;
     display: flex;
   }
   .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
     width: initial;
-    margin-left: 216px;
   }
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 120px;
-    top: 8px;
+    margin-left: 240px;
+    top: 7px;
   }
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
     width: initial;
-    margin-left: 280px;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers {
+    flex-grow: initial;
+    width: initial;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers::before {
+    content: "";
+    width: 1px;
+    height: 24px;
+    margin-top: 12px;
+    margin-right: 0;
+    background-color: #ddd;
+    position: relative;
+    left: -2px;
+    top: -1px;
   }
   .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
     border: none;
   }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar::after {
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar .components-button.has-icon svg {
+    display: none;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar .components-button.has-icon::after {
+    content: attr(aria-label);
+    font-size: 12px;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar::before {
     content: "";
     width: 1px;
     height: 24px;
     margin-top: 12px;
-    margin-bottom: 12px;
+    margin-right: 8px;
     background-color: #ddd;
-    position: absolute;
-    left: 44px;
+    position: relative;
+    left: 0;
     top: -1px;
   }
   .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar {
     border: none;
   }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar {
+    width: 256px;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar .components-button.has-icon svg {
+    display: none;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar .components-button.has-icon::after {
+    content: attr(aria-label);
+    font-size: 12px;
+  }
   .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar::before {
     content: "";
     width: 1px;
@@ -376,20 +406,15 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
     margin-bottom: 12px;
     background-color: #ddd;
     position: relative;
-    left: -12px;
+    left: -8px;
     height: 24px;
+    top: -1px;
   }
   .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 64px;
-  }
-  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    margin-left: 384px;
+    margin-left: 80px;
   }
   .is-fullscreen-mode .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 128px;
-  }
-  .is-fullscreen-mode .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    margin-left: 448px;
+    margin-left: 144px;
   }
   .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
     left: 0;
@@ -447,7 +472,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 @media (min-width: 960px) {
   .block-editor-block-contextual-toolbar.is-fixed {
-    width: initial;
+    width: calc(100% - 240px - 256px);
   }
 }
 
@@ -2655,8 +2680,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 .block-editor-list-view-drop-indicator .block-editor-list-view-drop-indicator__line {
   background: var(--wp-admin-theme-color);
-  height: 6px;
-  border: 1px solid #fff;
+  height: 4px;
   border-radius: 4px;
 }
 
@@ -4116,6 +4140,32 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   margin: 0;
 }
 
+.block-editor-inserter__hint {
+  margin: 16px 16px 0;
+}
+
+.reusable-blocks-menu-items__rename-hint {
+  align-items: top;
+  background: #f0f0f0;
+  border-radius: 2px;
+  color: #1e1e1e;
+  display: flex;
+  flex-direction: row;
+  max-width: 380px;
+}
+
+.reusable-blocks-menu-items__rename-hint-content {
+  margin: 12px 0 12px 12px;
+}
+
+.reusable-blocks-menu-items__rename-hint-dismiss {
+  margin: 4px 4px 4px 0;
+}
+
+.components-menu-group .reusable-blocks-menu-items__rename-hint {
+  margin: 0;
+}
+
 .block-editor-post-preview__dropdown {
   padding: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.3.3",
+	"version": "12.3.5",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,10 +37,10 @@
 		"@wordpress/a11y": "^3.35.1",
 		"@wordpress/api-fetch": "^6.32.1",
 		"@wordpress/blob": "^3.35.1",
-		"@wordpress/blocks": "^12.12.1",
-		"@wordpress/components": "^25.1.3",
+		"@wordpress/blocks": "^12.12.3",
+		"@wordpress/components": "^25.1.5",
 		"@wordpress/compose": "^6.12.1",
-		"@wordpress/data": "^9.5.1",
+		"@wordpress/data": "^9.5.3",
 		"@wordpress/date": "^4.35.1",
 		"@wordpress/deprecated": "^3.35.1",
 		"@wordpress/dom": "^3.35.1",
@@ -51,12 +51,12 @@
 		"@wordpress/i18n": "^4.35.1",
 		"@wordpress/icons": "^9.26.2",
 		"@wordpress/is-shallow-equal": "^4.35.1",
-		"@wordpress/keyboard-shortcuts": "^4.12.1",
+		"@wordpress/keyboard-shortcuts": "^4.12.3",
 		"@wordpress/keycodes": "^3.35.1",
-		"@wordpress/notices": "^4.3.1",
-		"@wordpress/preferences": "^3.12.3",
+		"@wordpress/notices": "^4.3.3",
+		"@wordpress/preferences": "^3.12.5",
 		"@wordpress/private-apis": "^0.17.1",
-		"@wordpress/rich-text": "^6.12.1",
+		"@wordpress/rich-text": "^6.12.3",
 		"@wordpress/shortcode": "^3.35.1",
 		"@wordpress/style-engine": "^1.18.1",
 		"@wordpress/token-list": "^2.35.1",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "7efa7c2321a958ddfa723825a0354071435a9d43"
+	"gitHead": "3eeb607ebb76c3bf06cb8acb462f0dc068f340f9"
 }

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

@@ -29,7 +29,25 @@ import BlockContext from '../block-context';
  */
 const DEFAULT_BLOCK_CONTEXT = {};
 
-export const Edit = ( props ) => {
+const Edit = ( props ) => {
+	const { name } = props;
+	const blockType = getBlockType( name );
+
+	if ( ! blockType ) {
+		return null;
+	}
+
+	// `edit` and `save` are functions or components describing the markup
+	// with which a block is displayed. If `blockType` is valid, assign
+	// them preferentially as the render value for the block.
+	const Component = blockType.edit || blockType.save;
+
+	return <Component { ...props } />;
+};
+
+const EditWithFilters = withFilters( 'editor.BlockEdit' )( Edit );
+
+const EditWithGeneratedProps = ( props ) => {
 	const { attributes = {}, name } = props;
 	const blockType = getBlockType( name );
 	const blockContext = useContext( BlockContext );
@@ -49,13 +67,8 @@ export const Edit = ( props ) => {
 		return null;
 	}
 
-	// `edit` and `save` are functions or components describing the markup
-	// with which a block is displayed. If `blockType` is valid, assign
-	// them preferentially as the render value for the block.
-	const Component = blockType.edit || blockType.save;
-
 	if ( blockType.apiVersion > 1 ) {
-		return <Component { ...props } context={ context } />;
+		return <EditWithFilters { ...props } context={ context } />;
 	}
 
 	// Generate a class name for the block's editable form.
@@ -69,8 +82,12 @@ export const Edit = ( props ) => {
 	);
 
 	return (
-		<Component { ...props } context={ context } className={ className } />
+		<EditWithFilters
+			{ ...props }
+			context={ context }
+			className={ className }
+		/>
 	);
 };
 
-export default withFilters( 'editor.BlockEdit' )( Edit );
+export default EditWithGeneratedProps;

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

@@ -15,7 +15,7 @@ import {
 /**
  * Internal dependencies
  */
-import { Edit } from '../edit';
+import Edit from '../edit';
 import { BlockContextProvider } from '../../block-context';
 
 const noop = () => {};

package/src/components/block-mobile-toolbar/block-actions-menu.native.js

@@ -213,16 +213,12 @@ const BlockActionsMenu = ( {
 			id: 'convertToRegularBlocksOption',
 			label:
 				innerBlockCount > 1
-					? __( 'Convert to regular blocks' )
-					: __( 'Convert to regular block' ),
+					? __( 'Detach patterns' )
+					: __( 'Detach pattern' ),
 			value: 'convertToRegularBlocksOption',
 			onSelect: () => {
-				const successNotice =
-					innerBlockCount > 1
-						? /* translators: %s: name of the reusable block */
-						  __( '%s converted to regular blocks' )
-						: /* translators: %s: name of the reusable block */
-						  __( '%s converted to regular block' );
+				/* translators: %s: name of the synced block */
+				const successNotice = __( '%s detached' );
 				createSuccessNotice(
 					sprintf(
 						successNotice,

package/src/components/block-parent-selector/index.js

@@ -14,6 +14,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
 import { useShowMoversGestures } from '../block-toolbar/utils';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Block parent selector component, displaying the hierarchy of the
@@ -24,14 +25,15 @@ import { store as blockEditorStore } from '../../store';
 export default function BlockParentSelector() {
 	const { selectBlock, toggleBlockHighlight } =
 		useDispatch( blockEditorStore );
-	const { firstParentClientId, shouldHide, isDistractionFree } = useSelect(
+	const { firstParentClientId, isVisible, isDistractionFree } = useSelect(
 		( select ) => {
 			const {
 				getBlockName,
 				getBlockParents,
 				getSelectedBlockClientId,
 				getSettings,
-			} = select( blockEditorStore );
+				getBlockEditingMode,
+			} = unlock( select( blockEditorStore ) );
 			const { hasBlockSupport } = select( blocksStore );
 			const selectedBlockClientId = getSelectedBlockClientId();
 			const parents = getBlockParents( selectedBlockClientId );
@@ -41,11 +43,14 @@ export default function BlockParentSelector() {
 			const settings = getSettings();
 			return {
 				firstParentClientId: _firstParentClientId,
-				shouldHide: ! hasBlockSupport(
-					_parentBlockType,
-					'__experimentalParentSelector',
-					true
-				),
+				isVisible:
+					_firstParentClientId &&
+					getBlockEditingMode( _firstParentClientId ) === 'default' &&
+					hasBlockSupport(
+						_parentBlockType,
+						'__experimentalParentSelector',
+						true
+					),
 				isDistractionFree: settings.isDistractionFree,
 			};
 		},
@@ -66,7 +71,7 @@ export default function BlockParentSelector() {
 		},
 	} );
 
-	if ( shouldHide || firstParentClientId === undefined ) {
+	if ( ! isVisible ) {
 		return null;
 	}
 

package/src/components/block-removal-warning-modal/index.js

@@ -8,7 +8,7 @@ import {
 	Button,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { __, _n } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -62,6 +62,9 @@ export function BlockRemovalWarningModal() {
 		<Modal
 			title={ __( 'Are you sure?' ) }
 			onRequestClose={ clearRemovalPrompt }
+			style={ {
+				maxWidth: '40rem',
+			} }
 		>
 			{ blockNamesForPrompt.length === 1 ? (
 				<p>{ blockTypePromptMessages[ blockNamesForPrompt[ 0 ] ] }</p>
@@ -75,11 +78,9 @@ export function BlockRemovalWarningModal() {
 				</ul>
 			) }
 			<p>
-				{ _n(
-					'Removing this block is not advised.',
-					'Removing these blocks is not advised.',
-					blockNamesForPrompt.length
-				) }
+				{ blockNamesForPrompt.length > 1
+					? __( 'Removing these blocks is not advised.' )
+					: __( 'Removing this block is not advised.' ) }
 			</p>
 			<HStack justify="right">
 				<Button variant="tertiary" onClick={ clearRemovalPrompt }>

package/src/components/block-tools/block-contextual-toolbar.js

@@ -15,7 +15,7 @@ import {
 	ToolbarButton,
 	ToolbarGroup,
 } from '@wordpress/components';
-import { levelUp } from '@wordpress/icons';
+import { next, previous } from '@wordpress/icons';
 import { useViewportMatch } from '@wordpress/compose';
 
 /**
@@ -24,7 +24,6 @@ import { useViewportMatch } from '@wordpress/compose';
 import NavigableToolbar from '../navigable-toolbar';
 import BlockToolbar from '../block-toolbar';
 import { store as blockEditorStore } from '../../store';
-import BlockIcon from '../block-icon';
 import { unlock } from '../../lock-unlock';
 
 function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
@@ -57,6 +56,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 				hasParents: parents.length,
 				showParentSelector:
 					parentBlockType &&
+					getBlockEditingMode( firstParentClientId ) === 'default' &&
 					hasBlockSupport(
 						parentBlockType,
 						'__experimentalParentSelector',
@@ -93,6 +93,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			aria-label={ __( 'Block tools' ) }
 			{ ...props }
 		>
+			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }
 			{ isFixed && isLargeViewport && blockType && (
 				<ToolbarGroup
 					className={
@@ -104,13 +105,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 					<ToolbarItem
 						as={ ToolbarButton }
 						ref={ toolbarButtonRef }
-						icon={
-							isCollapsed ? (
-								<BlockIcon icon={ blockType.icon } />
-							) : (
-								levelUp
-							)
-						}
+						icon={ isCollapsed ? next : previous }
 						onClick={ () => {
 							setIsCollapsed( ( collapsed ) => ! collapsed );
 							toolbarButtonRef.current.focus();
@@ -118,12 +113,11 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 						label={
 							isCollapsed
 								? __( 'Show block tools' )
-								: __( 'Show document tools' )
+								: __( 'Hide block tools' )
 						}
 					/>
 				</ToolbarGroup>
 			) }
-			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }
 		</NavigableToolbar>
 	);
 }