@wordpress/block-editor 7.0.1 → 8.0.0

package/build/store/reducer.js

@@ -222,24 +222,79 @@ function hasSameKeys(a, b) {
 function isUpdatingSameBlockAttribute(action, lastAction) {
   return action.type === 'UPDATE_BLOCK_ATTRIBUTES' && lastAction !== undefined && lastAction.type === 'UPDATE_BLOCK_ATTRIBUTES' && (0, _lodash.isEqual)(action.clientIds, lastAction.clientIds) && hasSameKeys(action.attributes, lastAction.attributes);
 }
-/**
- * Utility returning an object with an empty object value for each key.
- *
- * @param {Array} objectKeys Keys to fill.
- * @return {Object} Object filled with empty object as values for each clientId.
- */
 
+function buildBlockTree(state, blocks) {
+  const result = {};
+  const stack = [...blocks];
+  const flattenedBlocks = [...blocks];
 
-const fillKeysWithEmptyObject = objectKeys => {
-  return objectKeys.reduce((result, key) => {
-    result[key] = {};
-    return result;
-  }, {});
-};
+  while (stack.length) {
+    const block = stack.shift();
+    stack.push(...block.innerBlocks);
+    flattenedBlocks.push(...block.innerBlocks);
+  } // Create objects before mutating them, that way it's always defined.
+
+
+  for (const block of flattenedBlocks) {
+    result[block.clientId] = {};
+  }
+
+  for (const block of flattenedBlocks) {
+    result[block.clientId] = Object.assign(result[block.clientId], { ...state.byClientId[block.clientId],
+      attributes: state.attributes[block.clientId],
+      innerBlocks: block.innerBlocks.map(subBlock => result[subBlock.clientId])
+    });
+  }
+
+  return result;
+}
+
+function updateParentInnerBlocksInTree(state, tree, updatedClientIds, updateChildrenOfUpdatedClientIds = false) {
+  const uncontrolledParents = new Set([]);
+  const controlledParents = new Set();
+
+  for (const clientId of updatedClientIds) {
+    let current = updateChildrenOfUpdatedClientIds ? clientId : state.parents[clientId];
+
+    do {
+      if (state.controlledInnerBlocks[current]) {
+        // Should stop on controlled blocks.
+        // If we reach a controlled parent, break out of the loop.
+        controlledParents.add(current);
+        break;
+      } else {
+        // else continue traversing up through parents.
+        uncontrolledParents.add(current);
+        current = state.parents[current];
+      }
+    } while (current !== undefined);
+  } // To make sure the order of assignments doesn't matter,
+  // we first create empty objects and mutates the inner blocks later.
+
+
+  for (const clientId of uncontrolledParents) {
+    tree[clientId] = { ...tree[clientId]
+    };
+  }
+
+  for (const clientId of uncontrolledParents) {
+    tree[clientId].innerBlocks = (state.order[clientId] || []).map(subClientId => tree[subClientId]);
+  } // Controlled parent blocks, need a dedicated key for their inner blocks
+  // to be used when doing getBlocks( controlledBlockClientId ).
+
+
+  for (const clientId of controlledParents) {
+    tree['controlled||' + clientId] = {
+      innerBlocks: (state.order[clientId] || []).map(subClientId => tree[subClientId])
+    };
+  }
+
+  return tree;
+}
 /**
- * Higher-order reducer intended to compute a cache key for each block in the post.
- * A new instance of the cache key (empty object) is created each time the block object
- * needs to be refreshed (for any change in the block or its children).
+ * Higher-order reducer intended to compute full block objects key for each block in the post.
+ * This is a denormalization to optimize the performance of the getBlock selectors and avoid
+ * recomputing the block objects and avoid heavy memoization.
  *
  * @param {Function} reducer Original reducer function.
  *
@@ -247,88 +302,83 @@ const fillKeysWithEmptyObject = objectKeys => {
  */
 
 
-const withBlockCache = reducer => (state = {}, action) => {
+const withBlockTree = reducer => (state = {}, action) => {
   const newState = reducer(state, action);
 
   if (newState === state) {
     return state;
   }
 
-  newState.cache = state.cache ? state.cache : {};
-  /**
-   * For each clientId provided, traverses up parents, adding the provided clientIds
-   * and each parent's clientId to the returned array.
-   *
-   * When calling this function consider that it uses the old state, so any state
-   * modifications made by the `reducer` will not be present.
-   *
-   * @param {Array} clientIds an Array of block clientIds.
-   *
-   * @return {Array} The provided clientIds and all of their parent clientIds.
-   */
-
-  const getBlocksWithParentsClientIds = clientIds => {
-    return clientIds.reduce((result, clientId) => {
-      let current = clientId;
-
-      do {
-        result.push(current);
-        current = state.parents[current];
-      } while (current && !state.controlledInnerBlocks[current]);
-
-      return result;
-    }, []);
-  };
+  newState.tree = state.tree ? state.tree : {};
 
   switch (action.type) {
-    case 'RESET_BLOCKS':
-      newState.cache = (0, _lodash.mapValues)(flattenBlocks(action.blocks), () => ({}));
-      break;
-
     case 'RECEIVE_BLOCKS':
     case 'INSERT_BLOCKS':
       {
-        const updatedBlockUids = (0, _lodash.keys)(flattenBlocks(action.blocks));
-
-        if (action.rootClientId && !state.controlledInnerBlocks[action.rootClientId]) {
-          updatedBlockUids.push(action.rootClientId);
-        }
-
-        newState.cache = { ...newState.cache,
-          ...fillKeysWithEmptyObject(getBlocksWithParentsClientIds(updatedBlockUids))
-        };
+        const subTree = buildBlockTree(newState, action.blocks);
+        newState.tree = updateParentInnerBlocksInTree(newState, { ...newState.tree,
+          ...subTree
+        }, action.rootClientId ? [action.rootClientId] : [''], true);
         break;
       }
 
     case 'UPDATE_BLOCK':
-      newState.cache = { ...newState.cache,
-        ...fillKeysWithEmptyObject(getBlocksWithParentsClientIds([action.clientId]))
-      };
+      newState.tree = updateParentInnerBlocksInTree(newState, { ...newState.tree,
+        [action.clientId]: { ...newState.tree[action.clientId],
+          ...newState.byClientId[action.clientId],
+          attributes: newState.attributes[action.clientId]
+        }
+      }, [action.clientId], false);
       break;
 
     case 'UPDATE_BLOCK_ATTRIBUTES':
-      newState.cache = { ...newState.cache,
-        ...fillKeysWithEmptyObject(getBlocksWithParentsClientIds(action.clientIds))
-      };
-      break;
+      {
+        const newSubTree = action.clientIds.reduce((result, clientId) => {
+          result[clientId] = { ...newState.tree[clientId],
+            attributes: newState.attributes[clientId]
+          };
+          return result;
+        }, {});
+        newState.tree = updateParentInnerBlocksInTree(newState, { ...newState.tree,
+          ...newSubTree
+        }, action.clientIds, false);
+        break;
+      }
 
     case 'REPLACE_BLOCKS_AUGMENTED_WITH_CHILDREN':
-      const parentClientIds = fillKeysWithEmptyObject(getBlocksWithParentsClientIds(action.replacedClientIds));
-      newState.cache = { ...(0, _lodash.omit)(newState.cache, action.replacedClientIds),
-        ...(0, _lodash.omit)(parentClientIds, action.replacedClientIds),
-        ...fillKeysWithEmptyObject((0, _lodash.keys)(flattenBlocks(action.blocks)))
-      };
-      break;
+      {
+        const subTree = buildBlockTree(newState, action.blocks);
+        newState.tree = updateParentInnerBlocksInTree(newState, { ...(0, _lodash.omit)(newState.tree, action.replacedClientIds.concat(action.replacedClientIds.map(clientId => 'controlled||' + clientId))),
+          ...subTree
+        }, action.blocks.map(b => b.clientId), false); // If there are no replaced blocks, it means we're removing blocks so we need to update their parent.
+
+        const parentsOfRemovedBlocks = [];
+
+        for (const clientId of action.clientIds) {
+          if (state.parents[clientId] !== undefined && (state.parents[clientId] === '' || newState.byClientId[state.parents[clientId]])) {
+            parentsOfRemovedBlocks.push(state.parents[clientId]);
+          }
+        }
+
+        newState.tree = updateParentInnerBlocksInTree(newState, newState.tree, parentsOfRemovedBlocks, true);
+        break;
+      }
 
     case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN':
-      newState.cache = { ...(0, _lodash.omit)(newState.cache, action.removedClientIds),
-        ...fillKeysWithEmptyObject((0, _lodash.difference)(getBlocksWithParentsClientIds(action.clientIds), action.clientIds))
-      };
+      const parentsOfRemovedBlocks = [];
+
+      for (const clientId of action.clientIds) {
+        if (state.parents[clientId] !== undefined && (state.parents[clientId] === '' || newState.byClientId[state.parents[clientId]])) {
+          parentsOfRemovedBlocks.push(state.parents[clientId]);
+        }
+      }
+
+      newState.tree = updateParentInnerBlocksInTree(newState, (0, _lodash.omit)(newState.tree, action.removedClientIds.concat(action.removedClientIds.map(clientId => 'controlled||' + clientId))), parentsOfRemovedBlocks, true);
       break;
 
     case 'MOVE_BLOCKS_TO_POSITION':
       {
-        const updatedBlockUids = [...action.clientIds];
+        const updatedBlockUids = [];
 
         if (action.fromRootClientId) {
           updatedBlockUids.push(action.fromRootClientId);
@@ -338,24 +388,19 @@ const withBlockCache = reducer => (state = {}, action) => {
           updatedBlockUids.push(action.toRootClientId);
         }
 
-        newState.cache = { ...newState.cache,
-          ...fillKeysWithEmptyObject(getBlocksWithParentsClientIds(updatedBlockUids))
-        };
+        if (!action.fromRootClientId || !action.fromRootClientId) {
+          updatedBlockUids.push('');
+        }
+
+        newState.tree = updateParentInnerBlocksInTree(newState, newState.tree, updatedBlockUids, true);
         break;
       }
 
     case 'MOVE_BLOCKS_UP':
     case 'MOVE_BLOCKS_DOWN':
       {
-        const updatedBlockUids = [];
-
-        if (action.rootClientId) {
-          updatedBlockUids.push(action.rootClientId);
-        }
-
-        newState.cache = { ...newState.cache,
-          ...fillKeysWithEmptyObject(getBlocksWithParentsClientIds(updatedBlockUids))
-        };
+        const updatedBlockUids = [action.rootClientId ? action.rootClientId : ''];
+        newState.tree = updateParentInnerBlocksInTree(newState, newState.tree, updatedBlockUids, true);
         break;
       }
 
@@ -364,9 +409,15 @@ const withBlockCache = reducer => (state = {}, action) => {
         const updatedBlockUids = (0, _lodash.keys)((0, _lodash.omitBy)(newState.attributes, (attributes, clientId) => {
           return newState.byClientId[clientId].name !== 'core/block' || attributes.ref !== action.updatedId;
         }));
-        newState.cache = { ...newState.cache,
-          ...fillKeysWithEmptyObject(getBlocksWithParentsClientIds(updatedBlockUids))
-        };
+        newState.tree = updateParentInnerBlocksInTree(newState, { ...newState.tree,
+          ...updatedBlockUids.reduce((result, clientId) => {
+            result[clientId] = { ...newState.byClientId[clientId],
+              attributes: newState.attributes[clientId],
+              innerBlocks: newState.tree[clientId].innerBlocks
+            };
+            return result;
+          }, {})
+        }, updatedBlockUids, false);
       }
   }
 
@@ -510,15 +561,17 @@ const withInnerBlocksRemoveCascade = reducer => (state, action) => {
 
 
 const withBlockReset = reducer => (state, action) => {
-  if (state && action.type === 'RESET_BLOCKS') {
+  if (action.type === 'RESET_BLOCKS') {
+    var _state$order, _state$controlledInne, _state$controlledInne2;
+
     /**
      * A list of client IDs associated with the top level entity (like a
      * post or template). It excludes the client IDs of blocks associated
      * with other entities, like inner block controllers or reusable blocks.
      */
-    const visibleClientIds = getNestedBlockClientIds(state.order, '', state.controlledInnerBlocks); // pickBy returns only the truthy values from controlledInnerBlocks
+    const visibleClientIds = getNestedBlockClientIds((_state$order = state === null || state === void 0 ? void 0 : state.order) !== null && _state$order !== void 0 ? _state$order : {}, '', (_state$controlledInne = state === null || state === void 0 ? void 0 : state.controlledInnerBlocks) !== null && _state$controlledInne !== void 0 ? _state$controlledInne : {}); // pickBy returns only the truthy values from controlledInnerBlocks
 
-    const controlledInnerBlocks = Object.keys((0, _lodash.pickBy)(state.controlledInnerBlocks));
+    const controlledInnerBlocks = Object.keys((0, _lodash.pickBy)((_state$controlledInne2 = state === null || state === void 0 ? void 0 : state.controlledInnerBlocks) !== null && _state$controlledInne2 !== void 0 ? _state$controlledInne2 : {}));
     /**
      * Each update operation consists of a few parts:
      * 1. First, the client IDs associated with the top level entity are
@@ -541,23 +594,30 @@ const withBlockReset = reducer => (state, action) => {
      *    whenever you try to undo a change in the top level entity.
      */
 
-    return { ...state,
-      byClientId: { ...(0, _lodash.omit)(state.byClientId, visibleClientIds),
+    const newState = { ...state,
+      byClientId: { ...(0, _lodash.omit)(state === null || state === void 0 ? void 0 : state.byClientId, visibleClientIds),
         ...getFlattenedBlocksWithoutAttributes(action.blocks)
       },
-      attributes: { ...(0, _lodash.omit)(state.attributes, visibleClientIds),
+      attributes: { ...(0, _lodash.omit)(state === null || state === void 0 ? void 0 : state.attributes, visibleClientIds),
         ...getFlattenedBlockAttributes(action.blocks)
       },
-      order: { ...(0, _lodash.omit)(state.order, visibleClientIds),
+      order: { ...(0, _lodash.omit)(state === null || state === void 0 ? void 0 : state.order, visibleClientIds),
         ...(0, _lodash.omit)(mapBlockOrder(action.blocks), controlledInnerBlocks)
       },
-      parents: { ...(0, _lodash.omit)(state.parents, visibleClientIds),
+      parents: { ...(0, _lodash.omit)(state === null || state === void 0 ? void 0 : state.parents, visibleClientIds),
         ...mapBlockParents(action.blocks)
       },
-      cache: { ...(0, _lodash.omit)(state.cache, visibleClientIds),
-        ...(0, _lodash.omit)((0, _lodash.mapValues)(flattenBlocks(action.blocks), () => ({})), controlledInnerBlocks)
+      controlledInnerBlocks: (state === null || state === void 0 ? void 0 : state.controlledInnerBlocks) || {}
+    };
+    const subTree = buildBlockTree(newState, action.blocks);
+    newState.tree = { ...(0, _lodash.omit)(state === null || state === void 0 ? void 0 : state.tree, visibleClientIds),
+      ...subTree,
+      // Root
+      '': {
+        innerBlocks: action.blocks.map(subBlock => subTree[subBlock.clientId])
       }
     };
+    return newState;
   }
 
   return reducer(state, action);
@@ -693,14 +753,11 @@ const withSaveReusableBlock = reducer => (state, action) => {
 
 
 const blocks = (0, _lodash.flow)(_data.combineReducers, withSaveReusableBlock, // needs to be before withBlockCache
-withBlockCache, // needs to be before withInnerBlocksRemoveCascade
+withBlockTree, // needs to be before withInnerBlocksRemoveCascade
 withInnerBlocksRemoveCascade, withReplaceInnerBlocks, // needs to be after withInnerBlocksRemoveCascade
 withBlockReset, withPersistentBlockChange, withIgnoredBlockChange)({
   byClientId(state = {}, action) {
     switch (action.type) {
-      case 'RESET_BLOCKS':
-        return getFlattenedBlocksWithoutAttributes(action.blocks);
-
       case 'RECEIVE_BLOCKS':
       case 'INSERT_BLOCKS':
         return { ...state,
@@ -744,9 +801,6 @@ withBlockReset, withPersistentBlockChange, withIgnoredBlockChange)({
 
   attributes(state = {}, action) {
     switch (action.type) {
-      case 'RESET_BLOCKS':
-        return getFlattenedBlockAttributes(action.blocks);
-
       case 'RECEIVE_BLOCKS':
       case 'INSERT_BLOCKS':
         return { ...state,
@@ -811,13 +865,14 @@ withBlockReset, withPersistentBlockChange, withIgnoredBlockChange)({
 
   order(state = {}, action) {
     switch (action.type) {
-      case 'RESET_BLOCKS':
-        return mapBlockOrder(action.blocks);
-
       case 'RECEIVE_BLOCKS':
-        return { ...state,
-          ...(0, _lodash.omit)(mapBlockOrder(action.blocks), '')
-        };
+        {
+          const blockOrder = mapBlockOrder(action.blocks);
+          return { ...state,
+            ...(0, _lodash.omit)(blockOrder, ''),
+            '': ((state === null || state === void 0 ? void 0 : state['']) || []).concat(blockOrder[''])
+          };
+        }
 
       case 'INSERT_BLOCKS':
         {
@@ -939,9 +994,6 @@ withBlockReset, withPersistentBlockChange, withIgnoredBlockChange)({
   // an optimization for the selectors which derive the ancestry of a block.
   parents(state = {}, action) {
     switch (action.type) {
-      case 'RESET_BLOCKS':
-        return mapBlockParents(action.blocks);
-
       case 'RECEIVE_BLOCKS':
         return { ...state,
           ...mapBlockParents(action.blocks)
@@ -1109,8 +1161,7 @@ function selectionHelper(state = {}, action) {
           return state;
         }
 
-        const indexToSelect = action.indexToSelect || action.blocks.length - 1;
-        const blockToSelect = action.blocks[indexToSelect];
+        const blockToSelect = action.blocks[action.indexToSelect] || action.blocks[action.blocks.length - 1];
 
         if (!blockToSelect) {
           return {};