Extender el bloque de núcleo en Gutenberg

4

para un proyecto tengo que extender el núcleo de núcleo / imagen de portada. Para el primer intento básico se me ocurrió el siguiente 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
);

Básicamente esto funciona. Puedo agregar el bloque de imagen de portada en el editor y la salida del frontend también es la deseada.

Pero al volver a acceder al sitio en backend, Gutenberg me da el siguiente error:

  

Validación de bloque: la validación de bloque falló 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>

     

Actual:

     

<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: la url de la imagen está tachada intencionalmente

¿Por qué obtengo este error de validación de bloque aquí? Creo que tiene algo que ver con el atributo del título. Pero no puedo averiguar qué causa esto ...

¿Ayuda, alguien?

Saludos, Marcus

    
pregunta Marcus Kober 17.08.2018 - 10:48

1 respuesta

4

No es una alerta de respuesta real

Esto suena como una mala idea a largo plazo. Está modificando una funcionalidad principal con algo que no hereda ninguna de las marcas generadas del bloque original. Cualquier procesamiento posterior del bloque puede suponer el marcado basado en el nombre del bloque, pero las suposiciones pueden ser erróneas y será difícil determinar por qué el bloque tiene el nombre esperado.

Al igual que con los widgets y códigos cortos, si básicamente va a bifurcar el bloque, solo debe crear uno nuevo. La modificación de un bloque se debe hacer solo cuando todo lo que hace es modificar un pequeño aspecto del mismo, y tal vez ni siquiera entonces.

(Me doy cuenta de que puedes estar jugando, pero un nuevo bloque es mucho más compatible con KISS teniendo en cuenta el código que se muestra aquí)

    
respondido por el Mark Kaplun 17.08.2018 - 12:54

Lea otras preguntas en las etiquetas