Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Crear Variaciones de Estilo de WordPress Gutenberg Blocks: Parte 1

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Alfonso Mora (you can also view the original English article)

Ahora es un momento emocionante para los desarrolladores de WordPress con el lanzamiento oficial de la versión 5.0 a la vuelta de la esquina. Esto marcará el debut del nuevo editor: denominada de Gutenberg. Si has tiene algo que ver con WordPress de forma regular, ya sea como desarrollador o un usuario, entonces probablemente vas a entender por qué esto es grandes noticias.

No todo el mundo está mirando adelante a la nueva versión, ya que aporta una experiencia de edición muy diferente a WordPress. Hay un poco de incertidumbre sobre cómo esto afectará el ecosistema de WordPress más amplio. Sin embargo, el nuevo editor del potencial de revolucionar cómo crear contenidos para sitios de WordPress. Y a pesar de que puede cumplir con resistencia inicial cuando sale usuarios en masa, creo que en última instancia, podría dar una conexión más tangible con el contenido de una manera que no es posible con el editor TinyMCE clásico.

Puede probar el nuevo editor antes de la planeada liberación de WordPress 5.0 al instalar el plugin de Gutenberg desde el repositorio del plugin de WordPress. Si usted no ha tenido oportunidad de probar todavía entonces fuertemente recomendaría que hacerlo, para obtener una vista previa de la futura experiencia de edición de WordPress!

Creación de contenidos en el nuevo editor es totalmente bloque de base. Cada pieza de contenido que añadir al editor es un bloque. Esto incluye todos sus elementos favoritos como deslizadores, los párrafos, botones, listas, imágenes, testimonios y así sucesivamente. Una vez añadido el editor puede configurar opciones que controlan el aspecto y el comportamiento del bloque. Éstas pueden editarse en el bloque sí mismo o mediante el panel inspector (situado a la derecha de la pantalla del editor). Bloque de configuración a veces se duplica en ambos lugares pero esto varía de bloque a bloque.

Casi todos los bloques aunque tienen una opción en el panel inspector para agregar manualmente uno o más nombres de clases CSS para permitir más bloquean personalización. Esto puede ser muy útil si desea sobrescribir estilos para un núcleo de bloque o bloque de partido 3.

Additional CSS Class text field

Aunque esto funciona bien sería beneficioso ampliar este comportamiento y permite agregar opciones de personalización del bloque a través de un conjunto de opciones de estilo predefinidos. Esto es exactamente lo que bloque las variaciones de estilo nos dan, y nos vamos centrando en ellos exclusivamente a lo largo de este tutorial.

Requisitos Previos

También a echar un vistazo a cómo agregar variaciones de estilo de bloque para sus propios bloques, así como para extender bloques existentes, por lo que para seguir a lo largo idealmente deberá estar familiarizado con los conceptos básicos de desarrollo de plugin WordPress y cómo se crean bloques.

No se preocupe, si usted necesita un accidente curso entonces Echale mi tutorial de cuatro partes en la creación de bloques personalizados. Prácticamente todo lo que necesitas saber para este tutorial cubre, aparte de variaciones de estilo de bloque, el foco de este particular tutorial!

También, si usted quiere seguir junto con el código y probarlo por ti mismo entonces necesitarás un servidor de desarrollo local para funcionar WordPress en (eg. WAMP, MAMP o similares) y un editor de código.

Fondo

La API de las variaciones de estilo de bloque fue introducida en el proyecto Gutenberg en v3.2 del plugin y permite aplicar estilos alternativos bloque directamente a través de la interfaz del editor.

Para lograr el mismo resultado antes las variaciones de estilo de bloque tienes que introducir manualmente las clases CSS personalizadas en el campo de texto de Clase Adicionales CSS en el panel inspector de bloque, situado en la sección Avanzada.

Si usted está interesado en la propuesta original para las variantes del estilo bloque y luego usted puede leer los detalles completos en la solicitud de extracción en el repositorio oficial de Gutenberg.

Las variaciones de estilo definidas para un bloque se pueden acceder directamente en la barra de herramientas de bloque. Seleccionar el bloque a continuación, haga clic en el icono superior izquierdo de la barra de herramientas para mostrar el panel Estilos de Bloque.

Block Styles pane

¿Recuerda antes cuando dije que algunas configuraciones de bloques pueden accederse directamente en el bloque y en el panel inspector? ¡Bueno esto es exactamente el caso de las variaciones de estilo de bloque! Asegúrese de que está seleccionado el bloque y echar un vistazo en el panel inspector.

Block style variations in the block inspector

