Gutenberg Block Editor Toolkit – EditorsKit

Descripción

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

Rich Text Formats

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.

[editorskit display="wordcount" before="Reading Time: " after=" min"]
  • 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: div por defecto: contenedor de etiquetas HTML
  • 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

Copia fácilmente uno o varios bloques seleccionados y luego pégalos en la web o en una web separado usando CMD + V , CTRL + V o pega la opción con el clic derecho.

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
  • Punteado
  • 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.

Activar o desactivar el guardado automático

Easily toggle Auto Saving to fix several lagging issues or prevent your website from being blacklisted on your webhost provider.

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.

Features Manager

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:

Contacto y agradecimientos

EditorsKit esta mantenido y desarrollado por Jeffrey Carandang.

Capturas

  • Colores de texto y resaltado
  • Formatos de texto enriquecido del editor Gutenberg
  • Visibilidad según el tamaño de la pantalla y el estado de la conexión del usuario
  • Ajustes del bloque
  • Estilos de bloque de imagen y portada
  • Settings and Options
  • Custom Classes Utility and Auto Suggestions
  • Code Editor Mode Syntax Highlighter
  • Subida de imágenes destacadas arrastrando y soltando
  • Link rel attributes nofollow and sponsored option

Instalación

Esta sección describe cómo instalar el plugin y hacer que funcione.

ej.:

  1. Subir el directorio completo a tu directorio «wp-content/plugins»
  2. Activar el plugin en la página de administración del plugin
  3. ¡Eso es! Espero que te encante este plugin 🙂

Reseñas

9 de abril de 2021
This plugin helped me a lot with Gutenberg editor. Added missing properties. I had no problem working with it. Only benefits. Thank you developers!
16 de febrero de 2021
I love that this plugin covers things that fall outside of most block developers horizons. I have a suggestion that might fall right inside your remit... css columns. Wait, hear me out! I use css columns a lot, and right now I have to do it using custom css, which means I cannot see the effect, live, in the editor. Css columns property is a special case (compared to many other layout options) which has been overlooked by block authors. It provides a fluid & responsive text-flow layout that cannot be achieved with any combination of current WP blocks. Yet, it is very unlikely that any block developer will make a css columns block as it needs to be a wrapper (like the group or cover blocks) which already exist. It it possible that this is something that might find its way into EditorsKit? Perhaps as a meta box that appears when relevant blocks are being used? I think it would be a compelling feature and one that is unlikely to appear anywhere else.
Leer todas las 91 reseñas

Colaboradores y desarrolladores

«Gutenberg Block Editor Toolkit – EditorsKit» es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

«Gutenberg Block Editor Toolkit – EditorsKit» ha sido traducido a 5 idiomas locales. Gracias a los traductores por sus contribuciones.

Traduce «Gutenberg Block Editor Toolkit – EditorsKit» a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios

1.29.3

  • Compatibility fixes for WordPress 5.5

1.29.2

  • Update readme «Tested Up to» WordPress version

1.29.1

  • New: Add ndash and mdash
  • Fixes and compatibility with Gutenberg Plugin
  • Fixes and compatibility with thirdy party plugin

1.29

  • New: Add new preview mode with shortcut using CMD/CTRL + SHIFT + P. #264 🎊
  • Fixes: Compatibility fixes for upcoming WordPress 5.4 🐛

1.28

  • New: Gradient picker copy and paste controls. #264 🎊
  • Fixes: Compatibility with new Gutenberg plugin UI and block guide lines. #265

1.27

  • New: Special Characters Inserter Format. #254 🎊
  • New: Heading and alignment keyboard shortcuts. #262🎉
  • Tweaks: Add more compatibility changes for Gutenberg plugin
  • Fixes: Prevent error when switching to Code Editor using keyboard shortcut. #255

1.26

  • New: New ShareABlock block. #251🎉
  • New: New ‘dashed’ list block style. #252
  • Tweaks: Use three empty paragraph to show shortcut for spacer block transform instead of four.
  • Tweaks: Few more compatibility with Gutenberg plugin

1.25

1.24.1

1.24

1.23.1

1.23

1.22.1

  • Tweaks: Add new features to Features Manager

1.22

1.21

1.20

1.19

1.18.3

  • Fixes: Resolve issue with Code Editor mode changes not reflecting when switching to to Visual Editor mode

1.18.2

1.18.1

1.18

1.17

1.16

  • New: Copy single or muliple selected blocks and paste anywhere 🎊
  • New: Caption Alignment for images, galleries and embed blocks 🎉

1.15

  • New: Estimated Reading Time 🎊
  • New: Media and Text Block card layout option 🎊
  • New: Block Navigator on Columns and Group Block 🎉
  • Improvement: Add ‘sponsored’ rel attributes option on Media and Text Block link
  • Improvement: Prevent menu and tools link overlap when there are lots of menu
  • Fixes: Few other 🐛 cleanup for errors and Gutenberg compatibility

1.14

  • New: Link format noFollow rel attribute option 🎊
  • New: Link format sponsored rel attribute option 🎉
  • Improvement: Helper filter for Block Lab plugin support
  • Fixes: Fix Chrome overlapping metabox issue
  • Fixes: Few other 🐛 cleanup

1.13

  • New: Drag and Drop Featured Image Upload 🎊
  • New: Add Toolbar to Media and Text Block to Add Custom Link to Image or Whole Block 🎉
  • New: Media and Text Block Link no follow and open to new tab toggle 🎉
  • Improvement: Add background on block drag and drop for better UI
  • Fixes: Clean up 🐛

