@wordpress/block-editor 12.25.0 → 13.0.0

package/build-module/store/actions.js

@@ -2,16 +2,17 @@
 /**
  * WordPress dependencies
  */
-import { cloneBlock, __experimentalCloneSanitizedBlock, createBlock, doBlocksMatchTemplate, getBlockType, getDefaultBlockName, hasBlockSupport, switchToBlockType, synchronizeBlocksWithTemplate, getBlockSupport, isUnmodifiedDefaultBlock } from '@wordpress/blocks';
+import { cloneBlock, __experimentalCloneSanitizedBlock, createBlock, doBlocksMatchTemplate, getBlockType, getDefaultBlockName, hasBlockSupport, switchToBlockType, synchronizeBlocksWithTemplate, getBlockSupport, isUnmodifiedDefaultBlock, isUnmodifiedBlock } from '@wordpress/blocks';
 import { speak } from '@wordpress/a11y';
 import { __, _n, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
 import { create, insert, remove, toHTMLString } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
-import { retrieveSelectedAttribute, START_OF_SELECTED_AREA } from '../utils/selection';
+import { retrieveSelectedAttribute, findRichTextAttributeKey, START_OF_SELECTED_AREA } from '../utils/selection';
 import { __experimentalUpdateSettings, privateRemoveBlocks } from './private-actions';
 import { STORE_NAME } from './constants';
 import { unlock } from '../lock-unlock';
@@ -704,21 +705,15 @@ export const __unstableDeleteSelection = isForward => ({
 
 /**
  * Split the current selection.
+ * @param {?Array} blocks
  */
-export const __unstableSplitSelection = () => ({
+export const __unstableSplitSelection = (blocks = []) => ({
+  registry,
   select,
   dispatch
 }) => {
   const selectionAnchor = select.getSelectionStart();
   const selectionFocus = select.getSelectionEnd();
-  if (selectionAnchor.clientId === selectionFocus.clientId) {
-    return;
-  }
-
-  // Can't split if the selection is not set.
-  if (!selectionAnchor.attributeKey || !selectionFocus.attributeKey || typeof selectionAnchor.offset === 'undefined' || typeof selectionFocus.offset === 'undefined') {
-    return;
-  }
   const anchorRootClientId = select.getBlockRootClientId(selectionAnchor.clientId);
   const focusRootClientId = select.getBlockRootClientId(selectionFocus.clientId);
 
@@ -744,8 +739,65 @@ export const __unstableSplitSelection = () => ({
   const selectionB = selectionEnd;
   const blockA = select.getBlock(selectionA.clientId);
   const blockB = select.getBlock(selectionB.clientId);
-  const htmlA = blockA.attributes[selectionA.attributeKey];
-  const htmlB = blockB.attributes[selectionB.attributeKey];
+  const blockAType = getBlockType(blockA.name);
+  const blockBType = getBlockType(blockB.name);
+  const attributeKeyA = typeof selectionA.attributeKey === 'string' ? selectionA.attributeKey : findRichTextAttributeKey(blockAType);
+  const attributeKeyB = typeof selectionB.attributeKey === 'string' ? selectionB.attributeKey : findRichTextAttributeKey(blockBType);
+  const blockAttributes = select.getBlockAttributes(selectionA.clientId);
+  const bindings = blockAttributes?.metadata?.bindings;
+
+  // If the attribute is bound, don't split the selection and insert a new block instead.
+  if (bindings?.[attributeKeyA]) {
+    // Show warning if user tries to insert a block into another block with bindings.
+    if (blocks.length) {
+      const {
+        createWarningNotice
+      } = registry.dispatch(noticesStore);
+      createWarningNotice(__("Blocks can't be inserted into other blocks with bindings"), {
+        type: 'snackbar'
+      });
+      return;
+    }
+    dispatch.insertAfterBlock(selectionA.clientId);
+    return;
+  }
+
+  // Can't split if the selection is not set.
+  if (!attributeKeyA || !attributeKeyB || typeof selectionAnchor.offset === 'undefined' || typeof selectionFocus.offset === 'undefined') {
+    return;
+  }
+
+  // We can do some short-circuiting if the selection is collapsed.
+  if (selectionA.clientId === selectionB.clientId && attributeKeyA === attributeKeyB && selectionA.offset === selectionB.offset) {
+    // If an unmodified default block is selected, replace it. We don't
+    // want to be converting into a default block.
+    if (blocks.length) {
+      if (isUnmodifiedDefaultBlock(blockA)) {
+        dispatch.replaceBlocks([selectionA.clientId], blocks, blocks.length - 1, -1);
+        return;
+      }
+    }
+
+    // If selection is at the start or end, we can simply insert an
+    // empty block, provided this block has no inner blocks.
+    else if (!select.getBlockOrder(selectionA.clientId).length) {
+      function createEmpty() {
+        const defaultBlockName = getDefaultBlockName();
+        return select.canInsertBlockType(defaultBlockName, anchorRootClientId) ? createBlock(defaultBlockName) : createBlock(select.getBlockName(selectionA.clientId));
+      }
+      const length = blockAttributes[attributeKeyA].length;
+      if (selectionA.offset === 0 && length) {
+        dispatch.insertBlocks([createEmpty()], select.getBlockIndex(selectionA.clientId), anchorRootClientId, false);
+        return;
+      }
+      if (selectionA.offset === length) {
+        dispatch.insertBlocks([createEmpty()], select.getBlockIndex(selectionA.clientId) + 1, anchorRootClientId);
+        return;
+      }
+    }
+  }
+  const htmlA = blockA.attributes[attributeKeyA];
+  const htmlB = blockB.attributes[attributeKeyB];
   let valueA = create({
     html: htmlA
   });
@@ -754,25 +806,103 @@ export const __unstableSplitSelection = () => ({
   });
   valueA = remove(valueA, selectionA.offset, valueA.text.length);
   valueB = remove(valueB, 0, selectionB.offset);
-  dispatch.replaceBlocks(select.getSelectedBlockClientIds(), [{
+  let head = {
     // Preserve the original client ID.
     ...blockA,
+    // If both start and end are the same, should only copy innerBlocks
+    // once.
+    innerBlocks: blockA.clientId === blockB.clientId ? [] : blockA.innerBlocks,
     attributes: {
       ...blockA.attributes,
-      [selectionA.attributeKey]: toHTMLString({
+      [attributeKeyA]: toHTMLString({
         value: valueA
       })
     }
-  }, {
-    // Preserve the original client ID.
+  };
+  const tail = {
     ...blockB,
+    // Only preserve the original client ID if the end is different.
+    clientId: blockA.clientId === blockB.clientId ? createBlock(blockB.name).clientId : blockB.clientId,
     attributes: {
       ...blockB.attributes,
-      [selectionB.attributeKey]: toHTMLString({
+      [attributeKeyB]: toHTMLString({
         value: valueB
       })
     }
-  }]);
+  };
+  if (!blocks.length) {
+    dispatch.replaceBlocks(select.getSelectedBlockClientIds(), [head, tail]);
+    return;
+  }
+  let selection;
+  const output = [];
+  const clonedBlocks = [...blocks];
+  const firstBlock = clonedBlocks.shift();
+  const headType = getBlockType(head.name);
+  const firstBlocks = headType.merge && firstBlock.name === headType.name ? [firstBlock] : switchToBlockType(firstBlock, headType.name);
+  if (firstBlocks?.length) {
+    const first = firstBlocks.shift();
+    head = {
+      ...head,
+      attributes: {
+        ...head.attributes,
+        ...headType.merge(head.attributes, first.attributes)
+      }
+    };
+    output.push(head);
+    selection = {
+      clientId: head.clientId,
+      attributeKey: attributeKeyA,
+      offset: create({
+        html: head.attributes[attributeKeyA]
+      }).text.length
+    };
+    clonedBlocks.unshift(...firstBlocks);
+  } else {
+    if (!isUnmodifiedBlock(head)) {
+      output.push(head);
+    }
+    output.push(firstBlock);
+  }
+  const lastBlock = clonedBlocks.pop();
+  const tailType = getBlockType(tail.name);
+  if (clonedBlocks.length) {
+    output.push(...clonedBlocks);
+  }
+  if (lastBlock) {
+    const lastBlocks = tailType.merge && tailType.name === lastBlock.name ? [lastBlock] : switchToBlockType(lastBlock, tailType.name);
+    if (lastBlocks?.length) {
+      const last = lastBlocks.pop();
+      output.push({
+        ...tail,
+        attributes: {
+          ...tail.attributes,
+          ...tailType.merge(last.attributes, tail.attributes)
+        }
+      });
+      output.push(...lastBlocks);
+      selection = {
+        clientId: tail.clientId,
+        attributeKey: attributeKeyB,
+        offset: create({
+          html: last.attributes[attributeKeyB]
+        }).text.length
+      };
+    } else {
+      output.push(lastBlock);
+      if (!isUnmodifiedBlock(tail)) {
+        output.push(tail);
+      }
+    }
+  } else if (!isUnmodifiedBlock(tail)) {
+    output.push(tail);
+  }
+  registry.batch(() => {
+    dispatch.replaceBlocks(select.getSelectedBlockClientIds(), output, output.length - 1, 0);
+    if (selection) {
+      dispatch.selectionChange(selection.clientId, selection.attributeKey, selection.offset, selection.offset);
+    }
+  });
 };
 
 /**
@@ -1126,11 +1256,18 @@ export const insertDefaultBlock = (attributes, rootClientId, index) => ({
 };
 
 /**
- * Action that changes the nested settings of a given block.
+ * @typedef {Object< string, Object >} SettingsByClientId
+ */
+
+/**
+ * Action that changes the nested settings of the given block(s).
  *
- * @param {string} clientId Client ID of the block whose nested setting are
- *                          being received.
- * @param {Object} settings Object with the new settings for the nested block.
+ * @param {string | SettingsByClientId} clientId Client ID of the block whose
+ *                                               nested setting are being
+ *                                               received, or object of settings
+ *                                               by client ID.
+ * @param {Object}                      settings Object with the new settings
+ *                                               for the nested block.
  *
  * @return {Object} Action object
  */
@@ -1241,33 +1378,22 @@ export const __unstableSetEditorMode = mode => ({
   // When switching to zoom-out mode, we need to select the parent section
   if (mode === 'zoom-out') {
     const firstSelectedClientId = select.getBlockSelectionStart();
-    const allBlocks = select.getBlocks();
     const {
       sectionRootClientId
     } = unlock(registry.select(STORE_NAME).getSettings());
-    if (sectionRootClientId) {
-      const sectionClientIds = select.getBlockOrder(sectionRootClientId);
-      const lastSectionClientId = sectionClientIds[sectionClientIds.length - 1];
-      if (sectionClientIds) {
-        if (firstSelectedClientId) {
-          const parents = select.getBlockParents(firstSelectedClientId);
-          const firstSectionClientId = parents.find(parent => sectionClientIds.includes(parent));
-          if (firstSectionClientId) {
-            dispatch.selectBlock(firstSectionClientId);
-          } else {
-            dispatch.selectBlock(lastSectionClientId);
-          }
-        } else {
-          dispatch.selectBlock(lastSectionClientId);
-        }
+    if (firstSelectedClientId) {
+      let sectionClientId;
+      if (sectionRootClientId) {
+        const sectionClientIds = select.getBlockOrder(sectionRootClientId);
+        sectionClientId = select.getBlockParents(firstSelectedClientId).find(parent => sectionClientIds.includes(parent));
+      } else {
+        sectionClientId = select.getBlockHierarchyRootClientId(firstSelectedClientId);
+      }
+      if (sectionClientId) {
+        dispatch.selectBlock(sectionClientId);
+      } else {
+        dispatch.clearSelectedBlock();
       }
-    } else if (firstSelectedClientId) {
-      const rootClientId = select.getBlockHierarchyRootClientId(firstSelectedClientId);
-      dispatch.selectBlock(rootClientId);
-    } else {
-      // If there's no block selected and no sectionRootClientId, select the last root block.
-      const lastRootBlock = allBlocks[allBlocks.length - 1];
-      dispatch.selectBlock(lastRootBlock?.clientId);
     }
   }
   dispatch({