@wordpress/block-editor 12.0.0 → 12.2.0

package/build/components/block-list/block.native.js

@@ -9,34 +9,34 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _reactNative = require("react-native");
 
 var _components = require("@wordpress/components");
 
-var _data = require("@wordpress/data");
-
-var _compose = require("@wordpress/compose");
-
 var _blocks = require("@wordpress/blocks");
 
-var _blockEditor = require("@wordpress/block-editor");
+var _data = require("@wordpress/data");
 
-var _block = _interopRequireDefault(require("./block.scss"));
+var _compose = require("@wordpress/compose");
 
 var _blockEdit = _interopRequireDefault(require("../block-edit"));
 
+var _blockDraggable = _interopRequireDefault(require("../block-draggable"));
+
 var _blockInvalidWarning = _interopRequireDefault(require("./block-invalid-warning"));
 
 var _blockMobileToolbar = _interopRequireDefault(require("../block-mobile-toolbar"));
 
-var _store = require("../../store");
+var _blockOutline = _interopRequireDefault(require("./block-outline"));
 
-var _blockDraggable = _interopRequireDefault(require("../block-draggable"));
+var _block = _interopRequireDefault(require("./block.scss"));
+
+var _store = require("../../store");
 
 var _layout = require("./layout");
 
+var _useSetting = _interopRequireDefault(require("../use-setting"));
+
 /**
  * External dependencies
  */
@@ -48,331 +48,363 @@ var _layout = require("./layout");
 /**
  * Internal dependencies
  */
