Web Design Leaves

<?php
/**
* Plugin Name:       My Highlight Block
* Description:       Hightlight.js Syntax Highlight Block.
* Requires at least: 6.1
* Requires PHP:      7.0
* Version:           0.1.0
* Author:            The WordPress Contributors
* License:           GPL-2.0-or-later
* License URI:       https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain:       my-highlight-block
*
* @package           wdl
*/

if (!defined('ABSPATH')) {
  exit; // Exit if accessed directly.
}

function add_my_code_block_scripts_and_styles() {
  $dir = dirname(__FILE__);

  //管理画面以外（フロントエンド側でのみ読み込む）
  if (!is_admin()) {
    // highlight.js の JavaScript ファイルのエンキュー
    wp_enqueue_script(
      'highlight-js',
      plugins_url('/highlight-js/highlight.min.js', __FILE__),
      array(),
      filemtime("$dir/highlight-js/highlight.min.js"),
      true
    );

    // highlight.js の基本スタイルのエンキュー
    wp_enqueue_style(
      'highlight-js-style',
      plugins_url('/highlight-js/highlight.min.css', __FILE__),
      array(),
      filemtime("$dir/highlight-js/highlight.min.css")
    );

    // highlight.js の初期化の JavaScript を上記の highlight.min.js の読み込みの後に出力
    wp_add_inline_script(
      // 上記で登録したハンドル名を指定
      'highlight-js',
      // script タグに出力する JavaScript
      'document.addEventListener("DOMContentLoaded", (event) => {
  document.querySelectorAll("pre code").forEach((el) => {
    hljs.highlightElement(el);
  });
});'
    );
  }
}
add_action('enqueue_block_assets', 'add_my_code_block_scripts_and_styles');

function my_highlight_block_my_highlight_block_block_init() {
  register_block_type(__DIR__ . '/build');
}
add_action('init', 'my_highlight_block_my_highlight_block_block_init');

{
  "name": "my-highlight-block",
  "version": "0.1.0",
  "description": "Hightlight.js Syntax Highlight Block tool.",
  "author": "The WordPress Contributors",
  "license": "GPL-2.0-or-later",
  "main": "build/index.js",
  "scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start"
  },
  "files": [ "highlight-js", "build", "my-highlight-block.php" ],
  "devDependencies": {
    "@wordpress/scripts": "^27.1.0"
  }
}

import { useBlockProps } from "@wordpress/block-editor";

// 非推奨バージョンのオブジェクトを定義
const v1 = {
  // attributes を定義
  attributes: {
    codeText: {
      type: "string",
      default: "",
      source: "text",
      selector: "code",
    },
    language: {
      type: "string",
      default: "",
    },
    wrap: {
      type: "boolean",
      default: false,  // 古いバージョン用の初期値
    },
  },

  // 古いバージョンの save() 関数
  save({ attributes }) {

    const codeAttributes = {};
    if (attributes.language !== "") {
      codeAttributes.className = `language-${attributes.language}`;
    }

    const escapedCodeText = attributes.codeText.replace(/[<>&'"]/g, (match) => {
      const specialChars = {
        '<': '&lt;',
        '>': '&gt;',
        '&': '&amp;',
        "'": '&#39;',
        '"': '&quot;'
      };
      return specialChars[match];
    });

    return (
      <div {...useBlockProps.save()}>
        <div className="hljs-wrap">
          <pre>
            <code {...codeAttributes}>{escapedCodeText}</code>
          </pre>
        </div>
      </div>
    );
  },
};

// 非推奨バージョンのオブジェクトを配列でデフォルトエクスポート
export default [v1];

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "wdl/my-highlight-block",
  "version": "0.1.0",
  "title": "My Highlight Block",
  "category": "widgets",
  "description": "Hightlight.js Syntax Highlight Block.",
  "example": {},
  "attributes": {
    "codeText": {
      "type": "string",
      "default": "",
      "source": "text",
      "selector": "code"
    },
    "language": {
      "type": "string",
      "default": ""
    },
    "wrap": {
      "type": "boolean",
      "default": false
    },
    "isEditMode": {
      "type": "boolean",
      "default": true
    }
  },
  "supports": {
    "html": false
  },
  "textdomain": "my-highlight-block",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css"
}

