Skip to content

<WordPress>ブロックエディタで使用するブロックを限定する

Published: at 00:00

実装した経緯

使用するブロックを限定することで、納品後のメンテナンス等の手間を減らしたかった

コード

コードは下記に示す。 今回はcore/embedの中のYouTubeのみを許可する場合を考える。

  1. functions.phpに下記を記入

function allowed_block_js() {
  wp_enqueue_script(
      'mytheme-script',
      get_template_directory_uri() . '/js/unregister-block.js',
      array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' )
  );
}
add_action('enqueue_block_editor_assets', 'allowed_block_js', 10, 2);

  1. unregister-block.jsを作成。
wp.domReady(() => {
  const embedVariations = [
    'amazon-kindle',
    'animoto',
    'cloudup',
    'collegehumor',
    'crowdsignal',
    'dailymotion',
    'facebook',
    'flickr',
    'imgur',
    'instagram',
    'issuu',
    'kickstarter',
    'meetup-com',
    'mixcloud',
    'reddit',
    'reverbnation',
    'screencast',
    'scribd',
    'slideshare',
    'smugmug',
    'soundcloud',
    'speaker-deck',
    'spotify',
    'ted',
    'tiktok',
    'tumblr',
    'twitter',
    'videopress',
    'vimeo',
    'wordpress',
    'wordpress-tv',
    'bluesky',
    'pinterest',
    'wolfram-cloud',
    'pocket-casts',
    //'youtube'
  ];

  console.log(getBlockVariation('core/embed'))

  embedVariations.forEach((blockVariation) => {
    wp.blocks.unregisterBlockVariation('core/embed', blockVariation);
  });
} );


// ブロックの確認
wp.domReady(function () {
  // ブロックタイプを確認する
  console.log(wp.blocks.getBlockTypes());

  // 埋め込みブロックの種類を確認する
  console.log(wp.blocks.getBlockVariations('core/embed'));
});

// ブロックの確認
wp.domReady(function () {
  // ブロックタイプを確認する
  console.log(wp.blocks.getBlockTypes());

  // 埋め込みブロックの種類を確認する
  console.log(wp.blocks.getBlockVariations('core/embed'));
});

終わりに

今までallowed_block_types_allフックを使った方法しか使ってこなかったが、個人的にはこちらの方が扱いやすそう。

参考

https://zenn.dev/shimomura/articles/gutenberg-block-list https://wordpress.stackexchange.com/questions/379612/how-to-remove-the-core-embed-blocks-in-wordpress-5-6