@wordpress/block-editor 14.3.3 → 14.4.0

package/build-module/store/selectors.js

@@ -12,11 +12,11 @@ import { createSelector, createRegistrySelector } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { withRootClientIdOptionKey, checkAllowListRecursive, checkAllowList, getAllPatternsDependants, getInsertBlockTypeDependants, getParsedPattern, getGrammar } from './utils';
+import { isFiltered, checkAllowListRecursive, checkAllowList, getAllPatternsDependants, getInsertBlockTypeDependants, getParsedPattern, getGrammar } from './utils';
 import { orderBy } from '../utils/sorting';
 import { STORE_NAME } from './constants';
 import { unlock } from '../lock-unlock';
-import { getContentLockingParent, getTemporarilyEditingAsBlocks, getTemporarilyEditingFocusModeToRevert, getSectionRootClientId } from './private-selectors';
+import { getContentLockingParent, getTemporarilyEditingAsBlocks, getTemporarilyEditingFocusModeToRevert, getSectionRootClientId, isSectionBlock, getParentSectionBlock } from './private-selectors';
 
 /**
  * A block selection object.
@@ -55,7 +55,9 @@ const EMPTY_ARRAY = [];
  * @type {Set}
  */
 const EMPTY_SET = new Set();
-const EMPTY_OBJECT = {};
+const DEFAULT_INSERTER_OPTIONS = {
+  [isFiltered]: true
+};
 
 /**
  * Returns a block's name given its client ID, or null if no block exists with
@@ -1255,8 +1257,7 @@ export function isCaretWithinFormattedText() {
 }
 
 /**
- * Returns the insertion point, the index at which the new inserted block would
- * be placed. Defaults to the last index.
+ * Returns the location of the insertion cue. Defaults to the last index.
  *
  * @param {Object} state Editor state.
  *
@@ -1265,13 +1266,13 @@ export function isCaretWithinFormattedText() {
 export const getBlockInsertionPoint = createSelector(state => {
   let rootClientId, index;
   const {
-    insertionPoint,
+    insertionCue,
     selection: {
       selectionEnd
     }
   } = state;
-  if (insertionPoint !== null) {
-    return insertionPoint;
+  if (insertionCue !== null) {
+    return insertionCue;
   }
   const {
     clientId
@@ -1286,17 +1287,17 @@ export const getBlockInsertionPoint = createSelector(state => {
     rootClientId,
     index
   };
-}, state => [state.insertionPoint, state.selection.selectionEnd.clientId, state.blocks.parents, state.blocks.order]);
+}, state => [state.insertionCue, state.selection.selectionEnd.clientId, state.blocks.parents, state.blocks.order]);
 
 /**
- * Returns true if we should show the block insertion point.
+ * Returns true if the block insertion point is visible.
  *
  * @param {Object} state Global application state.
  *
  * @return {?boolean} Whether the insertion point is visible or not.
  */
 export function isBlockInsertionPointVisible(state) {
-  return state.insertionPoint !== null;
+  return state.insertionCue !== null;
 }
 
 /**
@@ -1338,6 +1339,52 @@ export function getTemplateLock(state, rootClientId) {
   return (_getBlockListSettings = getBlockListSettings(state, rootClientId)?.templateLock) !== null && _getBlockListSettings !== void 0 ? _getBlockListSettings : false;
 }
 
+/**
+ * Determines if the given block type is visible in the inserter.
+ * Note that this is different than whether a block is allowed to be inserted.
+ * In some cases, the block is not allowed in a given position but
+ * it should still be visible in the inserter to be able to add it
+ * to a different position.
+ *
+ * @param {Object}        state           Editor state.
+ * @param {string|Object} blockNameOrType The block type object, e.g., the response
+ *                                        from the block directory; or a string name of
+ *                                        an installed block type, e.g.' core/paragraph'.
+ *
+ * @return {boolean} Whether the given block type is allowed to be inserted.
+ */
+const isBlockVisibleInTheInserter = (state, blockNameOrType) => {
+  let blockType;
+  let blockName;
+  if (blockNameOrType && 'object' === typeof blockNameOrType) {
+    blockType = blockNameOrType;
+    blockName = blockNameOrType.name;
+  } else {
+    blockType = getBlockType(blockNameOrType);
+    blockName = blockNameOrType;
+  }
+  if (!blockType) {
+    return false;
+  }
+  const {
+    allowedBlockTypes
+  } = getSettings(state);
+  const isBlockAllowedInEditor = checkAllowList(allowedBlockTypes, blockName, true);
+  if (!isBlockAllowedInEditor) {
+    return false;
+  }
+
+  // If parent blocks are not visible, child blocks should be hidden too.
+  if (!!blockType.parent?.length) {
+    return blockType.parent.some(name => isBlockVisibleInTheInserter(state, name) ||
+    // Exception for blocks with post-content parent,
+    // the root level is often consider as "core/post-content".
+    // This exception should only apply to the post editor ideally though.
+    name === 'core/post-content');
+  }
+  return true;
+};
+
 /**
  * Determines if the given block type is allowed to be inserted into the block list.
  * This function is not exported and not memoized because using a memoized selector
@@ -1352,6 +1399,9 @@ export function getTemplateLock(state, rootClientId) {
  * @return {boolean} Whether the given block type is allowed to be inserted.
  */
 const canInsertBlockTypeUnmemoized = (state, blockName, rootClientId = null) => {
+  if (!isBlockVisibleInTheInserter(state, blockName)) {
+    return false;
+  }
   let blockType;
   if (blockName && 'object' === typeof blockName) {
     blockType = blockName;
@@ -1359,20 +1409,14 @@ const canInsertBlockTypeUnmemoized = (state, blockName, rootClientId = null) =>
   } else {
     blockType = getBlockType(blockName);
   }
-  if (!blockType) {
-    return false;
-  }
-  const {
-    allowedBlockTypes
-  } = getSettings(state);
-  const isBlockAllowedInEditor = checkAllowList(allowedBlockTypes, blockName, true);
-  if (!isBlockAllowedInEditor) {
-    return false;
-  }
   const isLocked = !!getTemplateLock(state, rootClientId);
   if (isLocked) {
     return false;
   }
+  const _isSectionBlock = !!isSectionBlock(state, rootClientId);
+  if (_isSectionBlock) {
+    return false;
+  }
   if (getBlockEditingMode(state, rootClientId !== null && rootClientId !== void 0 ? rootClientId : '') === 'disabled') {
     return false;
   }
@@ -1478,6 +1522,10 @@ export function canRemoveBlock(state, clientId) {
   if (getTemplateLock(state, rootClientId)) {
     return false;
   }
+  const isBlockWithinSection = !!getParentSectionBlock(state, clientId);
+  if (isBlockWithinSection) {
+    return false;
+  }
   return getBlockEditingMode(state, rootClientId) !== 'disabled';
 }
 
@@ -1701,6 +1749,7 @@ const buildBlockTypeItem = (state, {
     description: blockType.description,
     category: blockType.category,
     keywords: blockType.keywords,
+    parent: blockType.parent,
     variations: inserterVariations,
     example: blockType.example,
     utility: 1 // Deprecated.
@@ -1736,7 +1785,7 @@ const buildBlockTypeItem = (state, {
  *                                        this item.
  * @property {number}   frecency          Heuristic that combines frequency and recency.
  */
-export const getInserterItems = createRegistrySelector(select => createSelector((state, rootClientId = null, options = EMPTY_OBJECT) => {
+export const getInserterItems = createRegistrySelector(select => createSelector((state, rootClientId = null, options = DEFAULT_INSERTER_OPTIONS) => {
   const buildReusableBlockInserterItem = reusableBlock => {
     const icon = !reusableBlock.wp_pattern_sync_status ? {
       src: symbol,
@@ -1771,35 +1820,13 @@ export const getInserterItems = createRegistrySelector(select => createSelector(
     buildScope: 'inserter'
   });
   let blockTypeInserterItems = getBlockTypes().filter(blockType => hasBlockSupport(blockType, 'inserter', true)).map(buildBlockTypeInserterItem);
-  if (options[withRootClientIdOptionKey]) {
-    blockTypeInserterItems = blockTypeInserterItems.reduce((accumulator, item) => {
-      item.rootClientId = rootClientId !== null && rootClientId !== void 0 ? rootClientId : '';
-      while (!canInsertBlockTypeUnmemoized(state, item.name, item.rootClientId)) {
-        if (!item.rootClientId) {
-          let sectionRootClientId;
-          try {
-            sectionRootClientId = getSectionRootClientId(state);
-          } 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 {
+  if (options[isFiltered] !== false) {
     blockTypeInserterItems = blockTypeInserterItems.filter(blockType => canIncludeBlockTypeInInserter(state, blockType, rootClientId));
+  } else {
+    blockTypeInserterItems = blockTypeInserterItems.filter(blockType => isBlockVisibleInTheInserter(state, blockType)).map(blockType => ({
+      ...blockType,
+      isAllowedInCurrentRoot: canIncludeBlockTypeInInserter(state, blockType, rootClientId)
+    }));
   }
   const items = blockTypeInserterItems.reduce((accumulator, item) => {
     const {
@@ -1980,7 +2007,7 @@ const getAllowedPatternsDependants = select => (state, rootClientId) => [...getA
  * @return {Array?} The list of allowed patterns.
  */
 export const __experimentalGetAllowedPatterns = createRegistrySelector(select => {
-  return createSelector((state, rootClientId = null) => {
+  return createSelector((state, rootClientId = null, options = DEFAULT_INSERTER_OPTIONS) => {
     const {
       getAllPatterns
     } = unlock(select(STORE_NAME));
@@ -2001,7 +2028,7 @@ export const __experimentalGetAllowedPatterns = createRegistrySelector(select =>
     const availableParsedPatterns = parsedPatterns.filter(pattern => checkAllowListRecursive(getGrammar(pattern), allowedBlockTypes));
     const patternsAllowed = availableParsedPatterns.filter(pattern => getGrammar(pattern).every(({
       blockName: name
-    }) => canInsertBlockType(state, name, rootClientId)));
+    }) => options[isFiltered] !== false ? canInsertBlockType(state, name, rootClientId) : isBlockVisibleInTheInserter(state, name)));
     return patternsAllowed;
   }, getAllowedPatternsDependants(select));
 });
@@ -2221,12 +2248,14 @@ export function __unstableGetEditorMode(state) {
 /**
  * Returns whether block moving mode is enabled.
  *
- * @param {Object} state Editor state.
- *
- * @return {string} Client Id of moving block.
+ * @deprecated
  */
-export function hasBlockMovingClientId(state) {
-  return state.hasBlockMovingClientId;
+export function hasBlockMovingClientId() {
+  deprecated('wp.data.select( "core/block-editor" ).hasBlockMovingClientId', {
+    since: '6.7',
+    hint: 'Block moving mode feature has been removed'
+  });
+  return false;
 }
 
 /**
@@ -2377,7 +2406,7 @@ export function __unstableHasActiveBlockOverlayActive(state, clientId) {
   // (reusable block, template part, navigation), unless explicitly disabled
   // with `supports.__experimentalDisableBlockOverlay`.
   const blockSupportDisable = hasBlockSupport(getBlockName(state, clientId), '__experimentalDisableBlockOverlay', false);
-  const shouldEnableIfUnselected = editorMode === 'navigation' || (blockSupportDisable ? false : areInnerBlocksControlled(state, clientId));
+  const shouldEnableIfUnselected = blockSupportDisable ? false : areInnerBlocksControlled(state, clientId);
   return shouldEnableIfUnselected && !isBlockSelected(state, clientId) && !hasSelectedInnerBlock(state, clientId, true);
 }
 export function __unstableIsWithinBlockOverlay(state, clientId) {
@@ -2390,6 +2419,13 @@ export function __unstableIsWithinBlockOverlay(state, clientId) {
   }
   return false;
 }
+function isWithinBlock(state, clientId, parentClientId) {
+  let parent = state.blocks.parents.get(clientId);
+  while (!!parent && parent !== parentClientId) {
+    parent = state.blocks.parents.get(parent);
+  }
+  return parent === parentClientId;
+}
 
 /**
  * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode
@@ -2450,15 +2486,49 @@ export const getBlockEditingMode = createRegistrySelector(select => (state, clie
     }
     return 'disabled';
   }
+  if (editorMode === 'navigation') {
+    const sectionRootClientId = getSectionRootClientId(state);
+
+    // The root section is "default mode"
+    if (clientId === sectionRootClientId) {
+      return 'default';
+    }
+
+    // Sections should always be contentOnly in navigation mode.
+    const sectionsClientIds = getBlockOrder(state, sectionRootClientId);
+    if (sectionsClientIds.includes(clientId)) {
+      return 'contentOnly';
+    }
+
+    // Blocks outside sections should be disabled.
+    const isWithinSectionRoot = isWithinBlock(state, clientId, sectionRootClientId);
+    if (!isWithinSectionRoot) {
+      return 'disabled';
+    }
+
+    // The rest of the blocks depend on whether they are content blocks or not.
+    // This "flattens" the sections tree.
+    const name = getBlockName(state, clientId);
+    const {
+      hasContentRoleAttribute
+    } = unlock(select(blocksStore));
+    const isContent = hasContentRoleAttribute(name);
+    return isContent ? 'contentOnly' : 'disabled';
+  }
+
+  // In normal mode, consider that an explicitely set editing mode takes over.
   const blockEditingMode = state.blockEditingModes.get(clientId);
   if (blockEditingMode) {
     return blockEditingMode;
   }
+
+  // In normal mode, top level is default mode.
   if (!clientId) {
     return 'default';
   }
   const rootClientId = getBlockRootClientId(state, clientId);
   const templateLock = getTemplateLock(state, rootClientId);
+  // If the parent of the block is contentOnly locked, check whether it's a content block.
   if (templateLock === 'contentOnly') {
     const name = getBlockName(state, clientId);
     const {
@@ -2467,6 +2537,7 @@ export const getBlockEditingMode = createRegistrySelector(select => (state, clie
     const isContent = hasContentRoleAttribute(name);
     return isContent ? 'contentOnly' : 'disabled';
   }
+  // Otherwise, check if there's an ancestor that is contentOnly
   const parentMode = getBlockEditingMode(state, rootClientId);
   return parentMode === 'contentOnly' ? 'default' : parentMode;
 });