Gutenberg Block Editor Toolkit – EditorsKit

EditorsKit ofrece un conjunto de herramientas y opciones de bloques de creación de páginas para el nuevo editor Gutenberg de WordPress.

Ahora puedes tener un mejor control, formatos de texto, estilos y flujo de trabajo simplemente utilizando las herramientas ofrecidas por el plugin EditorsKit.

Míralo tú mismo

New: Block Styles Manager

You can now easily create and manage all of your block styles with the new styles manager.

Formatos de texto enriquecido

EditorsKit also adds the missing text formats for better content creation. The following rich text format are available upon plugin activation:

• Links with «rel» nofollow and sponsored attribute option
• Highlighted Text or Heading Colors
• Highlighted Text Background Color
• Clear Formatting Options
• Paragraph Justify Alignment
• Underline Text Format
• Superíndice
• Subíndice
• Sangría de párrafo, encabezado o bloque de lista
• Uppercase Text Transform
• Alineación de leyendas de imágenes e incrustaciones
• Espacio sin salto
• Abreviatura de acrónimos
• Insertar caracteres especiales

Glifos y caracteres especiales

Inserta caracteres especiales y símbolos en el editor de Gutenberg a tu gusto. Los caracteres especiales están categorizados y puedes usar el campo de búsqueda para encontrar un símbolo específico.

Markdown Support

Starting EditorsKit 1.6 , you can now use markdowns on Gutenberg editor while typing. Markdowns for *bold*, _italic_ and ~strikethrough~ are available upon plugin activation. Lists of available markdowns are also accessible on the settings menu.

Verlo en acción

Visibilidad del bloque

Con EditorsKit tendrás el siguiente control de visibilidad para gestionar y mostrar mejores contenidos.

• Mostrar u ocultar los bloques de Gutenberg en ordenadores de escritorio, tabletas y dispositivos móviles
• Visibilidad del bloque para usuarios en estado conectado o desconectado
• Visualización personalizada con lógica condicional de PHP
• Mostrar u ocultar los bloques de Gutenberg basados en valores de Advanced Custom Fields Plugin (ACF)

Tiempo de lectura estimado

El recuento de palabras ya está disponible en el editor de Gutenberg. EditorsKit luego amplía este recuento de palabras y también muestra el recuento estimado. Con aproximadamente 275 palabras por minuto más cálculos adicionales basados ​​en bloques de imágenes, puedes mostrar un mejor tiempo de lectura estimado en tus entradas y páginas.

Con tecnología de shortcode, puedes mostrar el tiempo de lectura estimado en tu contenido utilizando el código a continuación.

• before: texto o elemento que desea mostrar antes del tiempo de lectura.
• after: texto o elemento que deseas mostrar después del tiempo de lectura.
• tag: por defecto div: etiqueta HTML de contenedor
• fallback: establezca el valor en «verdadero» para mostrar el recuento de palabras basado en PHP en entradas antiguas que no se editaron o crearon a través de Gutenberg

Líneas de guía de bloque

EditorsKit features other tool aside from visibility management. With the new Block Guide Lines, you can easily toggle visible guide lines on title and each editor blocks in order to check the element boundaries. This feature will also help your workflow on handling nested blocks.

Copiar y pegar bloques seleccionados

Nota: Esta característica ya no esta disponible en las ultimas versiones de EditorsKit porque se ha añadido a Gutenberg.

Editorskit Typography

Note: This feature is deprecated and no longer available in the latest version. If you want to continue using Editorskit typography, You can download and install the editorskit deprecated typography addon manually from github.

Estilos de bloque de imagen y portada

Comes with selection of styles on Cover and Image Block for custom shapes and layouts such as diagonal, circular and rounder corners; and even add drop shadows.

Estilos adicionales para el bloque de lista

Proporciona el siguiente estilo adicional para el bloque de lista:

• Lista comprobada
• Flecha
• Cruzado
• Conectado
• Favorito
• Discontinuo
• Ninguno

Alineación de texto adaptable

Cambia fácilmente la alineación del texto por dispositivo. Esto te ayudará a proporcionar una vista de alineación diferente en dispositivos móviles y tabletas, además de la opción existente para escritorio.

Opción de altura de pantalla completa

Easily display selected blocks as full screen layout by toggling «Full Screen Height» option under the advanced panel. You’ll instantly have beautiful hero section by just using core blocks.

Cambiar la visibilidad del título

Oculta fácilmente la entrada, la página o el título de cualquier tipo de entrada en tu web con solo un clic. Esto te permitirá crear entradas y páginas completas dirigidas por el editor de Gutenberg sin obtener «(Sin título)» en tu escritorio de administración.

Importar y exportar un bloque

Exporta cada bloque o bloques seleccionados y bloques reutilizables directamente en el editor, sin necesidad de navegar a un panel de administración independiente. Luego, arrastra y suelta el archivo JSON exportado en el editor y se transformará automáticamente en bloques de Gutenberg, lo mismo ocurre con los bloques reutilizables.

