@wordpress/editor/build-module/hooks/push-changes-to-global-styles/apply-globally-modal.mjs

Enhanced block editor for WordPress posts.

// packages/editor/src/hooks/push-changes-to-global-styles/apply-globally-modal.js
import { Modal } from "@wordpress/components";
import { DataViewsPicker } from "@wordpress/dataviews";
import { __, sprintf } from "@wordpress/i18n";
import { getBlockType } from "@wordpress/blocks";
import { useMemo, useState } from "@wordpress/element";
import { useGlobalStyles } from "../../components/global-styles/hooks.mjs";
import { useReviewRows } from "./use-review-rows.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
var DEFAULT_LAYOUTS = { pickerTable: {} };
var getItemId = (row) => row.id;
function ApplyGloballyModal({
  name,
  rows,
  onApply,
  onRequestClose
}) {
  const { merged } = useGlobalStyles();
  const reviewRows = useReviewRows(rows, merged, name);
  const [selection, setSelection] = useState(
    () => reviewRows.map((row) => row.id)
  );
  const [view, setView] = useState(() => ({
    type: "pickerTable",
    titleField: "label",
    fields: ["current", "new"],
    page: 1,
    perPage: reviewRows.length,
    layout: { enableMoving: false }
  }));
  const fields = useMemo(
    () => [
      {
        id: "label",
        label: __("Style"),
        enableSorting: false,
        enableHiding: false,
        filterBy: false,
        getValue: ({ item }) => item.label,
        render: ({ item }) => item.label
      },
      {
        id: "current",
        label: __("Current"),
        enableSorting: false,
        enableHiding: false,
        filterBy: false,
        getValue: ({ item }) => item.formattedCurrentValue,
        render: ({ item }) => /* @__PURE__ */ jsx("span", { className: "editor-push-changes-to-global-styles-modal__value", children: item.formattedCurrentValue })
      },
      {
        id: "new",
        label: __("New"),
        enableSorting: false,
        enableHiding: false,
        filterBy: false,
        getValue: ({ item }) => item.formattedNewValue,
        render: ({ item }) => /* @__PURE__ */ jsx("span", { className: "editor-push-changes-to-global-styles-modal__value", children: item.formattedNewValue })
      }
    ],
    []
  );
  const actions = useMemo(
    () => [
      {
        id: "apply",
        label: __("Apply"),
        isPrimary: true,
        supportsBulk: true,
        callback(items) {
          onApply(items);
          onRequestClose();
        }
      }
    ],
    [onApply, onRequestClose]
  );
  const blockTitle = getBlockType(name)?.title;
  return /* @__PURE__ */ jsxs(
    Modal,
    {
      title: sprintf(
        // translators: %s: Title of the block e.g. 'Heading'.
        __("Apply %s styles globally"),
        blockTitle
      ),
      onRequestClose,
      size: "large",
      className: "editor-push-changes-to-global-styles-modal",
      children: [
        /* @__PURE__ */ jsx("p", { children: sprintf(
          // translators: %s: Title of the block e.g. 'Heading'.
          __(
            "Choose which styles to make default for all %s blocks."
          ),
          blockTitle
        ) }),
        /* @__PURE__ */ jsxs(
          DataViewsPicker,
          {
            data: reviewRows,
            fields,
            view,
            onChangeView: setView,
            actions,
            selection,
            onChangeSelection: setSelection,
            getItemId,
            paginationInfo: {
              totalItems: reviewRows.length,
              totalPages: 1
            },
            defaultLayouts: DEFAULT_LAYOUTS,
            search: false,
            itemListLabel: __("Styles to apply"),
            children: [
              /* @__PURE__ */ jsx(DataViewsPicker.Layout, {}),
              /* @__PURE__ */ jsx(DataViewsPicker.Footer, {})
            ]
          }
        )
      ]
    }
  );
}
export {
  ApplyGloballyModal as default
};
//# sourceMappingURL=apply-globally-modal.mjs.map