¿Puedo usar Javascript para actualizar una clase predeterminada en el Editor de WordPress?

3 minutos de lectura

avatar de usuario
esd

En el editor Gutenberg de WordPress, estoy tratando de establecer mediante programación una clase predeterminada en un bloque de imagen, que se aplica sin que el usuario lo agregue manualmente a través del campo ‘CSS adicional’.

He intentado aplicar un estilo predeterminado en bloques de imágenes, que funciona inicialmente:

wp.blocks.registerBlockStyle( 'core/image', {
  name: 'retailResidential',
  label: 'Retail & Residential',
  isDefault: true
});

Pero necesito actualizar esta clase predeterminada después de que un usuario cambie un campo en un menú desplegable personalizado. Cuando se cambia este menú desplegable, cancelo el registro del estilo de bloque y luego registro un nuevo estilo de bloque predeterminado, pero no tiene efecto para las imágenes creadas adicionalmente (no crea una imagen con el estilo predeterminado actualizado, todavía usa el antiguo).

wp.blocks.unregisterBlockStyle(
  'core/image',
  [ 'retailResidential', 'weddingsEvents', 'advertisingEditorial']
);

¿Es necesario actualizar el editor después de actualizar el estilo de bloque de imagen predeterminado? o hay una alternativa, mejor manera de hacer esto?

referencia para actualizar estilos de bloque

  • ¿Puedo saber qué estilo de imagen desea crear desde el editor?

    – Krishna Savani

    3 de diciembre de 2019 a las 5:10

  • La imagen se crea como un bloque de imagen, usando WordPress 5.0+ Gutenberg. Se está agregando en una página.

    – esd

    4 de diciembre de 2019 a las 8:29

  • Oh, ya lo sé, pero verá que hay un estilo de máscara circular y predeterminado, pero en su caso, ¿qué estilo de imagen está aplicando?

    – Krishna Savani

    4 de diciembre de 2019 a las 8:37

  • mira el enlace (prnt.sc/q5yrls) he aplicado estilo como triángulo superior en la imagen

    – Krishna Savani

    4 de diciembre de 2019 a las 8:44

  • Correcto, eliminé los dos estilos predeterminados (Predeterminado y Máscara de círculo) e intento agregar un estilo personalizado (‘retailResidential’, ‘weddingsEvents’ o ‘advertisingEditorial’) que está configurado de manera predeterminada (es decir, el usuario no tiene para hacer clic en él, se aplica a una imagen cuando se crea la imagen).

    – esd

    4 de diciembre de 2019 a las 18:07

He trabajado en sus requisitos para eso He hecho las siguientes cosas: Estoy trabajando en el tema veinte veinte

1) En archivo javascript editor-script-block.js

wp.domReady( function() {
  wp.blocks.unregisterBlockStyle( 'core/image', 'circle-mask' );
} );

wp.domReady( function() {
  wp.blocks.unregisterBlockStyle( 'core/image', 'default' );
} );

wp.domReady(function(){
     wp.blocks.registerBlockStyle( 'core/image', {
        name: 'retailResidential',
        label: 'Retail & Residential',

      });

      wp.blocks.registerBlockStyle( 'core/image', {
        name: 'weddingsEvents',
        label: 'Wedding & Events',
      });

      wp.blocks.registerBlockStyle( 'core/image', {
        name: 'advertisingEditorial',
        label: 'Advertising & Editorial'

      });
});

Ahora estoy dando algo de estilo css a la imagen como si quisiera agregar un triángulo superior sobre la imagen al estilo “retailResidential” vea la imagen aquí (https://prnt.sc/q6esxq) para eso tengo que aplicar css para back-end y front-end también porque hay diferentes clases que se aplican así

lado del administrador

<style>
.is-style-retailResidential >div > div.components-resizable-box__container:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid #170606;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translatex(-50%);
}
</style>

Lado delantero

<style>
.is-style-retailResidential{
    position: relative;
}
.is-style-retailResidential:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid #170606;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translatex(-50%);
}

</style>

Para configurar el estilo es el predeterminado, ha utilizado el complemento de campo personalizado, pero wordpress ya está dando la opción, consulte aquí (https://prnt.sc/q6ew4k) He configurado el estilo predeterminado como “Retail & Residential” y funciona como usted quiere

Todavía estoy subiendo video por favor revise aquí

déjame saber si algo entendí mal las cosas!

¿Ha sido útil esta solución?