@wordpress/block-library 9.36.2-next.8fd3f8831.0 → 9.37.2-next.79a2f3cdd.0

package/build-module/template-part/edit/advanced-controls.mjs

@@ -0,0 +1,105 @@
+// packages/block-library/src/template-part/edit/advanced-controls.js
+import { useEntityProp, store as coreStore } from "@wordpress/core-data";
+import { SelectControl, TextControl } from "@wordpress/components";
+import { sprintf, __ } from "@wordpress/i18n";
+import { useSelect } from "@wordpress/data";
+import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
+import { TemplatePartImportControls } from "./import-controls.mjs";
+import { unlock } from "../../lock-unlock.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var { HTMLElementControl } = unlock(blockEditorPrivateApis);
+function TemplatePartAdvancedControls({
+  tagName,
+  setAttributes,
+  isEntityAvailable,
+  templatePartId,
+  defaultWrapper,
+  hasInnerBlocks,
+  clientId
+}) {
+  const [area, setArea] = useEntityProp(
+    "postType",
+    "wp_template_part",
+    "area",
+    templatePartId
+  );
+  const [title, setTitle] = useEntityProp(
+    "postType",
+    "wp_template_part",
+    "title",
+    templatePartId
+  );
+  const defaultTemplatePartAreas = useSelect(
+    (select) => select(coreStore).getCurrentTheme()?.default_template_part_areas || [],
+    []
+  );
+  const areaOptions = defaultTemplatePartAreas.map(
+    ({ label, area: _area }) => ({
+      label,
+      value: _area
+    })
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isEntityAvailable && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        TextControl,
+        {
+          __next40pxDefaultSize: true,
+          label: __("Title"),
+          value: title,
+          onChange: (value) => {
+            setTitle(value);
+          },
+          onFocus: (event) => event.target.select()
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SelectControl,
+        {
+          __next40pxDefaultSize: true,
+          label: __("Area"),
+          labelPosition: "top",
+          options: areaOptions,
+          value: area,
+          onChange: setArea
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      HTMLElementControl,
+      {
+        tagName: tagName || "",
+        onChange: (value) => setAttributes({ tagName: value }),
+        clientId,
+        options: [
+          {
+            label: sprintf(
+              /* translators: %s: HTML tag based on area. */
+              __("Default based on area (%s)"),
+              `<${defaultWrapper}>`
+            ),
+            value: ""
+          },
+          { label: "<header>", value: "header" },
+          { label: "<main>", value: "main" },
+          { label: "<section>", value: "section" },
+          { label: "<article>", value: "article" },
+          { label: "<aside>", value: "aside" },
+          { label: "<footer>", value: "footer" },
+          { label: "<div>", value: "div" }
+        ]
+      }
+    ),
+    !hasInnerBlocks && /* @__PURE__ */ jsx(
+      TemplatePartImportControls,
+      {
+        area,
+        setAttributes
+      }
+    )
+  ] });
+}
+export {
+  TemplatePartAdvancedControls
+};
+//# sourceMappingURL=advanced-controls.mjs.map

package/build-module/template-part/edit/import-controls.mjs

