@wordpress/block-editor/build/components/inserter/block-patterns-tab.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BlockPatternsCategoryDialog = BlockPatternsCategoryDialog;
exports.BlockPatternsCategoryPanel = BlockPatternsCategoryPanel;
exports.default = void 0;

var _element = require("@wordpress/element");

var _i18n = require("@wordpress/i18n");

var _compose = require("@wordpress/compose");

var _components = require("@wordpress/components");

var _icons = require("@wordpress/icons");

var _dom = require("@wordpress/dom");

var _usePatternsState = _interopRequireDefault(require("./hooks/use-patterns-state"));

var _blockPatternsList = _interopRequireDefault(require("../block-patterns-list"));

var _explorer = _interopRequireDefault(require("./block-patterns-explorer/explorer"));

var _mobileTabNavigation = _interopRequireDefault(require("./mobile-tab-navigation"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const noop = () => {}; // Preferred order of pattern categories. Any other categories should
// be at the bottom without any re-ordering.


const patternCategoriesOrder = ['featured', 'posts', 'text', 'gallery', 'call-to-action', 'banner', 'header', 'footer'];

function usePatternsCategories(rootClientId) {
  const [allPatterns, allCategories] = (0, _usePatternsState.default)(undefined, rootClientId);
  const hasRegisteredCategory = (0, _element.useCallback)(pattern => {
    if (!pattern.categories || !pattern.categories.length) {
      return false;
    }

    return pattern.categories.some(cat => allCategories.some(category => category.name === cat));
  }, [allCategories]); // Remove any empty categories.

  const populatedCategories = (0, _element.useMemo)(() => {
    const categories = allCategories.filter(category => allPatterns.some(pattern => pattern.categories?.includes(category.name))).sort(({
      name: aName
    }, {
      name: bName
    }) => {
      // Sort categories according to `patternCategoriesOrder`.
      let aIndex = patternCategoriesOrder.indexOf(aName);
      let bIndex = patternCategoriesOrder.indexOf(bName); // All other categories should come after that.

      if (aIndex < 0) aIndex = patternCategoriesOrder.length;
      if (bIndex < 0) bIndex = patternCategoriesOrder.length;
      return aIndex - bIndex;
    });

    if (allPatterns.some(pattern => !hasRegisteredCategory(pattern)) && !categories.find(category => category.name === 'uncategorized')) {
      categories.push({
        name: 'uncategorized',
        label: (0, _i18n._x)('Uncategorized')
      });
    }

    return categories;
  }, [allPatterns, allCategories]);
  return populatedCategories;
}

function BlockPatternsCategoryDialog({
  rootClientId,
  onInsert,
  onHover,
  category,
  showTitlesAsTooltip
}) {
  const container = (0, _element.useRef)();
  (0, _element.useEffect)(() => {
    const timeout = setTimeout(() => {
      const [firstTabbable] = _dom.focus.tabbable.find(container.current);

      firstTabbable?.focus();
    });
    return () => clearTimeout(timeout);
  }, [category]);
  return (0, _element.createElement)("div", {
    ref: container,
    className: "block-editor-inserter__patterns-category-dialog"
  }, (0, _element.createElement)(BlockPatternsCategoryPanel, {
    rootClientId: rootClientId,
    onInsert: onInsert,
    onHover: onHover,
    category: category,
    showTitlesAsTooltip: showTitlesAsTooltip
  }));
}

function BlockPatternsCategoryPanel({
  rootClientId,
  onInsert,
  onHover = noop,
  category,
  showTitlesAsTooltip
}) {
  const [allPatterns,, onClick] = (0, _usePatternsState.default)(onInsert, rootClientId);
  const availableCategories = usePatternsCategories(rootClientId);
  const currentCategoryPatterns = (0, _element.useMemo)(() => allPatterns.filter(pattern => {
    var _pattern$categories$f;

    if (category.name !== 'uncategorized') {
      return pattern.categories?.includes(category.name);
    } // The uncategorized category should show all the patterns without any category
    // or with no available category.


    const availablePatternCategories = (_pattern$categories$f = pattern.categories?.filter(cat => availableCategories.find(availableCategory => availableCategory.name === cat))) !== null && _pattern$categories$f !== void 0 ? _pattern$categories$f : [];
    return availablePatternCategories.length === 0;
  }), [allPatterns, category]);
  const currentShownPatterns = (0, _compose.useAsyncList)(currentCategoryPatterns); // Hide block pattern preview on unmount.

  (0, _element.useEffect)(() => () => onHover(null), []);

  if (!currentCategoryPatterns.length) {
    return null;
  }

  return (0, _element.createElement)("div", {
    className: "block-editor-inserter__patterns-category-panel"
  }, (0, _element.createElement)("div", {
    className: "block-editor-inserter__patterns-category-panel-title"
  }, category.label), (0, _element.createElement)("p", null, category.description), (0, _element.createElement)(_blockPatternsList.default, {
    shownPatterns: currentShownPatterns,
    blockPatterns: currentCategoryPatterns,
    onClickPattern: onClick,
    onHover: onHover,
    label: category.label,
    orientation: "vertical",
    category: category.label,
    isDraggable: true,
    showTitlesAsTooltip: showTitlesAsTooltip
  }));
}

function BlockPatternsTabs({
  onSelectCategory,
  selectedCategory,
  onInsert,
  rootClientId
}) {
  const [showPatternsExplorer, setShowPatternsExplorer] = (0, _element.useState)(false);
  const categories = usePatternsCategories(rootClientId);
  const initialCategory = selectedCategory || categories[0];
  const isMobile = (0, _compose.useViewportMatch)('medium', '<');
  return (0, _element.createElement)(_element.Fragment, null, !isMobile && (0, _element.createElement)("div", {
    className: "block-editor-inserter__block-patterns-tabs-container"
  }, (0, _element.createElement)("nav", {
    "aria-label": (0, _i18n.__)('Block pattern categories')
  }, (0, _element.createElement)(_components.__experimentalItemGroup, {
    role: "list",
    className: "block-editor-inserter__block-patterns-tabs"
  }, categories.map(category => (0, _element.createElement)(_components.__experimentalItem, {
    role: "listitem",
    key: category.name,
    onClick: () => onSelectCategory(category),
    className: category === selectedCategory ? 'block-editor-inserter__patterns-category block-editor-inserter__patterns-selected-category' : 'block-editor-inserter__patterns-category',
    "aria-label": category.label,
    "aria-current": category === selectedCategory ? 'true' : undefined
  }, (0, _element.createElement)(_components.__experimentalHStack, null, (0, _element.createElement)(_components.FlexBlock, null, category.label), (0, _element.createElement)(_icons.Icon, {
    icon: _icons.chevronRight
  })))), (0, _element.createElement)("div", {
    role: "listitem"
  }, (0, _element.createElement)(_components.Button, {
    className: "block-editor-inserter__patterns-explore-button",
    onClick: () => setShowPatternsExplorer(true),
    variant: "secondary"
  }, (0, _i18n.__)('Explore all patterns')))))), isMobile && (0, _element.createElement)(_mobileTabNavigation.default, {
    categories: categories
  }, category => (0, _element.createElement)(BlockPatternsCategoryPanel, {
    onInsert: onInsert,
    rootClientId: rootClientId,
    category: category,
    showTitlesAsTooltip: false
  })), showPatternsExplorer && (0, _element.createElement)(_explorer.default, {
    initialCategory: initialCategory,
    patternCategories: categories,
    onModalClose: () => setShowPatternsExplorer(false)
  }));
}

var _default = BlockPatternsTabs;
exports.default = _default;
//# sourceMappingURL=block-patterns-tab.js.map