@wordpress/block-editor 15.9.1-next.8fd3f8831.0 → 15.10.1-next.06ee73755.0

package/build-module/components/inserter/category-tabs/index.mjs

@@ -0,0 +1,94 @@
+// packages/block-editor/src/components/inserter/category-tabs/index.js
+import { usePrevious, useReducedMotion } from "@wordpress/compose";
+import {
+  privateApis as componentsPrivateApis,
+  __unstableMotion as motion
+} from "@wordpress/components";
+import { useState } from "@wordpress/element";
+import { unlock } from "../../../lock-unlock.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+var { Tabs } = unlock(componentsPrivateApis);
+function CategoryTabs({
+  categories,
+  selectedCategory,
+  onSelectCategory,
+  children
+}) {
+  const ANIMATION_DURATION = 0.25;
+  const disableMotion = useReducedMotion();
+  const defaultTransition = {
+    type: "tween",
+    duration: disableMotion ? 0 : ANIMATION_DURATION,
+    ease: [0.6, 0, 0.4, 1]
+  };
+  const previousSelectedCategory = usePrevious(selectedCategory);
+  const selectedTabId = selectedCategory ? selectedCategory.name : null;
+  const [activeTabId, setActiveId] = useState();
+  const firstTabId = categories?.[0]?.name;
+  if (selectedTabId === null && !activeTabId && firstTabId) {
+    setActiveId(firstTabId);
+  }
+  return /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      selectOnMove: false,
+      selectedTabId,
+      orientation: "vertical",
+      onSelect: (categoryId) => {
+        onSelectCategory(
+          categories.find(
+            (category) => category.name === categoryId
+          )
+        );
+      },
+      activeTabId,
+      onActiveTabIdChange: setActiveId,
+      children: [
+        /* @__PURE__ */ jsx(Tabs.TabList, { className: "block-editor-inserter__category-tablist", children: categories.map((category) => /* @__PURE__ */ jsx(
+          Tabs.Tab,
+          {
+            tabId: category.name,
+            "aria-current": category === selectedCategory ? "true" : void 0,
+            children: category.label
+          },
+          category.name
+        )) }),
+        categories.map((category) => /* @__PURE__ */ jsx(
+          Tabs.TabPanel,
+          {
+            tabId: category.name,
+            focusable: false,
+            children: /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                className: "block-editor-inserter__category-panel",
+                initial: !previousSelectedCategory ? "closed" : "open",
+                animate: "open",
+                variants: {
+                  open: {
+                    transform: "translateX( 0 )",
+                    transitionEnd: {
+                      zIndex: "1"
+                    }
+                  },
+                  closed: {
+                    transform: "translateX( -100% )",
+                    zIndex: "-1"
+                  }
+                },
+                transition: defaultTransition,
+                children
+              }
+            )
+          },
+          category.name
+        ))
+      ]
+    }
+  );
+}
+var category_tabs_default = CategoryTabs;
+export {
+  category_tabs_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/inserter/hooks/use-block-types-state.mjs

@@ -0,0 +1,86 @@
+// packages/block-editor/src/components/inserter/hooks/use-block-types-state.js
+import {
+  getBlockType,
+  createBlock,
+  createBlocksFromInnerBlocksTemplate,
+  store as blocksStore,
+  parse
+} from "@wordpress/blocks";
+import { useSelect, useDispatch } from "@wordpress/data";
+import { useCallback, useMemo } from "@wordpress/element";
+import { store as noticesStore } from "@wordpress/notices";
+import { __, sprintf } from "@wordpress/i18n";
+import { store as blockEditorStore } from "../../../store/index.mjs";
+import { isFiltered } from "../../../store/utils.mjs";
+import { unlock } from "../../../lock-unlock.mjs";
+var useBlockTypesState = (rootClientId, onInsert, isQuick) => {
+  const options = useMemo(
+    () => ({ [isFiltered]: !!isQuick }),
+    [isQuick]
+  );
+  const [items] = useSelect(
+    (select) => [
+      select(blockEditorStore).getInserterItems(
+        rootClientId,
+        options
+      )
+    ],
+    [rootClientId, options]
+  );
+  const { getClosestAllowedInsertionPoint } = unlock(
+    useSelect(blockEditorStore)
+  );
+  const { createErrorNotice } = useDispatch(noticesStore);
+  const [categories, collections] = useSelect((select) => {
+    const { getCategories, getCollections } = select(blocksStore);
+    return [getCategories(), getCollections()];
+  }, []);
+  const onSelectItem = useCallback(
+    ({ name, initialAttributes, innerBlocks, syncStatus, content }, shouldFocusBlock) => {
+      const destinationClientId = getClosestAllowedInsertionPoint(
+        name,
+        rootClientId
+      );
+      if (destinationClientId === null) {
+        const title = getBlockType(name)?.title ?? name;
+        createErrorNotice(
+          sprintf(
+            /* translators: %s: block pattern title. */
+            __(`Block "%s" can't be inserted.`),
+            title
+          ),
+          {
+            type: "snackbar",
+            id: "inserter-notice"
+          }
+        );
+        return;
+      }
+      const insertedBlock = syncStatus === "unsynced" ? parse(content, {
+        __unstableSkipMigrationLogs: true
+      }) : createBlock(
+        name,
+        initialAttributes,
+        createBlocksFromInnerBlocksTemplate(innerBlocks)
+      );
+      onInsert(
+        insertedBlock,
+        void 0,
+        shouldFocusBlock,
+        destinationClientId
+      );
+    },
+    [
+      getClosestAllowedInsertionPoint,
+      rootClientId,
+      onInsert,
+      createErrorNotice
+    ]
+  );
+  return [items, categories, collections, onSelectItem];
+};
+var use_block_types_state_default = useBlockTypesState;
+export {
+  use_block_types_state_default as default
+};
+//# sourceMappingURL=use-block-types-state.mjs.map

package/build-module/components/inserter/hooks/use-insertion-point.mjs

@@ -0,0 +1,180 @@
+// packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
+import { useDispatch, useRegistry, useSelect } from "@wordpress/data";
+import { isUnmodifiedDefaultBlock } from "@wordpress/blocks";
+import { _n, sprintf } from "@wordpress/i18n";
+import { speak } from "@wordpress/a11y";
+import { useCallback } from "@wordpress/element";
+import { store as blockEditorStore } from "../../../store/index.mjs";
+import { unlock } from "../../../lock-unlock.mjs";
+function getIndex({
+  destinationRootClientId,
+  destinationIndex,
+  rootClientId,
+  registry
+}) {
+  if (rootClientId === destinationRootClientId) {
+    return destinationIndex;
+  }
+  const parents = [
+    "",
+    ...registry.select(blockEditorStore).getBlockParents(destinationRootClientId),
+    destinationRootClientId
+  ];
+  const parentIndex = parents.indexOf(rootClientId);
+  if (parentIndex !== -1) {
+    return registry.select(blockEditorStore).getBlockIndex(parents[parentIndex + 1]) + 1;
+  }
+  return registry.select(blockEditorStore).getBlockOrder(rootClientId).length;
+}
+function useInsertionPoint({
+  rootClientId = "",
+  insertionIndex,
+  clientId,
+  isAppender,
+  onSelect,
+  shouldFocusBlock = true,
+  selectBlockOnInsert = true
+}) {
+  const registry = useRegistry();
+  const {
+    getSelectedBlock,
+    getClosestAllowedInsertionPoint,
+    isBlockInsertionPointVisible
+  } = unlock(useSelect(blockEditorStore));
+  const { destinationRootClientId, destinationIndex } = useSelect(
+    (select) => {
+      const {
+        getSelectedBlockClientId,
+        getBlockRootClientId,
+        getBlockIndex,
+        getBlockOrder,
+        getInsertionPoint
+      } = unlock(select(blockEditorStore));
+      const selectedBlockClientId = getSelectedBlockClientId();
+      let _destinationRootClientId = rootClientId;
+      let _destinationIndex;
+      const insertionPoint = getInsertionPoint();
+      if (insertionIndex !== void 0) {
+        _destinationIndex = insertionIndex;
+      } else if (insertionPoint && insertionPoint.hasOwnProperty("index")) {
+        _destinationRootClientId = insertionPoint?.rootClientId ? insertionPoint.rootClientId : rootClientId;
+        _destinationIndex = insertionPoint.index;
+      } else if (clientId) {
+        _destinationIndex = getBlockIndex(clientId);
+      } else if (!isAppender && selectedBlockClientId) {
+        _destinationRootClientId = getBlockRootClientId(
+          selectedBlockClientId
+        );
+        _destinationIndex = getBlockIndex(selectedBlockClientId) + 1;
+      } else {
+        _destinationIndex = getBlockOrder(
+          _destinationRootClientId
+        ).length;
+      }
+      return {
+        destinationRootClientId: _destinationRootClientId,
+        destinationIndex: _destinationIndex
+      };
+    },
+    [rootClientId, insertionIndex, clientId, isAppender]
+  );
+  const {
+    replaceBlocks,
+    insertBlocks,
+    showInsertionPoint,
+    hideInsertionPoint,
+    setLastFocus
+  } = unlock(useDispatch(blockEditorStore));
+  const onInsertBlocks = useCallback(
+    (blocks, meta, shouldForceFocusBlock = false, _rootClientId) => {
+      if (shouldForceFocusBlock || shouldFocusBlock || selectBlockOnInsert) {
+        setLastFocus(null);
+      }
+      const selectedBlock = getSelectedBlock();
+      if (!isAppender && selectedBlock && isUnmodifiedDefaultBlock(selectedBlock, "content")) {
+        replaceBlocks(
+          selectedBlock.clientId,
+          blocks,
+          null,
+          shouldFocusBlock || shouldForceFocusBlock ? 0 : null,
+          meta
+        );
+      } else {
+        insertBlocks(
+          blocks,
+          isAppender || _rootClientId === void 0 ? destinationIndex : getIndex({
+            destinationRootClientId,
+            destinationIndex,
+            rootClientId: _rootClientId,
+            registry
+          }),
+          isAppender || _rootClientId === void 0 ? destinationRootClientId : _rootClientId,
+          selectBlockOnInsert,
+          shouldFocusBlock || shouldForceFocusBlock ? 0 : null,
+          meta
+        );
+      }
+      const blockLength = Array.isArray(blocks) ? blocks.length : 1;
+      const message = sprintf(
+        // translators: %d: the name of the block that has been added
+        _n("%d block added.", "%d blocks added.", blockLength),
+        blockLength
+      );
+      speak(message);
+      if (onSelect) {
+        onSelect(blocks);
+      }
+    },
+    [
+      isAppender,
+      getSelectedBlock,
+      replaceBlocks,
+      insertBlocks,
+      destinationRootClientId,
+      destinationIndex,
+      onSelect,
+      shouldFocusBlock,
+      selectBlockOnInsert,
+      setLastFocus,
+      registry
+    ]
+  );
+  const onToggleInsertionPoint = useCallback(
+    (item) => {
+      if (item && !isBlockInsertionPointVisible()) {
+        const allowedDestinationRootClientId = getClosestAllowedInsertionPoint(
+          item.name,
+          destinationRootClientId
+        );
+        if (allowedDestinationRootClientId !== null) {
+          showInsertionPoint(
+            allowedDestinationRootClientId,
+            getIndex({
+              destinationRootClientId,
+              destinationIndex,
+              rootClientId: allowedDestinationRootClientId,
+              registry
+            })
+          );
+        }
+      } else {
+        hideInsertionPoint();
+      }
+    },
+    [
+      getClosestAllowedInsertionPoint,
+      isBlockInsertionPointVisible,
+      showInsertionPoint,
+      hideInsertionPoint,
+      destinationRootClientId,
+      destinationIndex,
+      registry
+    ]
+  );
+  return [destinationRootClientId, onInsertBlocks, onToggleInsertionPoint];
+}
+var use_insertion_point_default = useInsertionPoint;
+export {
+  use_insertion_point_default as default
+};
+//# sourceMappingURL=use-insertion-point.mjs.map

package/build-module/components/inserter/hooks/use-patterns-paging.mjs

@@ -0,0 +1,49 @@
+// packages/block-editor/src/components/inserter/hooks/use-patterns-paging.js
+import { useMemo, useState, useEffect } from "@wordpress/element";
+import { usePrevious } from "@wordpress/compose";
+import { getScrollContainer } from "@wordpress/dom";
+var PAGE_SIZE = 20;
+function usePatternsPaging(currentCategoryPatterns, currentCategory, scrollContainerRef, currentFilter = "") {
+  const [currentPage, setCurrentPage] = useState(1);
+  const previousCategory = usePrevious(currentCategory);
+  const previousFilter = usePrevious(currentFilter);
+  if ((previousCategory !== currentCategory || previousFilter !== currentFilter) && currentPage !== 1) {
+    setCurrentPage(1);
+  }
+  const totalItems = currentCategoryPatterns.length;
+  const pageIndex = currentPage - 1;
+  const categoryPatterns = useMemo(() => {
+    return currentCategoryPatterns.slice(
+      pageIndex * PAGE_SIZE,
+      pageIndex * PAGE_SIZE + PAGE_SIZE
+    );
+  }, [pageIndex, currentCategoryPatterns]);
+  const numPages = Math.ceil(currentCategoryPatterns.length / PAGE_SIZE);
+  const changePage = (page) => {
+    const scrollContainer = getScrollContainer(
+      scrollContainerRef?.current
+    );
+    scrollContainer?.scrollTo(0, 0);
+    setCurrentPage(page);
+  };
+  useEffect(
+    function scrollToTopOnCategoryChange() {
+      const scrollContainer = getScrollContainer(
+        scrollContainerRef?.current
+      );
+      scrollContainer?.scrollTo(0, 0);
+    },
+    [currentCategory, scrollContainerRef]
+  );
+  return {
+    totalItems,
+    categoryPatterns,
+    numPages,
+    changePage,
+    currentPage
+  };
+}
+export {
+  usePatternsPaging as default
+};
+//# sourceMappingURL=use-patterns-paging.mjs.map

package/build-module/components/inserter/hooks/use-patterns-state.mjs

@@ -0,0 +1,104 @@
+// packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
+import { useCallback, useMemo } from "@wordpress/element";
+import { cloneBlock, createBlock } from "@wordpress/blocks";
+import { useDispatch, useSelect } from "@wordpress/data";
+import { __, sprintf } from "@wordpress/i18n";
+import { store as noticesStore } from "@wordpress/notices";
+import { store as blockEditorStore } from "../../../store/index.mjs";
+import { unlock } from "../../../lock-unlock.mjs";
+import { INSERTER_PATTERN_TYPES } from "../block-patterns-tab/utils.mjs";
+import { isFiltered } from "../../../store/utils.mjs";
+var usePatternsState = (onInsert, rootClientId, selectedCategory, isQuick) => {
+  const options = useMemo(
+    () => ({ [isFiltered]: !!isQuick }),
+    [isQuick]
+  );
+  const { patternCategories, patterns, userPatternCategories } = useSelect(
+    (select) => {
+      const { getSettings, __experimentalGetAllowedPatterns } = unlock(
+        select(blockEditorStore)
+      );
+      const {
+        __experimentalUserPatternCategories,
+        __experimentalBlockPatternCategories
+      } = getSettings();
+      return {
+        patterns: __experimentalGetAllowedPatterns(
+          rootClientId,
+          options
+        ),
+        userPatternCategories: __experimentalUserPatternCategories,
+        patternCategories: __experimentalBlockPatternCategories
+      };
+    },
+    [rootClientId, options]
+  );
+  const { getClosestAllowedInsertionPointForPattern } = unlock(
+    useSelect(blockEditorStore)
+  );
+  const allCategories = useMemo(() => {
+    const categories = [...patternCategories];
+    userPatternCategories?.forEach((userCategory) => {
+      if (!categories.find(
+        (existingCategory) => existingCategory.name === userCategory.name
+      )) {
+        categories.push(userCategory);
+      }
+    });
+    return categories;
+  }, [patternCategories, userPatternCategories]);
+  const { createSuccessNotice } = useDispatch(noticesStore);
+  const onClickPattern = useCallback(
+    (pattern, blocks) => {
+      const destinationRootClientId = isQuick ? rootClientId : getClosestAllowedInsertionPointForPattern(
+        pattern,
+        rootClientId
+      );
+      if (destinationRootClientId === null) {
+        return;
+      }
+      const patternBlocks = pattern.type === INSERTER_PATTERN_TYPES.user && pattern.syncStatus !== "unsynced" ? [createBlock("core/block", { ref: pattern.id })] : blocks;
+      onInsert(
+        (patternBlocks ?? []).map((block) => {
+          const clonedBlock = cloneBlock(block);
+          if (clonedBlock.attributes.metadata?.categories?.includes(
+            selectedCategory
+          )) {
+            clonedBlock.attributes.metadata.categories = [
+              selectedCategory
+            ];
+          }
+          return clonedBlock;
+        }),
+        pattern.name,
+        false,
+        destinationRootClientId
+      );
+      createSuccessNotice(
+        sprintf(
+          /* translators: %s: block pattern title. */
+          __('Block pattern "%s" inserted.'),
+          pattern.title
+        ),
+        {
+          type: "snackbar",
+          id: "inserter-notice"
+        }
+      );
+    },
+    [
+      createSuccessNotice,
+      onInsert,
+      selectedCategory,
+      rootClientId,
+      getClosestAllowedInsertionPointForPattern,
+      isQuick
+    ]
+  );
+  return [patterns, allCategories, onClickPattern];
+};
+var use_patterns_state_default = usePatternsState;
+export {
+  use_patterns_state_default as default
+};
+//# sourceMappingURL=use-patterns-state.mjs.map