exbox.js

コピーするimport { registerBlockType, createBlock } from "@wordpress/blocks";
import { InnerBlocks, RichText } from "@wordpress/block-editor";
import ExEdit from "./modules/ExboxEdit";

registerBlockType("oja/exbox-block", {
  title: "EXボックス",
  description: "用途に合わせてデザインを変更して下さい",
  category: "text",
  keywords: ["box", "ex", "oja"],
  icon: "block-default",
  styles: [
    {
      name: "solid",
      label: "シンプル",
      isDefault: true,
    },
    {
      name: "bold",
      label: "太線",
    },
    {
      name: "dashed",
      label: "点線",
    },
    {
      name: "double",
      label: "二重線",
    },
  ],
  supports: {
    html: false,
    customClassName: false,
  },
  example: {
    attributes: {
      boxTitle: "好きなテキストや画像が入ります",
    },
  },
  transforms: {
    from: [
      {
        type: "block",
        //"段落, 見出し"から
        blocks: ["core/paragraph", , "core/heading"],
        //処理されるブロックの属性を受け取るコールバック
        transform: ({ content }) => {
          return createBlock("oja/exbox-block", {
            // ojaブロックのcontentにPブロックのcontent
            boxTitle: content,
          });
        },
      },
    ],
    to: [
      {
        type: "block",
        //"段落"へ
        blocks: ["core/paragraph"],
        //isMatchでfalseを返すと変換を適用しない
        //boxTitleがあるときだけ変換を選択できる
        isMatch: ({ boxTitle }) => {
          if (boxTitle) return true;
          return false;
        },
        transform: ({ boxTitle }) => {
          return createBlock("core/paragraph", {
            content: boxTitle,
          });
        },
      },
    ],
  },
  attributes: {
    boxTitle: {
      type: "string",
      default: "",
      source: "html",
      selector: "h3",
    },
    boxColor: {
      type: "string",
      default: "blue",
    },
    borderSetting: {
      type: "string",
      default: "nomal-head",
    },
    isHeadLine: {
      type: "boolean",
      default: true,
    },
  },
  edit: ExEdit,
  save: ({
    className,
    attributes: { boxTitle, isHeadLine, boxColor, borderSetting },
  }) => {
    className += ` ${boxColor} ${borderSetting}`;
    return (
      <div className={className}>
        {isHeadLine && (
          <RichText.Content className="ex-head" value={boxTitle} tagName="h3" />
        )}
        <InnerBlocks.Content />
      </div>
    );
  },
});

ExboxEdit.js

コピーするimport { InnerBlocks, RichText } from "@wordpress/block-editor";
import { ExboxInspector } from "./ExboxInspector";

const ALLOWED_BLOCKS = [
  "core/image",
  "core/paragraph",
  "core/list",
  "core/heading",
  "core/table",
  "oja/post-list",
  "oja/oja-related-post-block",
  "ojako/custom-dlblock",
];

export default function ExEdit({ className, attributes, setAttributes }) {
  const { boxTitle, isHeadLine, boxColor, borderSetting } = attributes;
  className += ` ${boxColor} ${borderSetting}`;
  return [
    <ExboxInspector attributes={attributes} setAttributes={setAttributes} />,
    <div className={className}>
      {isHeadLine && (
        <RichText
          className="ex-head"
          value={boxTitle}
          onChange={(val) => setAttributes({ boxTitle: val })}
          tagName="h3"
          placeholder="タイトルを入力"
          //フォーカスされた際も文字が入力されるまでプレースホルダーテキストを表示
          keepPlaceholderOnFocus={true}
        />
      )}
      <InnerBlocks allowedBlocks={ALLOWED_BLOCKS} />
    </div>,
  ];
}

ExboxInspector.js

コピーするimport { InspectorControls } from "@wordpress/block-editor";
import {
  PanelBody,
  PanelRow,
  ToggleControl,
  SelectControl,
  RadioControl,
} from "@wordpress/components";

const sinpleBoxContent = [
  { label: "シンプル", value: "simple-bd" },
  { label: "内側線", value: "inline-bd" },
  { label: "角丸 (線の変更は不可)", value: "radius-bd" },
  { label: "チェック柄", value: "check-bd" },
  { label: "水玉模様", value: "polka-dot" },
  { label: "左縦線 (細線選択不可)", value: "left-angle" },
  { label: "大カッコ", value: "brackets" },
  { label: "カギカッコ", value: "angle-brackets" },
  { label: "黒板風 (色、線変更不可)", value: "blackboard" },
];
const titleBoxContent = [
  { label: "シンプル", value: "sinple-head" },
  { label: "ノーマル", value: "nomal-head" },
  { label: "上側", value: "top-head" },
  { label: "外側", value: "outer-head" },
  { label: "内側", value: "inner-head" },
  { label: "角丸", value: "radius-head" },
  { label: "吹き出し", value: "speech-head" },
 
];

//インスペクター表示関数
export const ExboxInspector = ({
  attributes: { boxColor, borderSetting, isHeadLine },
  setAttributes,
}) => {
  const updateHeadStyle = ( value ) => {
    setAttributes({ isHeadLine: value });
    setAttributes({ borderSetting: "nomal-head" });
  }

  return (
    <InspectorControls>
      <PanelBody title="ボックス枠線設定" initialOpen={true}>
        <PanelRow>
          <ToggleControl
            label={isHeadLine ? "タイトルを表示する" : "タイトルは表示しない"}
            help=""
            checked={isHeadLine}
            onChange={updateHeadStyle}
          />
        </PanelRow>
        <PanelRow>
          <SelectControl
            label={isHeadLine ? "タイトル付きスタイル" : "シンプルスタイル"}
            value={borderSetting}
            options={isHeadLine ? titleBoxContent : sinpleBoxContent}
            onChange={(val) => setAttributes({ borderSetting: val })}
          />
        </PanelRow>
      </PanelBody>
      <PanelBody title="ボックスカラー設定" initialOpen={false}>
        <PanelRow>
          <RadioControl
            className=" exbox-color-setting"
            selected={boxColor}
            options={[
              { label: "ブルー", value: "blue" },
              { label: "レッド", value: "red" },
              { label: "グリーン", value: "green" },
              { label: "イエロー", value: "yellow" },
              { label: "ピンク", value: "pink" },
              { label: "グレー", value: "gray" },
              { label: "ブラック", value: "black" },
            ]}
            onChange={(val) => setAttributes({ boxColor: val })}
          />
        </PanelRow>
      </PanelBody>
    </InspectorControls>
  );
};