@@ -0,0 +1,142 @@
+// packages/block-library/src/template-part/edit/import-controls.js
+import { __, _x, sprintf } from "@wordpress/i18n";
+import { useMemo, useState } from "@wordpress/element";
+import { useDispatch, useSelect, useRegistry } from "@wordpress/data";
+import {
+  Button,
+  FlexBlock,
+  FlexItem,
+  SelectControl,
+  __experimentalHStack as HStack,
+  __experimentalSpacer as Spacer
+} from "@wordpress/components";
+import { store as coreStore } from "@wordpress/core-data";
+import { store as noticesStore } from "@wordpress/notices";
+import { useCreateTemplatePartFromBlocks } from "./utils/hooks.mjs";
+import { transformWidgetToBlock } from "./utils/transformers.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SIDEBARS_QUERY = {
+  per_page: -1,
+  _fields: "id,name,description,status,widgets"
+};
+function TemplatePartImportControls({ area, setAttributes }) {
+  const [selectedSidebar, setSelectedSidebar] = useState("");
+  const [isBusy, setIsBusy] = useState(false);
+  const registry = useRegistry();
+  const { sidebars, hasResolved } = useSelect((select) => {
+    const { getSidebars, hasFinishedResolution } = select(coreStore);
+    return {
+      sidebars: getSidebars(SIDEBARS_QUERY),
+      hasResolved: hasFinishedResolution("getSidebars", [
+        SIDEBARS_QUERY
+      ])
+    };
+  }, []);
+  const { createErrorNotice } = useDispatch(noticesStore);
+  const createFromBlocks = useCreateTemplatePartFromBlocks(
+    area,
+    setAttributes
+  );
+  const options = useMemo(() => {
+    const sidebarOptions = (sidebars ?? []).filter(
+      (widgetArea) => widgetArea.id !== "wp_inactive_widgets" && widgetArea.widgets.length > 0
+    ).map((widgetArea) => {
+      return {
+        value: widgetArea.id,
+        label: widgetArea.name
+      };
+    });
+    if (!sidebarOptions.length) {
+      return [];
+    }
+    return [
+      { value: "", label: __("Select widget area") },
+      ...sidebarOptions
+    ];
+  }, [sidebars]);
+  if (!hasResolved) {
+    return /* @__PURE__ */ jsx(Spacer, { marginBottom: "0" });
+  }
+  if (hasResolved && !options.length) {
+    return null;
+  }
+  async function createFromWidgets(event) {
+    event.preventDefault();
+    if (isBusy || !selectedSidebar) {
+      return;
+    }
+    setIsBusy(true);
+    const sidebar = options.find(
+      ({ value }) => value === selectedSidebar
+    );
+    const { getWidgets } = registry.resolveSelect(coreStore);
+    const widgets = await getWidgets({
+      sidebar: sidebar.value,
+      _embed: "about"
+    });
+    const skippedWidgets = /* @__PURE__ */ new Set();
+    const blocks = widgets.flatMap((widget) => {
+      const block = transformWidgetToBlock(widget);
+      if (!block) {
+        skippedWidgets.add(widget.id_base);
+        return [];
+      }
+      return block;
+    });
+    await createFromBlocks(
+      blocks,
+      /* translators: %s: name of the widget area */
+      sprintf(__("Widget area: %s"), sidebar.label)
+    );
+    if (skippedWidgets.size) {
+      createErrorNotice(
+        sprintf(
+          /* translators: %s: the list of widgets */
+          __("Unable to import the following widgets: %s."),
+          Array.from(skippedWidgets).join(", ")
+        ),
+        {
+          type: "snackbar"
+        }
+      );
+    }
+    setIsBusy(false);
+  }
+  return /* @__PURE__ */ jsx(Spacer, { marginBottom: "4", children: /* @__PURE__ */ jsxs(HStack, { as: "form", onSubmit: createFromWidgets, children: [
+    /* @__PURE__ */ jsx(FlexBlock, { children: /* @__PURE__ */ jsx(
+      SelectControl,
+      {
+        label: __("Import widget area"),
+        value: selectedSidebar,
+        options,
+        onChange: (value) => setSelectedSidebar(value),
+        disabled: !options.length,
+        __next40pxDefaultSize: true
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      FlexItem,
+      {
+        style: {
+          marginBottom: "8px",
+          marginTop: "auto"
+        },
+        children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            __next40pxDefaultSize: true,
+            variant: "primary",
+            type: "submit",
+            isBusy,
+            "aria-disabled": isBusy || !selectedSidebar,
+            children: _x("Import", "button label")
+          }
+        )
+      }
+    )
+  ] }) });
+}
+export {
+  TemplatePartImportControls
+};
+//# sourceMappingURL=import-controls.mjs.map

package/build-module/template-part/edit/index.mjs

@@ -0,0 +1,277 @@
+// packages/block-library/src/template-part/edit/index.js
+import { serialize } from "@wordpress/blocks";
+import { useSelect, useDispatch } from "@wordpress/data";
+import {
+  BlockSettingsMenuControls,
+  useBlockProps,
+  Warning,
+  store as blockEditorStore,
+  RecursionProvider,
+  useHasRecursion,
+  InspectorControls,
+  __experimentalBlockPatternsList as BlockPatternsList,
+  BlockControls
+} from "@wordpress/block-editor";
+import {
+  PanelBody,
+  Spinner,
+  Modal,
+  MenuItem,
+  ToolbarButton
+} from "@wordpress/components";
+import { __, sprintf } from "@wordpress/i18n";
+import { store as coreStore } from "@wordpress/core-data";
+import { useState } from "@wordpress/element";
+import { store as noticesStore } from "@wordpress/notices";
+import TemplatePartPlaceholder from "./placeholder.mjs";
+import TemplatePartSelectionModal from "./selection-modal.mjs";
+import { TemplatePartAdvancedControls } from "./advanced-controls.mjs";
+import TemplatePartInnerBlocks from "./inner-blocks.mjs";
+import { createTemplatePartId } from "./utils/create-template-part-id.mjs";
+import {
+  useAlternativeBlockPatterns,
+  useAlternativeTemplateParts,
+  useTemplatePartArea
+} from "./utils/hooks.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ReplaceButton({
+  isEntityAvailable,
+  area,
+  templatePartId,
+  isTemplatePartSelectionOpen,
+  setIsTemplatePartSelectionOpen
+}) {
+  const { templateParts } = useAlternativeTemplateParts(
+    area,
+    templatePartId
+  );
+  const hasReplacements = !!templateParts.length;
+  const canReplace = isEntityAvailable && hasReplacements && (area === "header" || area === "footer");
+  if (!canReplace) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      onClick: () => {
+        setIsTemplatePartSelectionOpen(true);
+      },
+      "aria-expanded": isTemplatePartSelectionOpen,
+      "aria-haspopup": "dialog",
+      children: __("Replace")
+    }
+  );
+}
+function TemplatesList({ area, clientId, isEntityAvailable, onSelect }) {
+  const blockPatterns = useAlternativeBlockPatterns(area, clientId);
+  const canReplace = isEntityAvailable && !!blockPatterns.length && (area === "header" || area === "footer");
+  if (!canReplace) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(PanelBody, { title: __("Design"), children: /* @__PURE__ */ jsx(
+    BlockPatternsList,
+    {
+      label: __("Templates"),
+      blockPatterns,
+      onClickPattern: onSelect,
+      showTitlesAsTooltip: true
+    }
+  ) });
+}
+function TemplatePartEdit({
+  attributes,
+  setAttributes,
+  clientId
+}) {
+  const { createSuccessNotice } = useDispatch(noticesStore);
+  const { editEntityRecord } = useDispatch(coreStore);
+  const currentTheme = useSelect(
+    (select) => select(coreStore).getCurrentTheme()?.stylesheet,
+    []
+  );
+  const { slug, theme = currentTheme, tagName, layout = {} } = attributes;
+  const templatePartId = createTemplatePartId(theme, slug);
+  const hasAlreadyRendered = useHasRecursion(templatePartId);
+  const [isTemplatePartSelectionOpen, setIsTemplatePartSelectionOpen] = useState(false);
+  const {
+    isResolved,
+    hasInnerBlocks,
+    isMissing,
+    area,
+    onNavigateToEntityRecord,
+    title,
+    canUserEdit
+  } = useSelect(
+    (select) => {
+      const { getEditedEntityRecord, hasFinishedResolution } = select(coreStore);
+      const { getBlockCount, getSettings } = select(blockEditorStore);
+      const getEntityArgs = [
+        "postType",
+        "wp_template_part",
+        templatePartId
+      ];
+      const entityRecord = templatePartId ? getEditedEntityRecord(...getEntityArgs) : null;
+      const _area = entityRecord?.area || attributes.area;
+      const hasResolvedEntity = templatePartId ? hasFinishedResolution(
+        "getEditedEntityRecord",
+        getEntityArgs
+      ) : false;
+      const _canUserEdit = hasResolvedEntity ? select(coreStore).canUser("update", {
+        kind: "postType",
+        name: "wp_template_part",
+        id: templatePartId
+      }) : false;
+      return {
+        hasInnerBlocks: getBlockCount(clientId) > 0,
+        isResolved: hasResolvedEntity,
+        isMissing: hasResolvedEntity && (!entityRecord || Object.keys(entityRecord).length === 0),
+        area: _area,
+        onNavigateToEntityRecord: getSettings().onNavigateToEntityRecord,
+        title: entityRecord?.title,
+        canUserEdit: !!_canUserEdit
+      };
+    },
+    [templatePartId, attributes.area, clientId]
+  );
+  const areaObject = useTemplatePartArea(area);
+  const blockProps = useBlockProps();
+  const isPlaceholder = !slug;
+  const isEntityAvailable = !isPlaceholder && !isMissing && isResolved;
+  const TagName = tagName || areaObject.tagName;
+  const onPatternSelect = async (pattern) => {
+    await editEntityRecord(
+      "postType",
+      "wp_template_part",
+      templatePartId,
+      {
+        blocks: pattern.blocks,
+        content: serialize(pattern.blocks)
+      }
+    );
+    createSuccessNotice(
+      sprintf(
+        /* translators: %s: template part title. */
+        __('Template Part "%s" updated.'),
+        title || slug
+      ),
+      {
+        type: "snackbar"
+      }
+    );
+  };
+  if (!hasInnerBlocks && (slug && !theme || slug && isMissing)) {
+    return /* @__PURE__ */ jsx(TagName, { ...blockProps, children: /* @__PURE__ */ jsx(Warning, { children: sprintf(
+      /* translators: %s: Template part slug. */
+      __(
+        "Template part has been deleted or is unavailable: %s"
+      ),
+      slug
+    ) }) });
+  }
+  if (isEntityAvailable && hasAlreadyRendered) {
+    return /* @__PURE__ */ jsx(TagName, { ...blockProps, children: /* @__PURE__ */ jsx(Warning, { children: __("Block cannot be rendered inside itself.") }) });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(RecursionProvider, { uniqueId: templatePartId, children: [
+      isEntityAvailable && onNavigateToEntityRecord && canUserEdit && /* @__PURE__ */ jsx(BlockControls, { group: "other", children: /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          onClick: () => {
+            onNavigateToEntityRecord({
+              postId: templatePartId,
+              postType: "wp_template_part"
+            });
+          },
+          children: window?.__experimentalContentOnlyPatternInsertion ? __("Edit section") : __("Edit")
+        }
+      ) }),
+      canUserEdit && /* @__PURE__ */ jsx(InspectorControls, { group: "advanced", children: /* @__PURE__ */ jsx(
+        TemplatePartAdvancedControls,
+        {
+          tagName,
+          setAttributes,
+          isEntityAvailable,
+          templatePartId,
+          defaultWrapper: areaObject.tagName,
+          hasInnerBlocks,
+          clientId
+        }
+      ) }),
+      isPlaceholder && /* @__PURE__ */ jsx(TagName, { ...blockProps, children: /* @__PURE__ */ jsx(
+        TemplatePartPlaceholder,
+        {
+          area: attributes.area,
+          templatePartId,
+          clientId,
+          setAttributes,
+          onOpenSelectionModal: () => setIsTemplatePartSelectionOpen(true)
+        }
+      ) }),
+      /* @__PURE__ */ jsx(BlockSettingsMenuControls, { children: ({ selectedClientIds }) => {
+        if (!(selectedClientIds.length === 1 && clientId === selectedClientIds[0])) {
+          return null;
+        }
+        return /* @__PURE__ */ jsx(
+          ReplaceButton,
+          {
+            ...{
+              isEntityAvailable,
+              area,
+              clientId,
+              templatePartId,
+              isTemplatePartSelectionOpen,
+              setIsTemplatePartSelectionOpen
+            }
+          }
+        );
+      } }),
+      /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsx(
+        TemplatesList,
+        {
+          area,
+          clientId,
+          isEntityAvailable,
+          onSelect: (pattern) => onPatternSelect(pattern)
+        }
+      ) }),
+      isEntityAvailable && /* @__PURE__ */ jsx(
+        TemplatePartInnerBlocks,
+        {
+          tagName: TagName,
+          blockProps,
+          postId: templatePartId,
+          hasInnerBlocks,
+          layout
+        }
+      ),
+      !isPlaceholder && !isResolved && /* @__PURE__ */ jsx(TagName, { ...blockProps, children: /* @__PURE__ */ jsx(Spinner, {}) })
+    ] }),
+    isTemplatePartSelectionOpen && /* @__PURE__ */ jsx(
+      Modal,
+      {
+        overlayClassName: "block-editor-template-part__selection-modal",
+        title: sprintf(
+          // Translators: %s as template part area title ("Header", "Footer", etc.).
+          __("Choose a %s"),
+          areaObject.label.toLowerCase()
+        ),
+        onRequestClose: () => setIsTemplatePartSelectionOpen(false),
+        isFullScreen: true,
+        children: /* @__PURE__ */ jsx(
+          TemplatePartSelectionModal,
+          {
+            templatePartId,
+            clientId,
+            area,
+            setAttributes,
+            onClose: () => setIsTemplatePartSelectionOpen(false)
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  TemplatePartEdit as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/template-part/edit/inner-blocks.mjs

@@ -0,0 +1,156 @@
+// packages/block-library/src/template-part/edit/inner-blocks.js
+import { useEntityBlockEditor, store as coreStore } from "@wordpress/core-data";
+import {
+  InnerBlocks,
+  useInnerBlocksProps,
+  useSettings,
+  store as blockEditorStore,
+  useBlockEditingMode
+} from "@wordpress/block-editor";
+import { useSelect } from "@wordpress/data";
+import { useMemo } from "@wordpress/element";
+import { parse } from "@wordpress/blocks";
+import { jsx } from "react/jsx-runtime";
+function useRenderAppender(hasInnerBlocks) {
+  const blockEditingMode = useBlockEditingMode();
+  if (blockEditingMode === "contentOnly") {
+    return false;
+  }
+  if (!hasInnerBlocks) {
+    return InnerBlocks.ButtonBlockAppender;
+  }
+}
+function useLayout(layout) {
+  const themeSupportsLayout = useSelect((select) => {
+    const { getSettings } = select(blockEditorStore);
+    return getSettings()?.supportsLayout;
+  }, []);
+  const [defaultLayout] = useSettings("layout");
+  if (themeSupportsLayout) {
+    return layout?.inherit ? defaultLayout || {} : layout;
+  }
+}
+function NonEditableTemplatePartPreview({
+  postId: id,
+  layout,
+  tagName: TagName,
+  blockProps
+}) {
+  useBlockEditingMode("disabled");
+  const { content, editedBlocks } = useSelect(
+    (select) => {
+      if (!id) {
+        return {};
+      }
+      const { getEditedEntityRecord } = select(coreStore);
+      const editedRecord = getEditedEntityRecord(
+        "postType",
+        "wp_template_part",
+        id,
+        { context: "view" }
+      );
+      return {
+        editedBlocks: editedRecord.blocks,
+        content: editedRecord.content
+      };
+    },
+    [id]
+  );
+  const blocks = useMemo(() => {
+    if (!id) {
+      return void 0;
+    }
+    if (editedBlocks) {
+      return editedBlocks;
+    }
+    if (!content || typeof content !== "string") {
+      return [];
+    }
+    return parse(content);
+  }, [id, editedBlocks, content]);
+  const innerBlocksProps = useInnerBlocksProps(blockProps, {
+    value: blocks,
+    onInput: () => {
+    },
+    onChange: () => {
+    },
+    renderAppender: false,
+    layout: useLayout(layout)
+  });
+  return /* @__PURE__ */ jsx(TagName, { ...innerBlocksProps });
+}
+function EditableTemplatePartInnerBlocks({
+  postId: id,
+  hasInnerBlocks,
+  layout,
+  tagName: TagName,
+  blockProps
+}) {
+  const onNavigateToEntityRecord = useSelect(
+    (select) => select(blockEditorStore).getSettings().onNavigateToEntityRecord,
+    []
+  );
+  const [blocks, onInput, onChange] = useEntityBlockEditor(
+    "postType",
+    "wp_template_part",
+    { id }
+  );
+  const innerBlocksProps = useInnerBlocksProps(blockProps, {
+    value: blocks,
+    onInput,
+    onChange,
+    renderAppender: useRenderAppender(hasInnerBlocks),
+    layout: useLayout(layout)
+  });
+  const blockEditingMode = useBlockEditingMode();
+  const customProps = blockEditingMode === "contentOnly" && onNavigateToEntityRecord ? {
+    onDoubleClick: () => onNavigateToEntityRecord({
+      postId: id,
+      postType: "wp_template_part"
+    })
+  } : {};
+  return /* @__PURE__ */ jsx(TagName, { ...innerBlocksProps, ...customProps });
+}
+function TemplatePartInnerBlocks({
+  postId: id,
+  hasInnerBlocks,
+  layout,
+  tagName: TagName,
+  blockProps
+}) {
+  const { canViewTemplatePart, canEditTemplatePart } = useSelect(
+    (select) => {
+      return {
+        canViewTemplatePart: !!select(coreStore).canUser("read", {
+          kind: "postType",
+          name: "wp_template_part",
+          id
+        }),
+        canEditTemplatePart: !!select(coreStore).canUser("update", {
+          kind: "postType",
+          name: "wp_template_part",
+          id
+        })
+      };
+    },
+    [id]
+  );
+  if (!canViewTemplatePart) {
+    return null;
+  }
+  const TemplatePartInnerBlocksComponent = canEditTemplatePart ? EditableTemplatePartInnerBlocks : NonEditableTemplatePartPreview;
+  return /* @__PURE__ */ jsx(
+    TemplatePartInnerBlocksComponent,
+    {
+      postId: id,
+      hasInnerBlocks,
+      layout,
+      tagName: TagName,
+      blockProps
+    }
+  );
+}
+export {
+  TemplatePartInnerBlocks as default
+};
+//# sourceMappingURL=inner-blocks.mjs.map