<?php
/**
* Plugin Name:       My Highlight Block
* Description:       Hightlight.js Syntax Highlight Code Block.
* Requires at least: 6.1
* Requires PHP:      7.0
* Version:           0.1.0
* Author:            The WordPress Contributors
* License:           GPL-2.0-or-later
* License URI:       https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain:       my-highlight-block
*
* @package           wdl
*/

if ( ! defined( 'ABSPATH' ) ) {
  exit; // Exit if accessed directly.
}

function add_my_code_block_scripts_and_styles() {
  $dir = dirname(__FILE__);

  //管理画面とフロントエンド側の両方で highlight.js の JavaScript と CSS を読み込む
  wp_enqueue_script(
    'highlight-js',
    plugins_url('/highlight-js/highlight.min.js', __FILE__),
    array(),
    filemtime("$dir/highlight-js/highlight.min.js"),
    true
  );

  wp_enqueue_style(
    'highlight-js-style',
    plugins_url('/highlight-js/highlight.min.css', __FILE__),
    array(),
    filemtime("$dir/highlight-js/highlight.min.css")
  );

  // フロントエンド側でのみ highlight.js の初期化を実行
  if (!is_admin()) {
    // highlight.js の初期化の JavaScript を上記の highlight.min.js の読み込みの後に出力
    wp_add_inline_script(
      // 上記で登録したハンドル名を指定
      'highlight-js',
      // script タグに出力する JavaScript
      'document.addEventListener("DOMContentLoaded", (event) => {
  document.querySelectorAll("pre code").forEach((el) => {
    hljs.highlightElement(el);
  });
});'
    );
  }
}
add_action('enqueue_block_assets', 'add_my_code_block_scripts_and_styles');

function my_hljs_block_my_hljs_block_block_init() {
  register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'my_hljs_block_my_hljs_block_block_init' );

import { __ } from "@wordpress/i18n";
// BlockControls を追加
import { useBlockProps, InspectorControls, BlockControls } from "@wordpress/block-editor";
// ToolbarGroup, ToolbarButton を追加
import { TextareaControl, PanelBody, TextControl, PanelRow, CheckboxControl, ToolbarGroup, ToolbarButton } from "@wordpress/components";
import "./editor.scss";
// useEffect, useRef を追加
import { useEffect, useRef } from "@wordpress/element";
// useDisabled を追加
import { useDisabled } from "@wordpress/compose";

