@wordpress/block-editor 14.7.0 → 14.7.1-next.082ed6819.0

package/build-style/content-rtl.css

@@ -777,7 +777,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 
 .block-editor-iframe__html {
   transform-origin: top center;
-  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, scale 0s, padding 0s;
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, scale 0s, padding 0s, translate 0s;
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-iframe__html {
@@ -786,7 +786,14 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   }
 }
 .block-editor-iframe__html.zoom-out-animation {
-  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s;
+  position: fixed;
+  right: 0;
+  left: 0;
+  top: calc(-1 * var(--wp-block-editor-iframe-zoom-out-scroll-top, 0));
+  bottom: 0;
+  translate: 0 calc(var(--wp-block-editor-iframe-zoom-out-scroll-top, 0) - var(--wp-block-editor-iframe-zoom-out-scroll-top-next, 0));
+  overflow-y: scroll;
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, top 0s, bottom 0s, left 0s, right 0s;
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-iframe__html.zoom-out-animation {
@@ -860,13 +867,6 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 .rich-text:focus {
   outline: none;
 }
-.rich-text:focus [data-rich-text-format-boundary] {
-  border-radius: 2px;
-}
-
-.block-editor-rich-text__editable > p:first-child {
-  margin-top: 0;
-}
 
 figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {
   opacity: 0.8;
@@ -880,6 +880,20 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   background: yellow;
 }
 
+[data-rich-text-comment],
+[data-rich-text-format-boundary] {
+  border-radius: 2px;
+}
+
+[data-rich-text-comment] {
+  background-color: currentColor;
+}
+[data-rich-text-comment] span {
+  filter: invert(100%);
+  color: currentColor;
+  padding: 0 2px;
+}
+
 .block-editor-warning {
   align-items: center;
   display: flex;

package/build-style/content.css

@@ -777,7 +777,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 
 .block-editor-iframe__html {
   transform-origin: top center;
-  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, scale 0s, padding 0s;
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, scale 0s, padding 0s, translate 0s;
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-iframe__html {
@@ -786,7 +786,14 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   }
 }
 .block-editor-iframe__html.zoom-out-animation {
-  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: calc(-1 * var(--wp-block-editor-iframe-zoom-out-scroll-top, 0));
+  bottom: 0;
+  translate: 0 calc(var(--wp-block-editor-iframe-zoom-out-scroll-top, 0) - var(--wp-block-editor-iframe-zoom-out-scroll-top-next, 0));
+  overflow-y: scroll;
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, top 0s, bottom 0s, right 0s, left 0s;
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-iframe__html.zoom-out-animation {
@@ -860,13 +867,6 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 .rich-text:focus {
   outline: none;
 }
-.rich-text:focus [data-rich-text-format-boundary] {
-  border-radius: 2px;
-}
-
-.block-editor-rich-text__editable > p:first-child {
-  margin-top: 0;
-}
 
 figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {
   opacity: 0.8;
@@ -880,6 +880,20 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   background: yellow;
 }
 
+[data-rich-text-comment],
+[data-rich-text-format-boundary] {
+  border-radius: 2px;
+}
+
+[data-rich-text-comment] {
+  background-color: currentColor;
+}
+[data-rich-text-comment] span {
+  filter: invert(100%);
+  color: currentColor;
+  padding: 0 2px;
+}
+
 .block-editor-warning {
   align-items: center;
   display: flex;

package/build-style/style-rtl.css

@@ -766,6 +766,81 @@ iframe[name=editor-canvas] {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
 }
 
+.block-editor-block-manager__no-results {
+  font-style: italic;
+  padding: 24px 0;
+  text-align: center;
+}
+
+.block-editor-block-manager__search {
+  margin: 16px 0;
+}
+
+.block-editor-block-manager__disabled-blocks-count {
+  border: 1px solid #ddd;
+  border-width: 1px 0;
+  box-shadow: 32px 0 0 0 #fff, -32px 0 0 0 #fff;
+  padding: 8px;
+  background-color: #fff;
+  text-align: center;
+  position: sticky;
+  top: -5px;
+  z-index: 2;
+}
+.block-editor-block-manager__disabled-blocks-count ~ .block-editor-block-manager__results .block-editor-block-manager__category-title {
+  top: 31px;
+}
+.block-editor-block-manager__disabled-blocks-count .is-link {
+  margin-right: 12px;
+}
+
+.block-editor-block-manager__category {
+  margin: 0 0 24px 0;
+}
+
+.block-editor-block-manager__category-title {
+  position: sticky;
+  top: -4px;
+  padding: 16px 0;
+  background-color: #fff;
+  z-index: 1;
+}
+.block-editor-block-manager__category-title .components-checkbox-control__label {
+  font-weight: 600;
+}
+
+.block-editor-block-manager__checklist {
+  margin-top: 0;
+}
+
+.block-editor-block-manager__category-title,
+.block-editor-block-manager__checklist-item {
+  border-bottom: 1px solid #ddd;
+}
+
+.block-editor-block-manager__checklist-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0;
+  padding: 8px 16px 8px 0;
+}
+.components-modal__content .block-editor-block-manager__checklist-item.components-checkbox-control__input-container {
+  margin: 0 8px;
+}
+.block-editor-block-manager__checklist-item .block-editor-block-icon {
+  margin-left: 10px;
+  fill: #1e1e1e;
+}
+
+.block-editor-block-manager__results {
+  border-top: 1px solid #ddd;
+}
+
+.block-editor-block-manager__disabled-blocks-count + .block-editor-block-manager__results {
+  border-top-width: 0;
+}
+
 .block-editor-block-mover__move-button-container {
   display: flex;
   padding: 0;
@@ -827,6 +902,9 @@ iframe[name=editor-canvas] {
   }
 }
 
+.components-button.block-editor-block-mover-button {
+  overflow: hidden;
+}
 .components-button.block-editor-block-mover-button::before {
   content: "";
   position: absolute;

package/build-style/style.css

@@ -766,6 +766,81 @@ iframe[name=editor-canvas] {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
 }
 
+.block-editor-block-manager__no-results {
+  font-style: italic;
+  padding: 24px 0;
+  text-align: center;
+}
+
+.block-editor-block-manager__search {
+  margin: 16px 0;
+}
+
+.block-editor-block-manager__disabled-blocks-count {
+  border: 1px solid #ddd;
+  border-width: 1px 0;
+  box-shadow: -32px 0 0 0 #fff, 32px 0 0 0 #fff;
+  padding: 8px;
+  background-color: #fff;
+  text-align: center;
+  position: sticky;
+  top: -5px;
+  z-index: 2;
+}
+.block-editor-block-manager__disabled-blocks-count ~ .block-editor-block-manager__results .block-editor-block-manager__category-title {
+  top: 31px;
+}
+.block-editor-block-manager__disabled-blocks-count .is-link {
+  margin-left: 12px;
+}
+
+.block-editor-block-manager__category {
+  margin: 0 0 24px 0;
+}
+
+.block-editor-block-manager__category-title {
+  position: sticky;
+  top: -4px;
+  padding: 16px 0;
+  background-color: #fff;
+  z-index: 1;
+}
+.block-editor-block-manager__category-title .components-checkbox-control__label {
+  font-weight: 600;
+}
+
+.block-editor-block-manager__checklist {
+  margin-top: 0;
+}
+
+.block-editor-block-manager__category-title,
+.block-editor-block-manager__checklist-item {
+  border-bottom: 1px solid #ddd;
+}
+
+.block-editor-block-manager__checklist-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0;
+  padding: 8px 0 8px 16px;
+}
+.components-modal__content .block-editor-block-manager__checklist-item.components-checkbox-control__input-container {
+  margin: 0 8px;
+}
+.block-editor-block-manager__checklist-item .block-editor-block-icon {
+  margin-right: 10px;
+  fill: #1e1e1e;
+}
+
+.block-editor-block-manager__results {
+  border-top: 1px solid #ddd;
+}
+
+.block-editor-block-manager__disabled-blocks-count + .block-editor-block-manager__results {
+  border-top-width: 0;
+}
+
 .block-editor-block-mover__move-button-container {
   display: flex;
   padding: 0;
@@ -827,6 +902,9 @@ iframe[name=editor-canvas] {
   }
 }
 
+.components-button.block-editor-block-mover-button {
+  overflow: hidden;
+}
 .components-button.block-editor-block-mover-button::before {
   content: "";
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.7.0",
+	"version": "14.7.1-next.082ed6819.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,37 +37,37 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "*",
-		"@wordpress/api-fetch": "*",
-		"@wordpress/blob": "*",
-		"@wordpress/block-serialization-default-parser": "*",
-		"@wordpress/blocks": "*",
-		"@wordpress/commands": "*",
+		"@wordpress/a11y": "^4.12.1-next.082ed6819.0",
+		"@wordpress/api-fetch": "^7.12.1-next.082ed6819.0",
+		"@wordpress/blob": "^4.12.1-next.082ed6819.0",
+		"@wordpress/block-serialization-default-parser": "^5.12.1-next.082ed6819.0",
+		"@wordpress/blocks": "^14.1.1-next.082ed6819.0",
+		"@wordpress/commands": "^1.12.1-next.082ed6819.0",
 		"@wordpress/components": "*",
-		"@wordpress/compose": "*",
+		"@wordpress/compose": "^7.12.1-next.082ed6819.0",
 		"@wordpress/data": "*",
-		"@wordpress/date": "*",
-		"@wordpress/deprecated": "*",
-		"@wordpress/dom": "*",
-		"@wordpress/element": "*",
-		"@wordpress/escape-html": "*",
-		"@wordpress/hooks": "*",
-		"@wordpress/html-entities": "*",
-		"@wordpress/i18n": "*",
-		"@wordpress/icons": "*",
-		"@wordpress/is-shallow-equal": "*",
-		"@wordpress/keyboard-shortcuts": "*",
-		"@wordpress/keycodes": "*",
-		"@wordpress/notices": "*",
-		"@wordpress/preferences": "*",
-		"@wordpress/priority-queue": "*",
-		"@wordpress/private-apis": "*",
-		"@wordpress/rich-text": "*",
-		"@wordpress/style-engine": "*",
-		"@wordpress/token-list": "*",
-		"@wordpress/url": "*",
-		"@wordpress/warning": "*",
-		"@wordpress/wordcount": "*",
+		"@wordpress/date": "^5.12.1-next.082ed6819.0",
+		"@wordpress/deprecated": "^4.12.1-next.082ed6819.0",
+		"@wordpress/dom": "^4.12.1-next.082ed6819.0",
+		"@wordpress/element": "^6.12.1-next.082ed6819.0",
+		"@wordpress/escape-html": "^3.12.1-next.082ed6819.0",
+		"@wordpress/hooks": "^4.12.1-next.082ed6819.0",
+		"@wordpress/html-entities": "^4.12.1-next.082ed6819.0",
+		"@wordpress/i18n": "^5.12.1-next.082ed6819.0",
+		"@wordpress/icons": "^10.12.1-next.082ed6819.0",
+		"@wordpress/is-shallow-equal": "^5.12.1-next.082ed6819.0",
+		"@wordpress/keyboard-shortcuts": "^5.12.1-next.082ed6819.0",
+		"@wordpress/keycodes": "^4.12.1-next.082ed6819.0",
+		"@wordpress/notices": "^5.12.1-next.082ed6819.0",
+		"@wordpress/preferences": "^4.12.1-next.082ed6819.0",
+		"@wordpress/priority-queue": "^3.12.1-next.082ed6819.0",
+		"@wordpress/private-apis": "^1.12.1-next.082ed6819.0",
+		"@wordpress/rich-text": "^7.12.1-next.082ed6819.0",
+		"@wordpress/style-engine": "^2.12.1-next.082ed6819.0",
+		"@wordpress/token-list": "^3.12.1-next.082ed6819.0",
+		"@wordpress/url": "^4.12.1-next.082ed6819.0",
+		"@wordpress/warning": "^3.12.1-next.082ed6819.0",
+		"@wordpress/wordcount": "^4.12.1-next.082ed6819.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -90,5 +90,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "510540d99f3d222a96f08d3d7b66c9e7a726f705"
+	"gitHead": "2bb7bad15ddb8e88210fab7d4a1ef1565466e424"
 }

package/src/components/block-controls/slot.js

@@ -31,9 +31,10 @@ export default function BlockControlsSlot( { group = 'default', ...props } ) {
 		[ toolbarState, contextState ]
 	);
 
-	const Slot = groups[ group ]?.Slot;
-	const fills = useSlotFills( Slot?.__unstableName );
-	if ( ! Slot ) {
+	const slotFill = groups[ group ];
+	const fills = useSlotFills( slotFill.name );
+
+	if ( ! slotFill ) {
 		warning( `Unknown BlockControls group "${ group }" provided.` );
 		return null;
 	}
@@ -42,6 +43,7 @@ export default function BlockControlsSlot( { group = 'default', ...props } ) {
 		return null;
 	}
 
+	const { Slot } = slotFill;
 	const slot = <Slot { ...props } bubblesVirtually fillProps={ fillProps } />;
 
 	if ( group === 'default' ) {

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

@@ -26,7 +26,6 @@ import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-c
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 import PositionControls from '../inspector-controls-tabs/position-controls-panel';
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
-import BlockInfo from '../block-info-slot-fill';
 import BlockQuickNavigation from '../block-quick-navigation';
 import { useBorderPanelLabel } from '../../hooks/border';
 
@@ -253,7 +252,6 @@ const BlockInspectorSingleBlock = ( {
 				className={ blockInformation.isSynced && 'is-synced' }
 			/>
 			<BlockVariationTransforms blockClientId={ clientId } />
-			<BlockInfo.Slot />
 			{ showTabs && (
 				<InspectorControlsTabs
 					hasBlockStyles={ hasBlockStyles }

package/src/components/block-lock/modal.js

@@ -24,7 +24,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 
 // Entity based blocks which allow edit locking
-const ALLOWS_EDIT_LOCKING = [ 'core/block', 'core/navigation' ];
+const ALLOWS_EDIT_LOCKING = [ 'core/navigation' ];
 
 function getTemplateLockValue( lock ) {
 	// Prevents all operations.

package/src/components/block-manager/category.js

@@ -0,0 +1,102 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { CheckboxControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BlockTypesChecklist from './checklist';
+
+function BlockManagerCategory( {
+	title,
+	blockTypes,
+	selectedBlockTypes,
+	onChange,
+} ) {
+	const instanceId = useInstanceId( BlockManagerCategory );
+
+	const toggleVisible = useCallback(
+		( blockType, nextIsChecked ) => {
+			if ( nextIsChecked ) {
+				onChange( [ ...selectedBlockTypes, blockType ] );
+			} else {
+				onChange(
+					selectedBlockTypes.filter(
+						( { name } ) => name !== blockType.name
+					)
+				);
+			}
+		},
+		[ selectedBlockTypes, onChange ]
+	);
+
+	const toggleAllVisible = useCallback(
+		( nextIsChecked ) => {
+			if ( nextIsChecked ) {
+				onChange( [
+					...selectedBlockTypes,
+					...blockTypes.filter(
+						( blockType ) =>
+							! selectedBlockTypes.find(
+								( { name } ) => name === blockType.name
+							)
+					),
+				] );
+			} else {
+				onChange(
+					selectedBlockTypes.filter(
+						( selectedBlockType ) =>
+							! blockTypes.find(
+								( { name } ) => name === selectedBlockType.name
+							)
+					)
+				);
+			}
+		},
+		[ blockTypes, selectedBlockTypes, onChange ]
+	);
+
+	if ( ! blockTypes.length ) {
+		return null;
+	}
+
+	const checkedBlockNames = blockTypes
+		.map( ( { name } ) => name )
+		.filter( ( type ) =>
+			( selectedBlockTypes ?? [] ).some(
+				( selectedBlockType ) => selectedBlockType.name === type
+			)
+		);
+
+	const titleId = 'block-editor-block-manager__category-title-' + instanceId;
+
+	const isAllChecked = checkedBlockNames.length === blockTypes.length;
+	const isIndeterminate = ! isAllChecked && checkedBlockNames.length > 0;
+
+	return (
+		<div
+			role="group"
+			aria-labelledby={ titleId }
+			className="block-editor-block-manager__category"
+		>
+			<CheckboxControl
+				__nextHasNoMarginBottom
+				checked={ isAllChecked }
+				onChange={ toggleAllVisible }
+				className="block-editor-block-manager__category-title"
+				indeterminate={ isIndeterminate }
+				label={ <span id={ titleId }>{ title }</span> }
+			/>
+			<BlockTypesChecklist
+				blockTypes={ blockTypes }
+				value={ checkedBlockNames }
+				onItemChange={ toggleVisible }
+			/>
+		</div>
+	);
+}
+
+export default BlockManagerCategory;

package/src/components/block-manager/checklist.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { CheckboxControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+
+function BlockTypesChecklist( { blockTypes, value, onItemChange } ) {
+	return (
+		<ul className="block-editor-block-manager__checklist">
+			{ blockTypes.map( ( blockType ) => (
+				<li
+					key={ blockType.name }
+					className="block-editor-block-manager__checklist-item"
+				>
+					<CheckboxControl
+						__nextHasNoMarginBottom
+						label={ blockType.title }
+						checked={ value.includes( blockType.name ) }
+						onChange={ ( ...args ) =>
+							onItemChange( blockType, ...args )
+						}
+					/>
+					<BlockIcon icon={ blockType.icon } />
+				</li>
+			) ) }
+		</ul>
+	);
+}
+
+export default BlockTypesChecklist;