Código Gutenberg, preformateo y bloques en WordPress - Mundo2030

El editor de bloques de Gutenberg le permite agregar contenido a sus páginas y publicaciones de WordPress. Puede usar muchos tipos diferentes de bloques para crear y diseñar contenido. Sin embargo, algunos bloques son de naturaleza similar y los usuarios pueden estar confundidos acerca de dónde usar los bloques conectados. En este artículo, veremos los tres tipos de bloques más comunes disponibles en el Editor de bloques de Gutenberg: código, bloques preformateados y párrafos. Explicaremos las diferencias entre ellos y los escenarios adecuados para su uso.

Código contra formato previo contra bloques de párrafo

El código, el formato previo y los párrafos forman parte de los bloques de texto en el editor de Gutenberg. Puede usar estos bloques para insertar diferentes tipos de contenido textual según la situación.

1. Bloque de código

Como sugiere el nombre, los bloques de código se utilizan para mostrar código formateado directamente con fines de aprendizaje. En otras palabras, los bloques de código se utilizan siempre que necesite mostrar código como parte de su contenido. Ahora, quizás se esté preguntando, ¿el bloque de código ejecuta el código que ingresa? La respuesta es no, solo mostrará el código de formato para que el lector lo vea. En esencia, el bloque de código no es un editor de código, básicamente muestra el código de forma aditiva. Así que asegúrese de aplicar las mejores prácticas de codificación, como formato de espacio, agregar comentarios a su código y más.

Otra ventaja de los bloques de código es que puede mostrar código de cualquier lenguaje de programación porque no los ejecuta. Esto lo convierte en una excelente herramienta para mostrar diferentes tipos de guiones que los lectores pueden leer, aprender e incluso copiar.

Al igual que los otros bloques de Gutenberg, los bloques de código ofrecen dos opciones de personalización, una barra de herramientas superior sobre el bloque y una barra lateral en el lado derecho de la página, como se muestra en la imagen de arriba.

Desde la barra de herramientas superior puede realizar los siguientes cambios en el bloque.

• Cambiar el estilo o tipo de bloque: Esta configuración le permitirá cambiar el bloque de código de formato previo, personalizar HTML, cambiar columnas o crear un grupo cuyo estilo, color y espaciado se pueden personalizar aún más.
• arrastrar: Esto es comprensible, puede mantener presionado este ícono para mover el bloque arrastrándolo a cualquier parte de la página.
• Mover hacia arriba y hacia abajo: Esta configuración funciona como la anterior, la única diferencia es que en lugar de arrastrar el bloque, puedes moverlo manualmente hacia arriba o hacia abajo.
• Opciones de fuente: La barra de herramientas superior también proporciona opciones para aplicar configuraciones de negrita y cursiva para escribir código.
• Asociación: Esta configuración le permite vincular cualquier código escrito a una URL específica.
• Más ajustes: Esta configuración le permitirá usar opciones como código incrustado, imágenes incrustadas, entrada de teclado, tachado, índice, superíndice y color de texto.

Otro panel personalizado disponible en el bloque de código es la barra lateral, que le permite cambiar el tamaño de la fuente, así como incluir anclas HTML y otras clases de CSS.

2. Bloques preformateados

Este bloque es muy similar a un bloque de código, pero hay algunas diferencias sutiles entre los dos. Este bloque muestra el texto exactamente como se ingresó, principalmente para mostrar el contenido textual con saltos de línea y espacios, al tiempo que brinda opciones para cambiar la tipografía, los colores, etc.

Echemos un vistazo a la configuración en la barra de herramientas superior y la barra lateral de este bloque para que podamos encontrar algunas diferencias importantes entre este bloque y el bloque de código.