-const emptyArray = [];
+const emptyArray = []; // Helper function to memoize the wrapperProps since getEditWrapperProps always returns a new reference.
+
+const wrapperPropsCache = new WeakMap();
+const emptyObj = {};
+
+function getWrapperProps(value, getWrapperPropsFunction) {
+  if (!getWrapperPropsFunction) {
+    return emptyObj;
+  }
+
+  const cachedValue = wrapperPropsCache.get(value);
 
-function BlockForType(_ref) {
+  if (!cachedValue) {
+    const wrapperProps = getWrapperPropsFunction(value);
+    wrapperPropsCache.set(value, wrapperProps);
+    return wrapperProps;
+  }
+
+  return cachedValue;
+}
+
+function BlockWrapper(_ref) {
   let {
-    attributes,
+    accessibilityLabel,
+    align,
+    blockWidth,
+    children,
     clientId,
-    contentStyle,
-    getBlockWidth,
-    insertBlocksAfter,
+    draggingClientId,
+    draggingEnabled,
+    isDescendentBlockSelected,
+    isParentSelected,
     isSelected,
-    onMerge,
-    name,
-    onBlockFocus,
-    onChange,
+    isStackedHorizontally,
+    isTouchable,
+    marginHorizontal,
+    marginVertical,
     onDeleteBlock,
-    onReplace,
-    parentWidth,
-    parentBlockAlignment,
-    wrapperProps,
-    blockWidth,
-    baseGlobalStyles
+    onFocus
   } = _ref;
-  const defaultColors = (0, _components.useMobileGlobalStylesColors)();
-  const fontSizes = (0, _blockEditor.useSetting)('typography.fontSizes') || emptyArray;
-  const globalStyle = (0, _components.useGlobalStyles)();
-  const mergedStyle = (0, _element.useMemo)(() => {
-    return (0, _components.getMergedGlobalStyles)(baseGlobalStyles, globalStyle, wrapperProps.style, attributes, defaultColors, name, fontSizes);
-  }, [defaultColors, globalStyle, // I couldn't simply use attributes and wrapperProps.styles as a dependency because they are almost always a new reference.
-  // Thanks to the JSON.stringify we check if the value is the same instead of reference.
-  JSON.stringify(wrapperProps.style), JSON.stringify(Object.fromEntries(Object.entries(attributes !== null && attributes !== void 0 ? attributes : {}).filter(_ref2 => {
-    let [key] = _ref2;
-    return _components.GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES.includes(key);
-  })))]);
-  const parentLayout = (0, _layout.useLayout)();
-  return (0, _element.createElement)(_components.GlobalStylesContext.Provider, {
-    value: mergedStyle
-  }, (0, _element.createElement)(_blockEdit.default, {
-    name: name,
+  const {
+    width: screenWidth
+  } = (0, _reactNative.useWindowDimensions)();
+  const anchorNodeRef = (0, _element.useRef)();
+  const {
+    isFullWidth
+  } = _components.alignmentHelpers;
+  const isScreenWidthEqual = blockWidth === screenWidth;
+  const isFullWidthToolbar = isFullWidth(align) || isScreenWidthEqual;
+  const blockWrapperStyles = {
+    flex: 1
+  };
+  const blockWrapperStyle = [blockWrapperStyles, {
+    marginVertical,
+    marginHorizontal
+  }];
+  const accessible = !(isSelected || isDescendentBlockSelected);
+  return (0, _element.createElement)(_reactNative.Pressable, {
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: "button",
+    accessible: accessible,
+    disabled: !isTouchable,
+    onPress: onFocus,
+    style: blockWrapperStyle
+  }, (0, _element.createElement)(_blockOutline.default, {
     isSelected: isSelected,
-    attributes: attributes,
-    setAttributes: onChange,
-    onFocus: onBlockFocus,
-    onReplace: onReplace,
-    insertBlocksAfter: insertBlocksAfter,
-    mergeBlocks: onMerge // Block level styles.
-    ,
-    wrapperProps: wrapperProps // Inherited styles merged with block level styles.
-    ,
-    style: mergedStyle,
+    isParentSelected: isParentSelected,
+    screenWidth: screenWidth
+  }), (0, _element.createElement)(_blockDraggable.default, {
     clientId: clientId,
-    parentWidth: parentWidth,
-    contentStyle: contentStyle,
-    onDeleteBlock: onDeleteBlock,
+    draggingClientId: draggingClientId,
+    enabled: draggingEnabled,
+    testID: "draggable-trigger-content"
+  }, children), (0, _element.createElement)(_reactNative.View, {
+    style: _block.default.neutralToolbar,
+    ref: anchorNodeRef
+  }, isSelected && (0, _element.createElement)(_blockMobileToolbar.default, {
+    anchorNodeRef: anchorNodeRef.current,
     blockWidth: blockWidth,
-    parentBlockAlignment: parentBlockAlignment,
-    __unstableParentLayout: parentLayout
-  }), (0, _element.createElement)(_reactNative.View, {
-    onLayout: getBlockWidth
-  }));
+    clientId: clientId,
+    draggingClientId: draggingClientId,
+    isFullWidth: isFullWidthToolbar,
+    isStackedHorizontally: isStackedHorizontally,
+    onDelete: onDeleteBlock
+  })));
 }
 
-class BlockListBlock extends _element.Component {
-  constructor() {
-    super(...arguments);
-    this.insertBlocksAfter = this.insertBlocksAfter.bind(this);
-    this.onFocus = this.onFocus.bind(this);
-    this.getBlockWidth = this.getBlockWidth.bind(this);
-    this.state = {
-      blockWidth: this.props.blockWidth - 2 * this.props.marginHorizontal
-    };
-    this.anchorNodeRef = (0, _element.createRef)();
-  }
+function BlockListBlock(_ref2) {
+  let {
+    attributes,
+    blockWidth: blockWrapperWidth,
+    canRemove,
+    clientId,
+    contentStyle,
+    isLocked,
+    isSelected,
+    isSelectionEnabled,
+    isStackedHorizontally,
+    isValid,
+    marginHorizontal,
+    marginVertical,
+    name,
+    onDeleteBlock,
+    onInsertBlocksAfter,
+    onMerge,
+    onReplace,
+    parentBlockAlignment,
+    parentWidth,
+    rootClientId,
+    setAttributes,
+    toggleSelection
+  } = _ref2;
+  const {
+    baseGlobalStyles,
+    blockType,
+    draggingClientId,
+    draggingEnabled,
+    isDescendantOfParentSelected,
+    isDescendentBlockSelected,
+    isParentSelected,
+    order
+  } = (0, _data.useSelect)(select => {
+    var _getSettings;
 
-  onFocus() {
     const {
-      firstToSelectId,
-      isSelected,
-      onSelect
-    } = this.props;
-
+      getBlockCount,
+      getBlockHierarchyRootClientId,
+      getBlockIndex,
+      getBlockParents,
+      getSelectedBlockClientId,
+      getSettings,
+      hasSelectedInnerBlock
+    } = select(_store.store);
+    const currentBlockType = (0, _blocks.getBlockType)(name || 'core/missing');
+    const blockOrder = getBlockIndex(clientId);
+    const descendentBlockSelected = hasSelectedInnerBlock(clientId, true);
+    const selectedBlockClientId = getSelectedBlockClientId();
+    const parents = getBlockParents(clientId, true);
+    const parentSelected = // Set false as a default value to prevent re-render when it's changed from null to false.
+    (selectedBlockClientId || false) && selectedBlockClientId === rootClientId;
+    const selectedParents = clientId ? parents : [];
+    const descendantOfParentSelected = selectedParents.includes(rootClientId);
+    const hasInnerBlocks = getBlockCount(clientId) > 0; // For blocks with inner blocks, we only enable the dragging in the nested
+    // blocks if any of them are selected. This way we prevent the long-press
+    // gesture from being disabled for elements within the block UI.
+
+    const isDraggingEnabled = !hasInnerBlocks || isSelected || !descendentBlockSelected; // Dragging nested blocks is not supported yet. For this reason, the block to be dragged
+    // will be the top in the hierarchy.
+
+    const currentDraggingClientId = getBlockHierarchyRootClientId(clientId);
+    const globalStylesBaseStyles = (_getSettings = getSettings()) === null || _getSettings === void 0 ? void 0 : _getSettings.__experimentalGlobalStylesBaseStyles;
+    return {
+      baseGlobalStyles: globalStylesBaseStyles,
+      blockType: currentBlockType,
+      draggingClientId: currentDraggingClientId,
+      draggingEnabled: isDraggingEnabled,
+      isDescendantOfParentSelected: descendantOfParentSelected,
+      isDescendentBlockSelected: descendentBlockSelected,
+      isParentSelected: parentSelected,
+      order: blockOrder
+    };
+  }, [clientId, isSelected, name, rootClientId]);
+  const {
+    removeBlock,
+    selectBlock
+  } = (0, _data.useDispatch)(_store.store);
+  const initialBlockWidth = blockWrapperWidth - 2 * marginHorizontal;
+  const [blockWidth, setBlockWidth] = (0, _element.useState)(initialBlockWidth);
+  const parentLayout = (0, _layout.useLayout)() || {};
+  const defaultColors = (0, _components.useMobileGlobalStylesColors)();
+  const globalStyle = (0, _components.useGlobalStyles)();
+  const fontSizes = (0, _useSetting.default)('typography.fontSizes') || emptyArray;
+  const onRemove = (0, _element.useCallback)(() => removeBlock(clientId), [clientId, removeBlock]);
+  const onFocus = (0, _element.useCallback)(() => {
     if (!isSelected) {
-      onSelect(firstToSelectId);
-    }
-  }
-
-  insertBlocksAfter(blocks) {
-    this.props.onInsertBlocks(blocks, this.props.order + 1);
-
-    if (blocks[0]) {
-      // Focus on the first block inserted.
-      this.props.onSelect(blocks[0].clientId);
+      selectBlock(clientId);
     }
-  }
-
-  getBlockWidth(_ref3) {
+  }, [selectBlock, clientId, isSelected]);
+  const onLayout = (0, _element.useCallback)(_ref3 => {
     let {
       nativeEvent
     } = _ref3;
-    const {
-      layout
-    } = nativeEvent;
-    const {
-      blockWidth
-    } = this.state;
-    const layoutWidth = Math.floor(layout.width);
+    const layoutWidth = Math.floor(nativeEvent.layout.width);
 
     if (!blockWidth || !layoutWidth) {
       return;
     }
 
     if (blockWidth !== layoutWidth) {
-      this.setState({
-        blockWidth: layoutWidth
-      });
+      setBlockWidth(layoutWidth);
     }
-  }
+  }, [blockWidth, setBlockWidth]); // Block level styles.
 
-  getBlockForType() {
-    const {
-      blockWidth
-    } = this.state;
-    return (0, _element.createElement)(BlockForType, (0, _extends2.default)({}, this.props, {
-      onBlockFocus: this.onFocus,
-      insertBlocksAfter: this.insertBlocksAfter,
-      getBlockWidth: this.getBlockWidth,
-      blockWidth: blockWidth
-    }));
-  }
+  const wrapperProps = getWrapperProps(attributes, blockType.getEditWrapperProps); // Inherited styles merged with block level styles.
 
-  renderBlockTitle() {
-    return (0, _element.createElement)(_reactNative.View, {
-      style: _block.default.blockTitle
-    }, (0, _element.createElement)(_reactNative.Text, null, "BlockType: ", this.props.name));
-  }
-
-  render() {
-    const {
-      attributes,
-      blockType,
-      clientId,
-      icon,
-      isSelected,
-      isValid,
-      order,
-      title,
-      isDimmed,
-      isTouchable,
-      onDeleteBlock,
-      isStackedHorizontally,
-      isParentSelected,
-      getStylesFromColorScheme,
-      marginVertical,
-      marginHorizontal,
-      isInnerBlockSelected,
-      name,
-      draggingEnabled,
-      draggingClientId
-    } = this.props;
-
-    if (!attributes || !blockType) {
-      return null;
-    }
-
-    const {
-      blockWidth
-    } = this.state;
-    const {
-      align
-    } = attributes;
-    const accessibilityLabel = (0, _blocks.__experimentalGetAccessibleBlockLabel)(blockType, attributes, order + 1);
-    const {
-      isFullWidth,
-      isContainerRelated
-    } = _components.alignmentHelpers;
-    const accessible = !(isSelected || isInnerBlockSelected);
-    const screenWidth = Math.floor(_reactNative.Dimensions.get('window').width);
-    const isScreenWidthEqual = blockWidth === screenWidth;
-    const isScreenWidthWider = blockWidth < screenWidth;
-    const isFullWidthToolbar = isFullWidth(align) || isScreenWidthEqual;
-    return (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
-      onPress: this.onFocus,
-      accessible: accessible,
-      accessibilityRole: 'button'
-    }, (0, _element.createElement)(_reactNative.View, {
-      style: {
-        flex: 1
-      },
-      accessibilityLabel: accessibilityLabel
-    }, (0, _element.createElement)(_reactNative.View, {
-      pointerEvents: isTouchable ? 'auto' : 'box-only',
-      accessibilityLabel: accessibilityLabel,
-      style: [{
-        marginVertical,
-        marginHorizontal,
-        flex: 1
-      }, isDimmed && _block.default.dimmed]
-    }, isSelected && (0, _element.createElement)(_reactNative.View, {
-      pointerEvents: "box-none",
-      style: [_block.default.solidBorder, isFullWidth(align) && isScreenWidthWider && _block.default.borderFullWidth, isFullWidth(align) && isContainerRelated(name) && isScreenWidthWider && _block.default.containerBorderFullWidth, getStylesFromColorScheme(_block.default.solidBorderColor, _block.default.solidBorderColorDark)]
-    }), isParentSelected && (0, _element.createElement)(_reactNative.View, {
-      style: [_block.default.dashedBorder, getStylesFromColorScheme(_block.default.dashedBorderColor, _block.default.dashedBorderColorDark)]
-    }), (0, _element.createElement)(_blockDraggable.default, {
-      clientId: clientId,
-      draggingClientId: draggingClientId,
-      enabled: draggingEnabled,
-      testID: "draggable-trigger-content"
-    }, () => isValid ? this.getBlockForType() : (0, _element.createElement)(_blockInvalidWarning.default, {
-      blockTitle: title,
-      icon: icon,
-      clientId: clientId
-    })), (0, _element.createElement)(_reactNative.View, {
-      style: _block.default.neutralToolbar,
-      ref: this.anchorNodeRef
-    }, isSelected && (0, _element.createElement)(_blockMobileToolbar.default, {
-      clientId: clientId,
-      onDelete: onDeleteBlock,
-      isStackedHorizontally: isStackedHorizontally,
-      blockWidth: blockWidth,
-      anchorNodeRef: this.anchorNodeRef.current,
-      isFullWidth: isFullWidthToolbar,
-      draggingClientId: draggingClientId
-    })))));
-  }
-
-} // Helper function to memoize the wrapperProps since getEditWrapperProps always returns a new reference.
-
-
-const wrapperPropsCache = new WeakMap();
-const emptyObj = {};
-
-function getWrapperProps(value, getWrapperPropsFunction) {
-  if (!getWrapperPropsFunction) {
-    return emptyObj;
-  }
-
-  const cachedValue = wrapperPropsCache.get(value);
-
-  if (!cachedValue) {
-    const wrapperProps = getWrapperPropsFunction(value);
-    wrapperPropsCache.set(value, wrapperProps);
-    return wrapperProps;
-  }
-
-  return cachedValue;
+  const mergedStyle = (0, _element.useMemo)(() => {
+    return (0, _components.getMergedGlobalStyles)(baseGlobalStyles, globalStyle, wrapperProps.style, attributes, defaultColors, name, fontSizes); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [// It is crucial to keep the dependencies array minimal to prevent unnecessary calls that could negatively impact performance.
+  // JSON.stringify is used for the following purposes:
+  // 1. To create a single, comparable value from the globalStyle, wrapperProps.style, and attributes objects. This allows useMemo to
+  //    efficiently determine if a change has occurred in any of these objects.
+  // 2. To filter the attributes object, ensuring that only the relevant attributes (included in
+  //    GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES) are considered as dependencies. This reduces the likelihood of
+  //    unnecessary useMemo calls when other, unrelated attributes change.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  JSON.stringify(globalStyle), // eslint-disable-next-line react-hooks/exhaustive-deps
+  JSON.stringify(wrapperProps.style), // eslint-disable-next-line react-hooks/exhaustive-deps
+  JSON.stringify(Object.fromEntries(Object.entries(attributes !== null && attributes !== void 0 ? attributes : {}).filter(_ref4 => {
+    let [key] = _ref4;
+    return _components.GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES.includes(key);
+  })))]);
+  const {
+    align
+  } = attributes;
+  const isFocused = isSelected || isDescendentBlockSelected;
+  const isTouchable = isSelected || isDescendantOfParentSelected || isParentSelected || !rootClientId;
+  const accessibilityLabel = (0, _blocks.__experimentalGetAccessibleBlockLabel)(blockType, attributes, order + 1);
+  return (0, _element.createElement)(BlockWrapper, {
+    accessibilityLabel: accessibilityLabel,
+    align: align,
+    blockWidth: blockWidth,
+    clientId: clientId,
+    draggingClientId: draggingClientId,
+    draggingEnabled: draggingEnabled,
+    isFocused: isFocused,
+    isDescendentBlockSelected: isDescendentBlockSelected,
+    isParentSelected: isParentSelected,
+    isSelected: isSelected,
+    isStackedHorizontally: isStackedHorizontally,
+    isTouchable: isTouchable,
+    marginHorizontal: marginHorizontal,
+    marginVertical: marginVertical,
+    onDeleteBlock: onDeleteBlock,
+    onFocus: onFocus
+  }, () => !isValid ? (0, _element.createElement)(_blockInvalidWarning.default, {
+    clientId: clientId
+  }) : (0, _element.createElement)(_components.GlobalStylesContext.Provider, {
+    value: mergedStyle
+  }, (0, _element.createElement)(_blockEdit.default, {
+    attributes: attributes,
+    blockWidth: blockWidth,
+    clientId: clientId,
+    contentStyle: contentStyle,
+    insertBlocksAfter: isLocked ? undefined : onInsertBlocksAfter,
+    isSelected: isSelected,
+    isSelectionEnabled: isSelectionEnabled,
+    mergeBlocks: canRemove ? onMerge : undefined,
+    name: name,
+    onFocus: onFocus,
+    onRemove: canRemove ? onRemove : undefined,
+    onReplace: canRemove ? onReplace : undefined,
+    parentBlockAlignment: parentBlockAlignment,
+    parentWidth: parentWidth,
+    setAttributes: setAttributes,
+    style: mergedStyle,
+    toggleSelection: toggleSelection,
+    __unstableParentLayout: Object.keys(parentLayout).length ? parentLayout : undefined,
+    wrapperProps: wrapperProps
+  }), (0, _element.createElement)(_reactNative.View, {
+    onLayout: onLayout
+  })));
 }
 
-var _default = (0, _compose.compose)([(0, _data.withSelect)((select, _ref4) => {
-  var _getSettings;
-
+const applyWithSelect = (0, _data.withSelect)((select, _ref5) => {
   let {
-    clientId
-  } = _ref4;
+    clientId,
+    rootClientId
+  } = _ref5;
   const {
-    getBlockIndex,
-    getBlockCount,
-    getSettings,
     isBlockSelected,
-    getBlock,
-    getSelectedBlockClientId,
-    getLowestCommonAncestorWithSelectedBlock,
-    getBlockParents,
-    hasSelectedInnerBlock,
-    getBlockHierarchyRootClientId
+    getBlockMode,
+    isSelectionEnabled,
+    getTemplateLock,
+    __unstableGetBlockWithoutInnerBlocks,
+    canRemoveBlock,
+    canMoveBlock
   } = select(_store.store);
-  const order = getBlockIndex(clientId);
+
+  const block = __unstableGetBlockWithoutInnerBlocks(clientId);
+
   const isSelected = isBlockSelected(clientId);
-  const isInnerBlockSelected = hasSelectedInnerBlock(clientId);
-  const block = getBlock(clientId);
+  const templateLock = getTemplateLock(rootClientId);
+  const canRemove = canRemoveBlock(clientId, rootClientId);
+  const canMove = canMoveBlock(clientId, rootClientId); // The fallback to `{}` is a temporary fix.
+  // This function should never be called when a block is not present in
+  // the state. It happens now because the order in withSelect rendering
+  // is not correct.
+
   const {
     name,
     attributes,
     isValid
-  } = block || {};
-  const blockType = (0, _blocks.getBlockType)(name || 'core/missing');
-  const title = blockType === null || blockType === void 0 ? void 0 : blockType.title;
-  const icon = blockType === null || blockType === void 0 ? void 0 : blockType.icon;
-  const parents = getBlockParents(clientId, true);
-  const parentId = parents[0] || '';
-  const selectedBlockClientId = getSelectedBlockClientId();
-  const commonAncestor = getLowestCommonAncestorWithSelectedBlock(clientId);
-  const commonAncestorIndex = parents.indexOf(commonAncestor) - 1;
-  const firstToSelectId = commonAncestor ? parents[commonAncestorIndex] : parents[parents.length - 1];
-  const isParentSelected = // Set false as a default value to prevent re-render when it's changed from null to false.
-  (selectedBlockClientId || false) && selectedBlockClientId === parentId;
-  const selectedParents = selectedBlockClientId ? getBlockParents(selectedBlockClientId) : [];
-  const isDescendantOfParentSelected = selectedParents.includes(parentId);
-  const isTouchable = isSelected || isDescendantOfParentSelected || isParentSelected || parentId === '';
-  const baseGlobalStyles = (_getSettings = getSettings()) === null || _getSettings === void 0 ? void 0 : _getSettings.__experimentalGlobalStylesBaseStyles;
-  const hasInnerBlocks = getBlockCount(clientId) > 0; // For blocks with inner blocks, we only enable the dragging in the nested
-  // blocks if any of them are selected. This way we prevent the long-press
-  // gesture from being disabled for elements within the block UI.
-
-  const draggingEnabled = !hasInnerBlocks || isSelected || !hasSelectedInnerBlock(clientId, true); // Dragging nested blocks is not supported yet. For this reason, the block to be dragged
-  // will be the top in the hierarchy.
-
-  const draggingClientId = getBlockHierarchyRootClientId(clientId);
+  } = block || {}; // Do not add new properties here, use `useSelect` instead to avoid
+  // leaking new props to the public API (editor.BlockListBlock filter).
+
   return {
-    icon,
-    name: name || 'core/missing',
-    order,
-    title,
+    mode: getBlockMode(clientId),
+    isSelectionEnabled: isSelectionEnabled(),
+    isLocked: !!templateLock,
+    canRemove,
+    canMove,
+    // Users of the editor.BlockListBlock filter used to be able to
+    // access the block prop.
+    // Ideally these blocks would rely on the clientId prop only.
+    // This is kept for backward compatibility reasons.
+    block,
+    name,
     attributes,
-    blockType,
-    draggingClientId,
-    draggingEnabled,
-    isSelected,
-    isInnerBlockSelected,
     isValid,
-    isParentSelected,
-    firstToSelectId,
-    isTouchable,
-    baseGlobalStyles,
-    wrapperProps: getWrapperProps(attributes, blockType.getEditWrapperProps)
+    isSelected
   };
-}), (0, _data.withDispatch)((dispatch, ownProps, registry) => {
+});
+const applyWithDispatch = (0, _data.withDispatch)((dispatch, ownProps, registry) => {
   const {
+    updateBlockAttributes,
     insertBlocks,
     mergeBlocks,
     replaceBlocks,
-    selectBlock,
-    updateBlockAttributes,
+    toggleSelection,
+    __unstableMarkLastChangeAsPersistent,
     moveBlocksToPosition,
     removeBlock
-  } = dispatch(_store.store);
+  } = dispatch(_store.store); // Do not add new properties here, use `useDispatch` instead to avoid
+  // leaking new props to the public API (editor.BlockListBlock filter).
+
   return {
+    setAttributes(newAttributes) {
+      const {
+        getMultiSelectedBlockClientIds
+      } = registry.select(_store.store);
+      const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds();
+      const {
+        clientId
+      } = ownProps;
+      const clientIds = multiSelectedBlockClientIds.length ? multiSelectedBlockClientIds : [clientId];
+      updateBlockAttributes(clientIds, newAttributes);
+    },
+
+    onInsertBlocks(blocks, index) {
+      const {
+        rootClientId
+      } = ownProps;
+      insertBlocks(blocks, index, rootClientId);
+    },
+
+    onInsertBlocksAfter(blocks) {
+      const {
+        clientId,
+        rootClientId
+      } = ownProps;
+      const {
+        getBlockIndex
+      } = registry.select(_store.store);
+      const index = getBlockIndex(clientId);
+      insertBlocks(blocks, index + 1, rootClientId);
+    },
+
     onMerge(forward) {
       const {
         clientId,
@@ -408,22 +440,22 @@ var _default = (0, _compose.compose)([(0, _data.withSelect)((select, _ref4) => {
         if (blockOrder.length === 1 && (0, _blocks.isUnmodifiedBlock)(getBlock(firstClientId))) {
           removeBlock(_clientId);
         } else {
-          if (canInsertBlockType(getBlockName(firstClientId), targetRootClientId)) {
-            moveBlocksToPosition([firstClientId], _clientId, targetRootClientId, getBlockIndex(_clientId));
-          } else {
-            const replacement = (0, _blocks.switchToBlockType)(getBlock(firstClientId), (0, _blocks.getDefaultBlockName)());
+          registry.batch(() => {
+            if (canInsertBlockType(getBlockName(firstClientId), targetRootClientId)) {
+              moveBlocksToPosition([firstClientId], _clientId, targetRootClientId, getBlockIndex(_clientId));
+            } else {
+              const replacement = (0, _blocks.switchToBlockType)(getBlock(firstClientId), (0, _blocks.getDefaultBlockName)());
 
-            if (replacement && replacement.length) {
-              registry.batch(() => {
+              if (replacement && replacement.length) {
                 insertBlocks(replacement, getBlockIndex(_clientId), targetRootClientId, changeSelection);
                 removeBlock(firstClientId, false);
-              });
+              }
             }
-          }
 
-          if (!getBlockOrder(_clientId).length && (0, _blocks.isUnmodifiedBlock)(getBlock(_clientId))) {
-            removeBlock(_clientId, false);
-          }
+            if (!getBlockOrder(_clientId).length && (0, _blocks.isUnmodifiedBlock)(getBlock(_clientId))) {
+              removeBlock(_clientId, false);
+            }
+          });
         }
       } // For `Delete` or forward merge, we should do the exact same thing
       // as `Backspace`, but from the other block.
@@ -493,26 +525,30 @@ var _default = (0, _compose.compose)([(0, _data.withSelect)((select, _ref4) => {
       }
     },
 
-    onInsertBlocks(blocks, index) {
-      insertBlocks(blocks, index, ownProps.rootClientId);
-    },
-
-    onSelect() {
-      let clientId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ownProps.clientId;
-      let initialPosition = arguments.length > 1 ? arguments[1] : undefined;
-      selectBlock(clientId, initialPosition);
-    },
+    onReplace(blocks, indexToSelect, initialPosition) {
+      if (blocks.length && !(0, _blocks.isUnmodifiedDefaultBlock)(blocks[blocks.length - 1])) {
+        __unstableMarkLastChangeAsPersistent();
+      }
 
-    onChange: attributes => {
-      updateBlockAttributes(ownProps.clientId, attributes);
+      replaceBlocks([ownProps.clientId], blocks, indexToSelect, initialPosition);
     },
 
-    onReplace(blocks, indexToSelect) {
-      replaceBlocks([ownProps.clientId], blocks, indexToSelect);
+    toggleSelection(selectionEnabled) {
+      toggleSelection(selectionEnabled);
     }
 
   };
-}), _compose.withPreferredColorScheme])(BlockListBlock);
+});
+
+var _default = (0, _compose.compose)(_compose.pure, applyWithSelect, applyWithDispatch, // Block is sometimes not mounted at the right time, causing it be undefined
+// see issue for more info
+// https://github.com/WordPress/gutenberg/issues/17013
+(0, _compose.ifCondition)(_ref6 => {
+  let {
+    block
+  } = _ref6;
+  return !!block;
+}))(BlockListBlock);
 
 exports.default = _default;
 //# sourceMappingURL=block.native.js.map