// 引数に追加で isSelected を受け取る
export default function Edit({ attributes, setAttributes, isSelected }) {
  // useDisabled フック
  const disabledRef = useDisabled();
  // インスペクタの各要素のラッパーの div 要素へ設定する属性
  const inspectorDivAttributes = {};
  inspectorDivAttributes.className = 'inspectorDiv';
  if (!attributes.isEditMode) {
    // プレビューモードではインスペクタへの入力を disalbed に（ref 属性に disabledRef を指定）
    inspectorDivAttributes.ref = disabledRef;
  }

  const codeTextRowCount = attributes.codeText.split(/\r|\r\n|\n/).length;
  const codeTextRows = codeTextRowCount > 3 ? codeTextRowCount : 3;

  // インスペクターを出力する関数
  const getInspectorControls = () => {
    return (
      <InspectorControls>
        <PanelBody title={__("Settings", "my-highlight-block")}>
          <div {...inspectorDivAttributes}>
            <PanelRow>
              <TextControl
                label={__("Language", "my-highlight-block")}
                value={attributes.language || ""}
                onChange={(value) => setAttributes({ language: value })}
                className="lang-name"
              />
            </PanelRow>
            <PanelRow>
              <CheckboxControl
                label={__("white-space: pre-wrap", "my-highlight-block")}
                checked={attributes.wrap}
                onChange={(val) => setAttributes({ wrap: val })}
                help={__("Enable Text Auto Wrap", "my-highlight-block")}
              />
            </PanelRow>
          </div>
        </PanelBody>
      </InspectorControls>
    );
  };

  // ツールバーを出力する関数
  const getToolbarControls = () => {
    return (
      <BlockControls>
        <ToolbarGroup>
          <ToolbarButton
            text="Edit"
            className={
              attributes.isEditMode ? "edit-button is-pressed" : "edit-button"
            }
            onClick={() =>
              // isEditMode の値を true に
              setAttributes({ isEditMode: true })
            }
          />
          <ToolbarButton
            text="Preview"
            className={
              attributes.isEditMode
                ? "preview-button"
                : "preview-button is-pressed"
            }
            onClick={() =>
              // isEditMode の値を false に
              setAttributes({ isEditMode: false })
            }
          />
        </ToolbarGroup>
      </BlockControls>
    );
  };

  // ref を宣言してコードの祖先の div.hljs-wrap に指定
  const codeWrapperRef = useRef(null);

  useEffect(() => {
    // プレビューモードであれば
    if (!attributes.isEditMode) {
      // ref を指定した要素から code 要素を取得
      const code = codeWrapperRef.current.querySelector("code");
      // 取得した code 要素をハイライト表示
      hljs.highlightElement(code);
    }
  }, [attributes.isEditMode]);

  const codeAttributes = {};
  if (attributes.language !== "") {
    codeAttributes.className = `language-${attributes.language}`;
  }
  const preAttributes = {};
  if (attributes.wrap) {
    preAttributes.className = "pre-wrap";
  }

  // ブロックが選択されていない場合はプレビューモードを終了
  if (!isSelected) {
    setAttributes({ isEditMode: true });
  }

  //配列で指定
  return [
    getToolbarControls(),
    getInspectorControls(),
    <>
      {attributes.isEditMode && (  // 編集モード
        <div {...useBlockProps()}>
          <TextareaControl
            label={__("Highlight Code", "my-highlight-block")}
            value={attributes.codeText}
            onChange={(value) => setAttributes({ codeText: value })}
            rows={codeTextRows}
            placeholder={__("Write your code...", "my-highlight-block")}
            hideLabelFromVision={isSelected ? false : true}
          />
        </div>
      )}
      {!attributes.isEditMode && (  // プレビューモード
        <div {...useBlockProps()}>
          <div className="hljs-wrap" ref={codeWrapperRef}>
            <pre {...preAttributes}>
              <code {...codeAttributes}>{attributes.codeText}</code>
            </pre>
          </div>
        </div>
      )}
    </>,
  ];
}

// プレビューモードのボタンに使用するアイコン
const codeIcon = (
  <svg
    viewBox="0 0 16 16"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    focusable="false"
    width="24"
    height="24"
  >
    <path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z" />
  </svg>
);

// ツールバーを出力する関数
const getToolbarControls = () => {
  return (
    <BlockControls>
      <ToolbarGroup>
        <ToolbarButton
          text={attributes.isEditMode ? "Preview" : "Edit"}
          icon={attributes.isEditMode ? codeIcon : "edit"}
          label={attributes.isEditMode ? "Preview" : "Edit"}
          className="edit-preview-button"
          onClick={() =>
            setAttributes({ isEditMode: !attributes.isEditMode }) // 値を反転
          }
        />
      </ToolbarGroup>
    </BlockControls>
  );
};

.wp-block-wdl-my-highlight-block textarea:focus {
  background-color: #f6fdf6;
}

.wp-block-wdl-my-highlight-block label {
  font-size: 16px;
}

/* disabled の要素のスタイル */
.inspectorDiv [inert="true"] input {
  background-color: #eee;
  color: #ccc;
}

.inspectorDiv [inert="true"] label {
  color: #ccc;
}

.inspectorDiv [inert="true"] input[type="checkbox"] {
  background-color: #ccc;
}

pre.pre-wrap {white-space:pre-wrap}

import { __ } from "@wordpress/i18n";
import { useBlockProps, InspectorControls, BlockControls } from "@wordpress/block-editor";
import { TextareaControl, PanelBody, TextControl, PanelRow, CheckboxControl, ToolbarGroup, ToolbarButton } from "@wordpress/components";
import "./editor.scss";
// useState を追加
import { useEffect, useRef, useState } from "@wordpress/element";
// useDebounce を追加
import { useDebounce } from '@wordpress/compose';
// useDisabled のインポートを削除