Better Custom CSS Class(es)

¡Gran mejora en la opción Additional CSS Class(es)! EditorsKit proporciona una mejor interfaz de usuario con sugerencias de clases mientras escribes. Desarrollado con un filtro PHP personalizado, los desarrolladores de temas pueden incluir clases de utilidad personalizadas para obtener más opciones de personalización.

Establecer bloque de imagen como imagen destacada

Permite que el bloque de imagen seleccionada se configure fácilmente como la imagen destacada a través de la lista desplegable de ajustes de bloque.

Subida de imágenes destacadas arrastrando y soltando

Easily upload or change featured image on Gutenberg editor by dragging and dropping image on Featured Image sidebar panel.

Code Editor Mode Syntax Highlighter

Mejorar la visualización cuando estás en «Modo de editor de código». Desarrollado por la biblioteca CodeMirror por defecto de WordPress, Code Editor se mostrará con aspectos destacados de la sintaxis del código y podrás verificar fácilmente cada elemento y si hay algún error en tus códigos HTML.

Opción de diseño de tarjeta y enlace de bloque de texto y medios

Asignar un enlace personalizado a la imagen en los medios y el bloque de texto. Añade fácilmente enlaces personalizados, multimedia o adjuntos. También puedes configurar abrir a una nueva pestaña, no agregar seguimiento y/o establecer un enlace a todo el bloque. Además, puedes configurar el bloque de texto y medios para que se muestre como diseño de tarjeta con la opción de configurar la imagen en la parte superior o inferior. Integrado perfectamente con la selección de disposición de la barra de herramientas.

Añadir un enlace a bloques de portada, grupo y columna

Asigna enlaces para cubrir, agrupar y bloques de columnas cómodamente con la opción de activar atributos de enlace como abrir a una nueva pestaña, aplicar nofollow y/o valor de rel patrocinado. Además, puedes activar la opción adicional para aplicar la animación de desplazamiento.

Atajos de teclado

EditorsKit añade los atajos de teclado que faltan del Editor clásico. Cuando está activado, puedes utilizar los siguientes atajos para ahorrar tiempo fácilmente y mejorar el flujo de trabajo de escritura.

• CTRL + ALT + 1 : Encabezado 1
• CTRL + ALT + 2 : Encabezado 2
• CTRL + ALT + 3 : Encabezado 3
• CTRL + ALT + 4 : Encabezado 4
• CTRL + ALT + 5 : Encabezado 5
• CTRL + ALT + 6 : Encabezado 6
• CTRL + ALT + c : alinear al centro
• CTRL + ALT + r : alinear a la derecha
• CTRL + ALT + l: alinear a la izquierda
• CTRL + ALT + j : Justificar
• CMD + SHIFT +.: seleccionar bloque principal

Navegador de bloques

Muestra «Block Navigator» en el bloque que puede contener varios bloques secundarios. Disponible en Bloque de columnas y Bloque de grupo.

Mejoras en la interfaz de usuario y la experiencia del usuario

Mejora la interfaz y brinda una mejor experiencia de escritura.

Copiar y pegar degradados personalizados

Copia fácilmente colores degradados personalizados en tu portapapeles y pégalos en cualquier lugar. También puedes seleccionar las combinaciones disponibles de CopyGradients y pegar fácilmente los colores en los bloques de Portada y Botón.

Gestor de características

Activa o desactiva las características de EditorsKit usando el menú «Ajustes de EditorsKit». Esto te dará un control total sobre las características del plugin y te permitirá desactivar las características que no necesitas en tu web.

Tema compatible para desarrolladores

EditorsKit is moving towards being developer friendly as well. Starting version 1.5, custom theme_supports were added to provide theme developers option to make Gutenberg block editing experience for their users match the frontend display. Learn more here.

Ayuda, consejos y trucos accesibles

Añade el botón de ayuda, sugerencias y trucos en la parte inferior derecha del editor para ayudar a los usuarios a descubrir varios atajos y sugerencias útiles. Estos consejos definitivamente mejorarán tu flujo de trabajo y ahorrarán tiempo navegando por el nuevo editor de bloques.

Bloque ShareABlock

Inserta tus descargas de shareablock.com fácilmente usando este bloque. Explora tus patrones y plantillas de bloques y luego añádelos a tu contenido con solo un clic.

Ayudándote con el nuevo editor de Gutenberg

EditorsKit está creado para ayudarte a navegar a través del nuevo editor. Cada nueva característica hará que la creación de tu página sea más conveniente y fácil. Puedes ayudar a lograr este objetivo a través de la comunidad:

• Únete a la comunidad en Facebook
• Síguenos en Twitter
• Contribuye en Github

Contacto y agradecimientos

EditorsKit es mantenido y desarrollado por Munir Kamal.