@wordpress/block-editor/build-module/hooks/text-align.js

Generic block editor.

// packages/block-editor/src/hooks/text-align.js
import clsx from "clsx";
import { __ } from "@wordpress/i18n";
import { getBlockSupport, hasBlockSupport } from "@wordpress/blocks";
import { alignLeft, alignRight, alignCenter } from "@wordpress/icons";
import { AlignmentControl, BlockControls } from "../components";
import { useBlockEditingMode } from "../components/block-editing-mode";
import {
  cleanEmptyObject,
  shouldSkipSerialization,
  useBlockSettings
} from "./utils";
import { TYPOGRAPHY_SUPPORT_KEY } from "./typography";
import { jsx } from "react/jsx-runtime";
var TEXT_ALIGN_SUPPORT_KEY = "typography.textAlign";
var TEXT_ALIGNMENT_OPTIONS = [
  {
    icon: alignLeft,
    title: __("Align text left"),
    align: "left"
  },
  {
    icon: alignCenter,
    title: __("Align text center"),
    align: "center"
  },
  {
    icon: alignRight,
    title: __("Align text right"),
    align: "right"
  }
];
var VALID_TEXT_ALIGNMENTS = ["left", "center", "right"];
var NO_TEXT_ALIGNMENTS = [];
function getValidTextAlignments(blockTextAlign) {
  if (Array.isArray(blockTextAlign)) {
    return VALID_TEXT_ALIGNMENTS.filter(
      (textAlign) => blockTextAlign.includes(textAlign)
    );
  }
  return blockTextAlign === true ? VALID_TEXT_ALIGNMENTS : NO_TEXT_ALIGNMENTS;
}
function BlockEditTextAlignmentToolbarControlsPure({
  style,
  name: blockName,
  setAttributes
}) {
  const settings = useBlockSettings(blockName);
  const hasTextAlignControl = settings?.typography?.textAlign;
  const blockEditingMode = useBlockEditingMode();
  if (!hasTextAlignControl || blockEditingMode !== "default") {
    return null;
  }
  const validTextAlignments = getValidTextAlignments(
    getBlockSupport(blockName, TEXT_ALIGN_SUPPORT_KEY)
  );
  if (!validTextAlignments.length) {
    return null;
  }
  const textAlignmentControls = TEXT_ALIGNMENT_OPTIONS.filter(
    (control) => validTextAlignments.includes(control.align)
  );
  const onChange = (newTextAlignValue) => {
    const newStyle = {
      ...style,
      typography: {
        ...style?.typography,
        textAlign: newTextAlignValue
      }
    };
    setAttributes({ style: cleanEmptyObject(newStyle) });
  };
  return /* @__PURE__ */ jsx(BlockControls, { group: "block", children: /* @__PURE__ */ jsx(
    AlignmentControl,
    {
      value: style?.typography?.textAlign,
      onChange,
      alignmentControls: textAlignmentControls
    }
  ) });
}
var text_align_default = {
  edit: BlockEditTextAlignmentToolbarControlsPure,
  useBlockProps,
  addSaveProps: addAssignedTextAlign,
  attributeKeys: ["style"],
  hasSupport(name) {
    return hasBlockSupport(name, TEXT_ALIGN_SUPPORT_KEY, false);
  }
};
function useBlockProps({ name, style }) {
  if (!style?.typography?.textAlign) {
    return null;
  }
  const validTextAlignments = getValidTextAlignments(
    getBlockSupport(name, TEXT_ALIGN_SUPPORT_KEY)
  );
  if (!validTextAlignments.length) {
    return null;
  }
  if (shouldSkipSerialization(name, TYPOGRAPHY_SUPPORT_KEY, "textAlign")) {
    return null;
  }
  const textAlign = style.typography.textAlign;
  const className = clsx({
    [`has-text-align-${textAlign}`]: textAlign
  });
  return { className };
}
function addAssignedTextAlign(props, blockType, attributes) {
  if (!attributes?.style?.typography?.textAlign) {
    return props;
  }
  const { textAlign } = attributes.style.typography;
  const blockTextAlign = getBlockSupport(blockType, TEXT_ALIGN_SUPPORT_KEY);
  const isTextAlignValid = getValidTextAlignments(blockTextAlign).includes(textAlign);
  if (isTextAlignValid && !shouldSkipSerialization(
    blockType,
    TYPOGRAPHY_SUPPORT_KEY,
    "textAlign"
  )) {
    props.className = clsx(
      `has-text-align-${textAlign}`,
      props.className
    );
  }
  return props;
}
export {
  TEXT_ALIGN_SUPPORT_KEY,
  addAssignedTextAlign,
  text_align_default as default,
  getValidTextAlignments
};
//# sourceMappingURL=text-align.js.map