export default function Edit({ attributes, setAttributes, isSelected }) {
  // useDisabled の処理を削除
  const codeTextRowCount = attributes.codeText.split(/\r|\r\n|\n/).length;
  const codeTextRows = codeTextRowCount > 3 ? codeTextRowCount : 3;

  // <div {...inspectorDivAttributes}> とその閉じタグ </div> を削除
  const getInspectorControls = () => {
    return (
      <InspectorControls>
        <PanelBody title={__("Settings", "my-highlight-block")}>
          <PanelRow>
            <TextControl
              label={__("Language", "my-highlight-block")}
              value={attributes.language || ""}
              onChange={(val) => {
                setAttributes({ language: val });
                // Debounce を適用した state 変数を更新する関数を追加で指定
                debouncedSetLangName(val);
              }}
              className="lang-name"
            />
          </PanelRow>
          <PanelRow>
            <CheckboxControl
              label={__("white-space: pre-wrap", "my-highlight-block")}
              checked={attributes.wrap}
              onChange={(val) => setAttributes({ wrap: val })}
              help={__("Enable Text Auto Wrap", "my-highlight-block")}
            />
          </PanelRow>
        </PanelBody>
      </InspectorControls>
    );
  };

  const getToolbarControls = () => {
    return (
      <BlockControls>
        <ToolbarGroup>
          <ToolbarButton
            text="Edit"
            className={
              attributes.isEditMode ? "edit-button is-pressed" : "edit-button"
            }
            onClick={() => setAttributes({ isEditMode: true })}
          />
          <ToolbarButton
            text="Preview"
            className={
              attributes.isEditMode
                ? "preview-button"
                : "preview-button is-pressed"
            }
            onClick={() => setAttributes({ isEditMode: false })}
          />
        </ToolbarGroup>
      </BlockControls>
    );
  };

  const codeWrapperRef = useRef(null);

  useEffect(() => {
    if (!attributes.isEditMode) {
      const code = codeWrapperRef.current.querySelector("code");
      hljs.highlightElement(code);
    }
  }, [attributes.isEditMode]);

  // 入力された言語名を格納する state 変数（langName）とその更新関数（setLangName）
  const [langName, setLangName] = useState("");
  // setLangName に Debounce を適用した関数
  const debouncedSetLangName = useDebounce(setLangName, 600);

  useEffect(() => {
    if (!attributes.isEditMode) {
      // Hightlight.js の警告を出力しないように
      hljs.configure({
        ignoreUnescapedHTML: true,
      });
      const code = codeWrapperRef.current.querySelector("code");
      // code 要素に data-highlighted が指定されていれば削除
      if (code.dataset.highlighted) {
        delete code.dataset.highlighted;
      }
      // 取得した code 要素をハイライト表示
      hljs.highlightElement(code);
    }
  }, [langName]); // 配列（依存変数）に langName を指定

  const codeAttributes = {};
  if (attributes.language !== "") {
    codeAttributes.className = `language-${attributes.language}`;
  }
  const preAttributes = {};
  if (attributes.wrap) {
    preAttributes.className = "pre-wrap";
  }

  if (!isSelected) {
    setAttributes({ isEditMode: true });
  }

  return [
    getToolbarControls(),
    getInspectorControls(),
    <>
      {attributes.isEditMode && (
        <div {...useBlockProps()}>
          <TextareaControl
            label={__("Highlight Code", "my-highlight-block")}
            value={attributes.codeText}
            onChange={(value) => setAttributes({ codeText: value })}
            rows={codeTextRows}
            placeholder={__("Write your code...", "my-highlight-block")}
            hideLabelFromVision={isSelected ? false : true}
          />
        </div>
      )}
      {!attributes.isEditMode && (
        <div {...useBlockProps()}>
          <div className="hljs-wrap" ref={codeWrapperRef}>
            <pre {...preAttributes}>
              <code {...codeAttributes}>{attributes.codeText}</code>
            </pre>
          </div>
        </div>
      )}
    </>,
  ];
}