Estender o bloco principal em Gutenberg

4

para um projeto eu tenho que estender o core block core / cover-image. Para a primeira tentativa básica, criei o seguinte código:

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
);

Basicamente isso funciona. Eu posso adicionar o bloco de imagem da capa no editor e a saída do frontend também é desejada.

Mas ao reativar o site no backend, Gutenberg me deu o seguinte erro:

  

Validação de bloco: falha na validação de bloco para core/cover-image

     

Esperado:

     

<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>

     

Real:

     

<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>

Nota: o URL da imagem é intencionalmente riscado

Por que recebo este erro de validação de bloco aqui? Eu acho que tem algo a ver com o atributo title. Mas eu não consigo descobrir o que causa isso ...

Ajuda, alguém?

Atenciosamente, Marcus

    
por Marcus Kober 17.08.2018 / 10:48

1 resposta

4

Não é um alerta de resposta real

Isso parece uma idéia ruim a longo prazo. Você está modificando uma funcionalidade principal com algo que não herda a marcação gerada do bloco original. Qualquer processamento posterior do bloco pode fazer suposições sobre a marcação com base no nome do bloco, mas as suposições podem estar erradas e será difícil identificar o motivo pelo qual o bloco tem o nome esperado.

Assim como com widgets e códigos de acesso, se você for basicamente bifurcar o bloco, basta criar um novo. Modificar um bloco deve ser feito somente quando tudo que você faz é modificar um pequeno aspecto dele, e talvez nem assim.

(Eu sei que você pode estar apenas brincando, mas ainda assim um novo bloco é muito mais compatível com o KISS considerando o código que você mostra aqui)

    
por Mark Kaplun 17.08.2018 / 12:54