Esto es para conveniencia y usted puede elegir variaciones de estilo de la ubicación que más le convenga. Por ejemplo en pantallas más grandes pueden optar para cambiar estilos de bloque mediante el panel inspector como que le permite cambiar entre estilos a través de un clic de ratón. Pero cuando en dispositivos más pequeños puede ocultar el panel inspector y solo tienes que cambiar estilos de la barra de herramientas de bloque en su lugar.

Soporte del Core Block

A pocas cuadras de la base de apoyo actualmente variantes de estilo de bloque:

  • Botón
  • Encuestas
  • Citar
  • Separador
  • Tabla

Estoy seguro de que el apoyo se añadirán a otros bloques de la base en el futuro esta característica se convierte más ampliamente adoptado. Es tan flexible, que estoy seguro de que muchos usuarios vendrán a esperar una selección de opciones predefinidas para la mayoría de los bloques. Una vez que has utilizado variaciones de estilo de bloque es fácil ver por qué esto podría ser el caso.

Puede Agregar variaciones de estilo de bloque para sus propios bloques de curso. A continuación exploraremos los detalles de implementación específicas.

Aplicación de las Variaciones de Estilo de Bloque

Existen dos métodos para la aplicación de las variaciones de estilo de bloque personalizado. Si usted tiene acceso a la definición de bloque puede especificar variaciones de estilo de bloque directamente dentro de la función registerBlockType() mediante la propiedad style.

Por ejemplo, esto es lo que parece la definición de propiedad de botón central bloque estilos.

Aquí, se registran tres nuevas variaciones de estilo de bloque. Observe que el estilo Redondeado es también establecer como predeterminado.

Sin embargo, si no tienes acceso al código fuente bloque entonces hay otro enfoque puede tomar. En Gutenberg 3.4 se agregaron dos nuevas funciones para registrar y anular el registro de las variaciones de estilo de bloque de fuera de la definición de bloque.

Para registrar un bloque personalizado variación estilo usar la función registerBlockStyle() como sigue:

Esto agrega una nueva variante de estilo bloque llamada custom-button-style para el bloque de botón central. Ahora cuando se inserta un bloque de botón en el editor verás la nueva variación de estilo de bloque disponible.

Custom block style variation available

Tan pronto como se selecciona la variación de estilo bloque agrega una clase CSS es is-style-custom-button-style campo de texto de Clase Adicional CSS en el panel inspector de bloque.

CSS class added to Additional CSS Class text field

Se trata de disparadores a su vez que una actualización a la salida del bloque y la clase se añade el código HTML.

Block markup showing the style variation class added

Tal vez se pregunte donde añadir la función de registerBlockStyle() en su propio código. No te preocupes que voy cubriendo un ejemplo completo en el siguiente post y podrás descargar el plugin final así que usted puede probar a ti mismo.

¡Un Pequeño Gotcha!

Cuando se inserte un bloque que soporta variaciones de estilo de bloque es interesante no nota que ninguna clase CSS es realmente al formato de bloque hasta que específicamente haga clic en una variación del estilo bloque, aunque uno se muestra como está seleccionada por defecto.

Pruébelo usted mismo.

Insertar un nuevo bloque de botón en el editor y abrir las opciones de variación de estilo de bloque. Debería ver la opción Redondeado seleccionada por defecto. Si abre la sección Avanzada en el inspector de bloque ninguna clase CSS ha sido añadida al campo de texto. Y así no se insertará ninguna clase CSS en el marcado de bloques. Revisa el código HTML que genera para el bloque de botón en el editor para confirmar por ti mismo.

Ahora regresa a los valores de variación de estilo de bloque para su bloque de botón y haga clic en la opción por defecto (el que está seleccionado) o a cualquiera de las otras opciones de estilo de bloque. Inmediatamente verás el CSS se agrega clase al campo de texto de Clase Adicional CSS y el marcado del contenedor de bloques. Cualquier reglas CSS personalizadas que se han definido para la clase personalizada se aplicará también en cuanto a la variación de estilo de bloque ha sido seleccionada.

Este comportamiento un poco confuso sobre la primera exposición como intuitivamente cabría esperar la clase CSS que se agregará automáticamente la variación de estilo de bloque que está seleccionada por defecto.

Conclusión

Hemos aprendido qué bloque variaciones de estilo y por qué son una adición útil al bloque de experiencia de edición. Se demostró una implementación básica de una variación del estilo de bloque.

En el siguiente post iremos a través totalmente de trabajo ejemplos de cómo registrar sus propios estilos de bloque y conectar la CSS mediante un plugin y también por un tema de niño.

También a echar un vistazo a cómo anular el registro de bloque de estilos y cómo establecer qué variación de estilo está seleccionada por defecto cuando un bloque se inserta por primera vez en el editor.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.