Usando la barra de herramientas superior, la mayoría de las opciones son las mismas que para los bloques de código. Como se mencionó anteriormente, también puede convertir bloques preformateados en código y otros bloques. La principal diferencia entre los bloques preformateados y los bloques de código son las opciones en la barra lateral del bloque, especialmente las opciones de color. Los bloques preformateados le permiten cambiar el color del texto, agregar color de fondo y cambiar el color del enlace si algún texto está vinculado por un hipervínculo. Si bien el bloque de código ofrece una opción para cambiar el color del texto desde la sección "Más opciones" en la barra de herramientas superior, las opciones de personalización de color adicionales disponibles en el bloque preformateado lo hacen destacar.

notas: Muchos complementos de resaltado de sintaxis están disponibles para demostrar su código agregando colores, números de línea y funcionalidad de copia de clic. La mayoría de estos complementos se pueden usar

或包含标签的预格式化 tag. For example, the plugin will add syntax highlighting when you add code in the format tag. For example, the plugin will add syntax highlighting when you add code in the format
 your code
  algunos complementos  sin embargo, solo pueden usar bloques preformateados o de código.  Si es un desarrollador o codificador que quiere mostrar sus habilidades de codificación, le recomendamos que use uno de los complementos de resaltado de sintaxis para aprovechar el código predeterminado y los bloques preformateados en Gutenberg.
3. Bloquear párrafo




Finalmente, tenemos el bloque de párrafo, que es el tipo de bloque predeterminado para agregar contenido y texto a través del editor de bloques.  Esta es la unidad que definitivamente usará más, ya que es la unidad más básica y básica.  El texto ingresado se formateará usando etiquetas de párrafo HTML, al presionar Enter se creará un nuevo bloque de párrafos.
La otra diferencia principal entre Paragraph Block y los otros dos son sus opciones de personalización únicas.  Con la barra de herramientas superior, a diferencia de los otros dos bloques, los bloques de párrafo se pueden convertir en columnas, grupos, bloques preformateados, títulos, listas, citas, citas y versos.  Las otras opciones en la barra de herramientas superior son las mismas entre los tres bloques.  Además, verifique las opciones en la barra lateral del bloque, ofrece opciones para el texto y el color de fondo como bloques preformateados, pero también hay una opción única llamada configuración de texto.  Esta configuración le permite mostrar letras mayúsculas (iniciales en mayúscula) en los párrafos, como se muestra en el ejemplo a continuación.



También puede agregar cubiertas y cambiar la altura de la fila.  La diferencia aquí, sin embargo, es que puede convertir párrafos en bloques de código preformateados pero no.
Diferencia - código contra formato previo contra párrafo




Las diferencias entre estos bloques se resumen a continuación.




usar / bloquear
párrafo
código
preformateado




Propósito
Los bloques de párrafo se utilizan para crear contenido y son el bloque predeterminado para agregar texto a través del editor de bloques.
Los bloques de código se utilizan para mostrar el código como parte del contenido.
Los bloques preformateados se utilizan para mostrar el texto exactamente como lo escribe.


Etiquetas HTML

...

……

……



convertir
preformateado y muchos más
preformateado
codificación


color de texto
sí
sí
sí


antecedentes
sí
De forma predeterminada, puede usar Grupo para agregar un fondo
sí


enfatizar la sintaxis
No
sí
sí


fuente utilizada
Fuente predeterminada predeterminada
Fuentes monoespaciadas personalizadas
Fuentes monoespaciadas personalizadas


cruzar la línea
No
sí
sí


espacio
sí
sí
sí


comentarios HTML
No
sí
sí


Etiqueta
No
sí
sí


sombrero hundido
sí
No
No


Altura de la línea
sí
No
No




ultimas palabras




Finalmente lo conseguimos.  Los tres bloques se utilizan para agregar tipos específicos de contenido a través del editor de bloques.  El estilo de estos bloques depende del tema que esté usando, y la mayoría de los temas y complementos usan una combinación de pre/código para enfatizar la sintaxis.  Además, puede usar bloques HTML personalizados para insertar los resultados del código de visualización.