1.12

  • New: Add option to set Image Block as Featured Image 🎊
  • New: View Heading Block label for better content writing 🎉
  • Improvement: Change URL Popover «Open in New Tab» alignment for lesser mouse movement
  • Improvement: Add POT string translations for both PHP and JS text
  • Fixes: Improve performance and clean up 🐛
  • Fixes: Compatibility and fixes for Gutenberg version 6.4.0

1.11

  • Improvement: Convert process to wp-scripts for WordPress Gutenberg standard
  • Improvement: Ability to hide «Responsive Panel»
  • Fixes: Prevent issues with third party plugin’s settings page
  • Fixes: Compatibility and fixes for Gutenberg version 6.3.0

1.10

  • New: Add Code Syntax Highlighting when on Code Editor Mode 🎊
  • New: Add «View Custom Fields» option to easily scroll down to Custom Fields area 🎉
  • Fixes: Prevent display bug when Editor Height is toggled on
  • Fixes: More compatibility fixes for the latest Gutenberg plugin

1.9.2

  • New: Editor Height Option to set editor min-height to 100% of the viewport 🎊
  • Improvement: Only load editorskit scripts on admin pages that are running Gutenberg
  • Improvement: Do not automatically disable Auto Saving after plugin activation
  • Improvement: Extended support for Block Lab Plugin with editorskit_blocklab_classname() helper function
  • Fixes: Prevent error from third-party plugins for REST API missing attributes
  • Fixes: More compatibility fixes for the latest Gutenberg plugin

1.9.1

  • Improvement: Add ek- identifier for custom Utility Classnames
  • Improvement: Extended support for Block Lab attributes
  • Fixes: Prevent issues on REST API from blocks added via PHP register_block_type

1.9

  • New: Custom Utility Classes and Class(es) Suggestions 🎉
  • Improvement: Add editorskit-title-hidden body class when title is hidden
  • Improvement: Add Text and Highlight Colors to Features Manager
  • Fixes: Exclude ‘core/nextpage’ block to visibility option ( https://wordpress.org/support/topic/nextpage-feature-broken/ )
  • Fixes: Compatibility fixes for new Gutenberg plugin version

1.8

  • New: Image and Cover Block Styles ( circular, diagonal, rounded corners and shadow ) 🎉
  • New: Full Screen Height toggle option 🎉
  • Improvement: Add responsive panel with display settings to show/hide blocks on desktop, tablet and mobile
  • Improvement: Change logged-in user state to toggle options with descriptions
  • Improvement: Show title on search and menu item even hidden toggle is active
  • Fixes: Compatibility fixes for new Gutenberg plugin version

1.7

  • New: Block Import and Export ( https://twitter.com/phpbits/status/1138412218721026049 ) 🎉
  • Improvement: Better UI for Text Color and Highlighter
  • Fixes: Gutenberg 5.9+ compatibility fixes
  • Fixes: Fix ACF on advanced visibility tab issue

1.6.2

  • Fixes: Bug fix for new reusable block name «core/template» and block options

1.6.1

  • Fixes: Conflict with custom post type and hidden title feature : https://wordpress.org/support/topic/error-with-custom-post-type-registration-after-plugin-update/

1.6

  • New: Gutenberg Editor Markdown Support 🎊
  • New: Clear Formatting Options 🎉
  • New: Subscript, Superscript and Uppercase Text Formats 🎉
  • New: Toggle Title Visibility Option 🎉
  • New: EditorsKit Features Manager 🎊
  • Add: Freemius Insights
  • Compatibility: Disable duplicate formats when JetPack or CoBlocks is active
  • Fixes: Shortcode Block Compatibility Bugs
  • Fixes: Remove EditorsKit id instance for other plugin’s compatibility
  • Fixes: Conflict with Thrive Comments plugin( https://github.com/phpbits/block-options/issues/49 )

1.5

  • New: Highlighted Text or Heading Colors 🎉
  • New: Highlighted Text Background Color 🎉
  • New: Paragraph Justify Alignment 🎉
  • New: Enable or Disable Auto Save 🎊
  • New: editorskit-template-block-sizes and editorskit-genesis-layout-block-sizes theme supports 🎊

1.4.3

  • Add new Underline Text Format 🎉
  • Fix issue with Classic Block Conversion to Blocks

1.4.2

  • Fix button CSS issue on modal popup for older Gutenberg version

1.4.1

  • Block Guide Lines Compatibility for old version

1.4

  • Rebranded to EditorsKit
  • Improve UI and UX
  • Add new Block Guide Lines feature
  • Fix issue with Advance Custom Fields Plugin visibility
  • Rewrite for better Gutenberg support

1.3.3

  • Fix issue with latest Gutenberg version

1.3.2

  • Fix issue with column styling

1.3.1

  • Fix classes duplicate

1.3

  • Add fixes for Gutenberg 3.7 issue and deprecated functions

1.2.1

  • Añadidas correcciones para la integración de ACF Pro
  • Fixes for deprecated variables

1.2

  • Añadida la compatibilidad con ACF para gestionar las visibilidad en función de los valores y condiciones de campo específicos

1.1.1

  • Upgrade API and fix issues with Gutenberg 3.1

1.1

  • Fix issues with other Gutenberg plugins, options not saving
  • Add support for inner column blocks
  • Add option to hide descriptions for adept users to minimize section content

1.0

  • Opciones iniciales de la versión del plugin para Gutenberg