web-dev-qa-db-ja.com

グーテンベルクでコアブロックを拡張

プロジェクトでは、コアブロックcore/cover-imageを拡張する必要があります。最初の基本的な試みとして、私は次のようなコードを思いついた。

PHP：

add_action('enqueue_block_editor_assets', function() {
   wp_enqueue_script('hephaestus-admin-script', 
   get_template_directory_uri() . '/dist/js/admin.js', ['wp-blocks', 'wp-element', 'wp-edit-post'], THEME_VERSION);
});

admin.js：

function transformElement(element, blockType, attributes) {
  if (blockType.name != 'core/cover-image') {
    return element;
  }

  var newElement = wp.element.createElement(
    'div',
    {
      className: 'wp-block-cover-image',
      style: 'background-image: url(\'' + attributes.url + '\');',
    },
    [
      wp.element.createElement(
        'p',
        {
          className: 'wp-block-cover-image-text',
        },
        [
          wp.element.createElement(
            'span',
            {
              className: 'wp-block-cover-image-text-stage',
            },
            attributes.title
          )
        ]
      ),
    ]
  );

  return newElement;
}

wp.hooks.addFilter(
  'blocks.getSaveElement',
  'hephaestus/modify-get-save-element',
  transformElement
);

基本的にこれは動作します。表紙の画像ブロックをエディタに追加することができ、フロントエンドの出力も望み通りです。

しかし、バックエンドでサイトにアクセスすると、グーテンベルグは私に次のエラーを出します。

ブロック検証：core/cover-imageのブロック検証に失敗しました

予想されるもの

<div class="wp-block-cover-image" style="background-image: url('https://xxxxxxxx/wp-content/uploads/2018/08/xxxxxxxx.jpg');"><p class="wp-block-cover-image-text"><span class="wp-block-cover-image-text-stage"></span></p></div>

実績：

<div class="wp-block-cover-image" style="background-image: url('https://xxxxxxxx/wp-content/uploads/2018/08/xxxxxxxx.jpg');"><p class="wp-block-cover-image-text"><span class="wp-block-cover-image-text-stage">This is a test</span></p></div>

注：画像のURLは意図的に取り消されています

このブロック検証エラーがここで表示されるのはなぜですか。 title属性と関係があると思います。しかし、私はこれが何を引き起こすのか理解することができません...

助けて、誰？

よろしく、マーカス

javascripthooksblock-editor
4
Marcus Kober

本当の答えではない

これは長期的に悪い考えのようです。元のブロックの生成されたマークアップを継承しないものでコア機能を変更しています。ブロックのそれ以降の処理では、ブロック名に基づいてマークアップに関する仮定を立てることができますが、その仮定は間違っている可能性があり、ブロックが期待される名前を持っているのでその理由を特定するのは困難です。

ウィジェットやショートコードと同じように、基本的にブロックをフォークするつもりなら、新しいブロックを作成するだけです。ブロックを変更するのは、あなたがそれのいくつかの小さな側面を変更することだけが行われている時にだけ行われるべきであり、そうでない場合もあります。

（私はあなたがただ遊んでいるかもしれないが、それでも新しいブロックはあなたがここに示すコードを考えるともっともっとKISS互換性があることを私は理解します）

4
Mark Kaplun