@wordpress/block-editor 12.26.0 → 13.0.1

package/src/store/selectors.js

@@ -22,6 +22,7 @@ import { createSelector, createRegistrySelector } from '@wordpress/data';
  * Internal dependencies
  */
 import {
+	withRootClientIdOptionKey,
 	checkAllowListRecursive,
 	checkAllowList,
 	getAllPatternsDependants,
@@ -75,6 +76,8 @@ const EMPTY_ARRAY = [];
  */
 const EMPTY_SET = new Set();
 
+const EMPTY_OBJECT = {};
+
 /**
  * Returns a block's name given its client ID, or null if no block exists with
  * the client ID.
@@ -1759,16 +1762,13 @@ export function canMoveBlock( state, clientId, rootClientId = null ) {
 	if ( attributes === null ) {
 		return true;
 	}
-	if ( getBlockEditingMode( state, rootClientId ) !== 'default' ) {
-		return false;
-	}
 	if ( attributes.lock?.move !== undefined ) {
 		return ! attributes.lock.move;
 	}
 	if ( getTemplateLock( state, rootClientId ) === 'all' ) {
 		return false;
 	}
-	return true;
+	return getBlockEditingMode( state, rootClientId ) !== 'disabled';
 }
 
 /**
@@ -1998,7 +1998,7 @@ const buildBlockTypeItem =
  */
 export const getInserterItems = createRegistrySelector( ( select ) =>
 	createSelector(
-		( state, rootClientId = null ) => {
+		( state, rootClientId = null, options = EMPTY_OBJECT ) => {
 			const buildReusableBlockInserterItem = ( reusableBlock ) => {
 				const icon = ! reusableBlock.wp_pattern_sync_status
 					? {
@@ -2040,16 +2040,73 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 				buildScope: 'inserter',
 			} );
 
-			const blockTypeInserterItems = getBlockTypes()
+			let blockTypeInserterItems = getBlockTypes()
 				.filter( ( blockType ) =>
-					canIncludeBlockTypeInInserter(
-						state,
-						blockType,
-						rootClientId
-					)
+					hasBlockSupport( blockType, 'inserter', true )
 				)
 				.map( buildBlockTypeInserterItem );
 
+			if ( options[ withRootClientIdOptionKey ] ) {
+				blockTypeInserterItems = blockTypeInserterItems.reduce(
+					( accumulator, item ) => {
+						item.rootClientId = rootClientId ?? '';
+
+						while (
+							! canInsertBlockTypeUnmemoized(
+								state,
+								item.name,
+								item.rootClientId
+							)
+						) {
+							if ( ! item.rootClientId ) {
+								let sectionRootClientId;
+								try {
+									sectionRootClientId = unlock(
+										getSettings( state )
+									).sectionRootClientId;
+								} catch ( e ) {}
+								if (
+									sectionRootClientId &&
+									canInsertBlockTypeUnmemoized(
+										state,
+										item.name,
+										sectionRootClientId
+									)
+								) {
+									item.rootClientId = sectionRootClientId;
+								} else {
+									delete item.rootClientId;
+								}
+								break;
+							} else {
+								const parentClientId = getBlockRootClientId(
+									state,
+									item.rootClientId
+								);
+								item.rootClientId = parentClientId;
+							}
+						}
+
+						// We could also add non insertable items and gray them out.
+						if ( item.hasOwnProperty( 'rootClientId' ) ) {
+							accumulator.push( item );
+						}
+
+						return accumulator;
+					},
+					[]
+				);
+			} else {
+				blockTypeInserterItems = blockTypeInserterItems.filter(
+					( blockType ) =>
+						canIncludeBlockTypeInInserter(
+							state,
+							blockType,
+							rootClientId
+						)
+				);
+			}
+
 			const items = blockTypeInserterItems.reduce(
 				( accumulator, item ) => {
 					const { variations = [] } = item;

package/src/store/utils.js

@@ -5,6 +5,8 @@ import { selectBlockPatternsKey } from './private-keys';
 import { unlock } from '../lock-unlock';
 import { STORE_NAME } from './constants';
 
+export const withRootClientIdOptionKey = Symbol( 'withRootClientId' );
+
 export const checkAllowList = ( list, item, defaultResult = null ) => {
 	if ( typeof list === 'boolean' ) {
 		return list;

package/src/style.scss

@@ -46,6 +46,7 @@
 @import "./components/tool-selector/style.scss";
 @import "./components/url-input/style.scss";
 @import "./components/url-popover/style.scss";
+@import "./hooks/block-bindings.scss";
 @import "./hooks/block-hooks.scss";
 @import "./hooks/border.scss";
 @import "./hooks/color.scss";

package/src/utils/test/__snapshots__/transform-styles.js.snap

@@ -24,7 +24,7 @@ exports[`transformStyles URL rewrite should rewrite relative paths 1`] = `
 ]
 `;
 
-exports[`transformStyles error handling should handle multiple instances of \`:where(body)\` 1`] = `
+exports[`transformStyles error handling should handle multiple instances of \`:root :where(body)\` 1`] = `
 [
   ".my-namespace { color: pink; } .my-namespace { color: orange; }",
 ]

package/src/utils/test/transform-styles.js

@@ -52,8 +52,8 @@ describe( 'transformStyles', () => {
 			);
 		} );
 
-		it( 'should handle multiple instances of `:where(body)`', () => {
-			const input = `:where(body) { color: pink; } :where(body) { color: orange; }`;
+		it( 'should handle multiple instances of `:root :where(body)`', () => {
+			const input = `:root :where(body) { color: pink; } :root :where(body) { color: orange; }`;
 			const output = transformStyles(
 				[
 					{

package/src/utils/transform-styles/index.js

@@ -18,7 +18,9 @@ function transformStyle(
 	if ( ! wrapperSelector && ! baseURL ) {
 		return css;
 	}
-	const postcssFriendlyCSS = css.replace( /:where\(body\)/g, 'body' );
+	const postcssFriendlyCSS = css
+		.replace( /:root :where\(body\)/g, 'body' )
+		.replace( /:where\(body\)/g, 'body' );
 	try {
 		return postcss(
 			[