@wordpress/block-editor 7.0.1 → 8.0.0

package/build-module/store/selectors.js

@@ -7,7 +7,7 @@ import createSelector from 'rememo';
  * WordPress dependencies
  */
 
-import { getBlockType, getBlockTypes, hasBlockSupport, getPossibleBlockTransformations, parse } from '@wordpress/blocks';
+import { getBlockType, getBlockTypes, getBlockVariations, hasBlockSupport, getPossibleBlockTransformations, parse } from '@wordpress/blocks';
 import { Platform } from '@wordpress/element';
 import { symbol } from '@wordpress/icons';
 /**
@@ -114,23 +114,15 @@ export function getBlockAttributes(state, clientId) {
  * @return {Object} Parsed block object.
  */
 
-export const getBlock = createSelector((state, clientId) => {
+export function getBlock(state, clientId) {
   const block = state.blocks.byClientId[clientId];
 
   if (!block) {
     return null;
   }
 
-  return { ...block,
-    attributes: getBlockAttributes(state, clientId),
-    innerBlocks: areInnerBlocksControlled(state, clientId) ? EMPTY_ARRAY : getBlocks(state, clientId)
-  };
-}, (state, clientId) => [// Normally, we'd have both `getBlockAttributes` dependencies and
-// `getBlocks` (children) dependencies here but for performance reasons
-// we use a denormalized cache key computed in the reducer that takes both
-// the attributes and inner blocks into account. The value of the cache key
-// is being changed whenever one of these dependencies is out of date.
-state.blocks.cache[clientId]]);
+  return state.blocks.tree[clientId];
+}
 export const __unstableGetBlockWithoutInnerBlocks = createSelector((state, clientId) => {
   const block = state.blocks.byClientId[clientId];
 
@@ -147,56 +139,18 @@ export const __unstableGetBlockWithoutInnerBlocks = createSelector((state, clien
  * the order they appear in the post. Note that this will exclude child blocks
  * of nested inner block controllers.
  *
- * Note: It's important to memoize this selector to avoid return a new instance
- * on each call. We use the block cache state for each top-level block of the
- * given clientID. This way, the selector only refreshes on changes to blocks
- * associated with the given entity, and does not refresh when changes are made
- * to blocks which are part of different inner block controllers.
- *
  * @param {Object}  state        Editor state.
  * @param {?string} rootClientId Optional root client ID of block list.
  *
  * @return {Object[]} Post blocks.
  */
 
-export const getBlocks = createSelector((state, rootClientId) => {
-  return map(getBlockOrder(state, rootClientId), clientId => getBlock(state, clientId));
-}, (state, rootClientId) => map(state.blocks.order[rootClientId || ''], id => state.blocks.cache[id]));
-/**
- * Similar to getBlock, except it will include the entire nested block tree as
- * inner blocks. The normal getBlock selector will exclude sections of the block
- * tree which belong to different entities.
- *
- * @param {Object} state    Editor state.
- * @param {string} clientId Client ID of the block to get.
- *
- * @return {Object} The block with all
- */
-
-export const __unstableGetBlockWithBlockTree = createSelector((state, clientId) => {
-  const block = state.blocks.byClientId[clientId];
-
-  if (!block) {
-    return null;
-  }
-
-  return { ...block,
-    attributes: getBlockAttributes(state, clientId),
-    innerBlocks: __unstableGetBlockTree(state, clientId)
-  };
-}, state => [state.blocks.byClientId, state.blocks.order, state.blocks.attributes]);
-/**
- * Similar to getBlocks, except this selector returns the entire block tree
- * represented in the block-editor store from the given root regardless of any
- * inner block controllers.
- *
- * @param {Object}  state        Editor state.
- * @param {?string} rootClientId Optional root client ID of block list.
- *
- * @return {Object[]} Post blocks.
- */
+export function getBlocks(state, rootClientId) {
+  var _state$blocks$tree$tr;
 
-export const __unstableGetBlockTree = createSelector((state, rootClientId = '') => map(getBlockOrder(state, rootClientId), clientId => __unstableGetBlockWithBlockTree(state, clientId)), state => [state.blocks.byClientId, state.blocks.order, state.blocks.attributes]);
+  const treeKey = !rootClientId || !areInnerBlocksControlled(state, rootClientId) ? rootClientId || '' : 'controlled||' + rootClientId;
+  return ((_state$blocks$tree$tr = state.blocks.tree[treeKey]) === null || _state$blocks$tree$tr === void 0 ? void 0 : _state$blocks$tree$tr.innerBlocks) || EMPTY_ARRAY;
+}
 /**
  * Returns a stripped down block object containing only its client ID,
  * and its inner blocks' client IDs.
@@ -282,7 +236,7 @@ export const getGlobalBlockCount = createSelector((state, blockName) => {
  * @return {WPBlock[]} Block objects.
  */
 
-export const getBlocksByClientId = createSelector((state, clientIds) => map(castArray(clientIds), clientId => getBlock(state, clientId)), state => [state.blocks.byClientId, state.blocks.order, state.blocks.attributes]);
+export const getBlocksByClientId = createSelector((state, clientIds) => map(castArray(clientIds), clientId => getBlock(state, clientId)), (state, clientIds) => map(castArray(clientIds), clientId => state.blocks.tree[clientId]));
 /**
  * Returns the number of blocks currently present in the post.
  *
@@ -618,6 +572,8 @@ export function getPreviousBlockClientId(state, startClientId) {
 export function getNextBlockClientId(state, startClientId) {
   return getAdjacentBlockClientId(state, startClientId, 1);
 }
+/* eslint-disable jsdoc/valid-types */
+
 /**
  * Returns the initial caret position for the selected block.
  * This position is to used to position the caret properly when the selected block changes.
@@ -629,6 +585,7 @@ export function getNextBlockClientId(state, startClientId) {
  */
 
 export function getSelectedBlocksInitialCaretPosition(state) {
+  /* eslint-enable jsdoc/valid-types */
   return state.initialPosition;
 }
 /**
@@ -1259,6 +1216,90 @@ export const canInsertBlockType = createSelector(canInsertBlockTypeUnmemoized, (
 export function canInsertBlocks(state, clientIds, rootClientId = null) {
   return clientIds.every(id => canInsertBlockType(state, getBlockName(state, id), rootClientId));
 }
+/**
+ * Determines if the given block is allowed to be deleted.
+ *
+ * @param {Object}  state        Editor state.
+ * @param {string}  clientId     The block client Id.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {boolean} Whether the given block is allowed to be removed.
+ */
+
+export function canRemoveBlock(state, clientId, rootClientId = null) {
+  const attributes = getBlockAttributes(state, clientId); // attributes can be null if the block is already deleted.
+
+  if (attributes === null) {
+    return true;
+  }
+
+  const {
+    lock
+  } = attributes;
+  const parentIsLocked = !!getTemplateLock(state, rootClientId); // If we don't have a lock on the blockType level, we differ to the parent templateLock.
+
+  if (lock === undefined || (lock === null || lock === void 0 ? void 0 : lock.remove) === undefined) {
+    return !parentIsLocked;
+  } // when remove is true, it means we cannot remove it.
+
+
+  return !(lock !== null && lock !== void 0 && lock.remove);
+}
+/**
+ * Determines if the given blocks are allowed to be removed.
+ *
+ * @param {Object}  state        Editor state.
+ * @param {string}  clientIds    The block client IDs to be removed.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {boolean} Whether the given blocks are allowed to be removed.
+ */
+
+export function canRemoveBlocks(state, clientIds, rootClientId = null) {
+  return clientIds.every(clientId => canRemoveBlock(state, clientId, rootClientId));
+}
+/**
+ * Determines if the given block is allowed to be moved.
+ *
+ * @param {Object}  state        Editor state.
+ * @param {string}  clientId     The block client Id.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {boolean} Whether the given block is allowed to be moved.
+ */
+
+export function canMoveBlock(state, clientId, rootClientId = null) {
+  const attributes = getBlockAttributes(state, clientId);
+
+  if (attributes === null) {
+    return;
+  }
+
+  const {
+    lock
+  } = attributes;
+  const parentIsLocked = getTemplateLock(state, rootClientId) === 'all'; // If we don't have a lock on the blockType level, we differ to the parent templateLock.
+
+  if (lock === undefined || (lock === null || lock === void 0 ? void 0 : lock.move) === undefined) {
+    return !parentIsLocked;
+  } // when move is true, it means we cannot move it.
+
+
+  return !(lock !== null && lock !== void 0 && lock.move);
+}
+/**
+ * Determines if the given blocks are allowed to be moved.
+ *
+ * @param {Object}  state        Editor state.
+ * @param {string}  clientIds    The block client IDs to be moved.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {boolean} Whether the given blocks are allowed to be moved.
+ */
+
+export function canMoveBlocks(state, clientIds, rootClientId = null) {
+  return clientIds.every(clientId => canMoveBlock(state, clientId, rootClientId));
+}
 /**
  * Returns information about how recently and frequently a block has been inserted.
  *
@@ -1397,9 +1438,7 @@ const buildBlockTypeItem = (state, {
     frecency: calculateFrecency(time, count)
   };
   if (buildScope === 'transform') return blockItemBase;
-  const inserterVariations = blockType.variations.filter(({
-    scope
-  }) => !scope || scope.includes('inserter'));
+  const inserterVariations = getBlockVariations(blockType.name, 'inserter');
   return { ...blockItemBase,
     initialAttributes: {},
     description: blockType.description,
@@ -1446,18 +1485,48 @@ export const getInserterItems = createSelector((state, rootClientId = null) => {
   const buildBlockTypeInserterItem = buildBlockTypeItem(state, {
     buildScope: 'inserter'
   });
+  /*
+   * Matches block comment delimiters amid serialized content.
+   *
+   * @see `tokenizer` in `@wordpress/block-serialization-default-parser`
+   * package
+   *
+   * blockParserTokenizer differs from the original tokenizer in the
+   * following ways:
+   *
+   * - removed global flag (/g)
+   * - prepended ^\s*
+   *
+   */
 
-  const buildReusableBlockInserterItem = reusableBlock => {
-    const id = `core/block/${reusableBlock.id}`;
-
-    const referencedBlocks = __experimentalGetParsedReusableBlock(state, reusableBlock.id);
-
-    let referencedBlockType;
+  const blockParserTokenizer = /^\s*<!--\s+(\/)?wp:([a-z][a-z0-9_-]*\/)?([a-z][a-z0-9_-]*)\s+({(?:(?=([^}]+|}+(?=})|(?!}\s+\/?-->)[^])*)\5|[^]*?)}\s+)?(\/)?-->/;
 
-    if (referencedBlocks.length === 1) {
-      referencedBlockType = getBlockType(referencedBlocks[0].name);
+  const buildReusableBlockInserterItem = reusableBlock => {
+    let icon = symbol;
+    /*
+     * Instead of always displaying a generic "symbol" icon for every
+     * reusable block, try to use an icon that represents the first
+     * outermost block contained in the reusable block. This requires
+     * scanning the serialized form of the reusable block to find its
+     * first block delimiter, then looking up the corresponding block
+     * type, if available.
+     */
+
+    if (Platform.OS === 'web') {
+      const content = typeof reusableBlock.content.raw === 'string' ? reusableBlock.content.raw : reusableBlock.content;
+      const rawBlockMatch = content.match(blockParserTokenizer);
+
+      if (rawBlockMatch) {
+        const [,, namespace = 'core/', blockName] = rawBlockMatch;
+        const referencedBlockType = getBlockType(namespace + blockName);
+
+        if (referencedBlockType) {
+          icon = referencedBlockType.icon;
+        }
+      }
     }
 
+    const id = `core/block/${reusableBlock.id}`;
     const {
       time,
       count = 0
@@ -1470,7 +1539,7 @@ export const getInserterItems = createSelector((state, rootClientId = null) => {
         ref: reusableBlock.id
       },
       title: reusableBlock.title.raw,
-      icon: referencedBlockType ? referencedBlockType.icon : symbol,
+      icon,
       category: 'reusable',
       keywords: [],
       isDisabled: false,
@@ -1500,27 +1569,32 @@ export const getInserterItems = createSelector((state, rootClientId = null) => {
       const variationMapper = getItemFromVariation(state, item);
       blockVariations.push(...variations.map(variationMapper));
     }
-  } // Prioritize core blocks's display in inserter.
-
-
-  const prioritizeCoreBlocks = (a, b) => {
-    const coreBlockNamePrefix = 'core/';
-    const firstIsCoreBlock = a.name.startsWith(coreBlockNamePrefix);
-    const secondIsCoreBlock = b.name.startsWith(coreBlockNamePrefix);
-
-    if (firstIsCoreBlock && secondIsCoreBlock) {
-      return 0;
-    }
-
-    return firstIsCoreBlock && !secondIsCoreBlock ? -1 : 1;
-  }; // Ensure core blocks are prioritized in the returned results,
+  } // Ensure core blocks are prioritized in the returned results,
   // because third party blocks can be registered earlier than
   // the core blocks (usually by using the `init` action),
   // thus affecting the display order.
   // We don't sort reusable blocks as they are handled differently.
 
 
-  const sortedBlockTypes = [...visibleBlockTypeInserterItems, ...blockVariations].sort(prioritizeCoreBlocks);
+  const groupByType = (blocks, block) => {
+    const {
+      core,
+      noncore
+    } = blocks;
+    const type = block.name.startsWith('core/') ? core : noncore;
+    type.push(block);
+    return blocks;
+  };
+
+  const items = visibleBlockTypeInserterItems.reduce(groupByType, {
+    core: [],
+    noncore: []
+  });
+  const variations = blockVariations.reduce(groupByType, {
+    core: [],
+    noncore: []
+  });
+  const sortedBlockTypes = [...items.core, ...variations.core, ...items.noncore, ...variations.noncore];
   return [...sortedBlockTypes, ...reusableBlockInserterItems];
 }, (state, rootClientId) => [state.blockListSettings[rootClientId], state.blocks.byClientId, state.blocks.order, state.preferences.insertUsage, state.settings.allowedBlockTypes, state.settings.templateLock, getReusableBlocks(state), getBlockTypes()]);
 /**
@@ -1602,6 +1676,35 @@ export const __experimentalGetAllowedBlocks = createSelector((state, rootClientI
 
   return filter(getBlockTypes(), blockType => canIncludeBlockTypeInInserter(state, blockType, rootClientId));
 }, (state, rootClientId) => [state.blockListSettings[rootClientId], state.blocks.byClientId, state.settings.allowedBlockTypes, state.settings.templateLock, getBlockTypes()]);
+/**
+ * Returns the block to be directly inserted by the block appender.
+ *
+ * @param {Object}  state        Editor state.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {?Array} The block type to be directly inserted.
+ */
+
+export const __experimentalGetDirectInsertBlock = createSelector((state, rootClientId = null) => {
+  var _state$blockListSetti, _state$blockListSetti2;
+
+  if (!rootClientId) {
+    return;
+  }
+
+  const defaultBlock = (_state$blockListSetti = state.blockListSettings[rootClientId]) === null || _state$blockListSetti === void 0 ? void 0 : _state$blockListSetti.__experimentalDefaultBlock;
+  const directInsert = (_state$blockListSetti2 = state.blockListSettings[rootClientId]) === null || _state$blockListSetti2 === void 0 ? void 0 : _state$blockListSetti2.__experimentalDirectInsert;
+
+  if (!defaultBlock || !directInsert) {
+    return;
+  }
+
+  if (typeof directInsert === 'function') {
+    return directInsert(getBlock(state, rootClientId)) ? defaultBlock : null;
+  }
+
+  return defaultBlock;
+}, (state, rootClientId) => [state.blockListSettings[rootClientId], state.blocks.tree[rootClientId]]);
 
 const checkAllowListRecursive = (blocks, allowedBlockTypes) => {
   if (isBoolean(allowedBlockTypes)) {
@@ -1647,7 +1750,9 @@ const getAllAllowedPatterns = createSelector(state => {
   const {
     allowedBlockTypes
   } = getSettings(state);
-  const parsedPatterns = patterns.map(({
+  const parsedPatterns = patterns.filter(({
+    inserter = true
+  }) => !!inserter).map(({
     name
   }) => __experimentalGetParsedPattern(state, name));
   const allowedPatterns = parsedPatterns.filter(({
@@ -1804,26 +1909,6 @@ export const __experimentalGetBlockListSettingsForBlocks = createSelector((state
     };
   }, {});
 }, state => [state.blockListSettings]);
-/**
- * Returns the parsed block saved as shared block with the given ID.
- *
- * @param {Object}        state Global application state.
- * @param {number|string} ref   The shared block's ID.
- *
- * @return {Object} The parsed block.
- */
-
-export const __experimentalGetParsedReusableBlock = createSelector((state, ref) => {
-  const reusableBlock = find(getReusableBlocks(state), block => block.id === ref);
-
-  if (!reusableBlock) {
-    return null;
-  } // Only reusableBlock.content.raw should be used here, `reusableBlock.content` is a
-  // workaround until #22127 is fixed.
-
-
-  return parse(typeof reusableBlock.content.raw === 'string' ? reusableBlock.content.raw : reusableBlock.content);
-}, state => [getReusableBlocks(state)]);
 /**
  * Returns the title of a given reusable block
  *