Title: Block Styling Backend
Author: Dennys Dionigi
Published: <strong>4 de octubre de  2022</strong>
Last modified: 19 de enero de  2024

---

Buscar plugins

![](https://ps.w.org/block-styling/assets/banner-772x250.png?rev=2794298)

Este plugin **no se ha probado con las últimas 3 versiones mayores de WordPress**.
Puede que ya no tenga asistencia ni lo mantenga nadie, o puede que tenga problemas
de compatibilidad cuando se usa con las versiones más recientes de WordPress.

![](https://ps.w.org/block-styling/assets/icon-256x256.gif?rev=2794297)

# Block Styling Backend

 Por [Dennys Dionigi](https://profiles.wordpress.org/dennysdionigi/)

[Descargar](https://downloads.wordpress.org/plugin/block-styling.zip)

 * [Detalles](https://es-ar.wordpress.org/plugins/block-styling/#description)
 * [Valoraciones](https://es-ar.wordpress.org/plugins/block-styling/#reviews)
 *  [Instalación](https://es-ar.wordpress.org/plugins/block-styling/#installation)
 * [Desarrollo](https://es-ar.wordpress.org/plugins/block-styling/#developers)

 [Soporte](https://wordpress.org/support/plugin/block-styling/)

## Descripción

This plugin revolutionizes the Gutenberg editing experience by introducing groundbreaking**
visible guidelines for blocks** .
 These guidelines, seamlessly integrated into 
the WordPress backend, serve as visual aids that dramatically enhance the readability
and organization of blocks. With these clear visual cues, users can effortlessly
identify block edges, alignment points, and content boundaries, leading to an unparalleled
level of precision and control. This enhanced visual clarity not only simplifies
block manipulation but also elevates the overall user experience, making block editing
a breeze.

### Context

Gutenberg is the code name for the new block based editor introduced in WordPress
5. It replaces the classic WordPress editor which is built on TinyMCE.

It is a significant change in how content is created.

With Gutenberg, you can add multiple media types and arrange the layout within the
editor using blocks.
 WordPress is changing the editor to make it more approachable
to non-coders.

**The main problem is that: blocks backend Ui is not as clear and intuitive as it
should be.**

## Capturas

[⌊How it works⌉⌊How it works⌉[

How it works

[⌊Plugin in action on pages⌉⌊Plugin in action on pages⌉[

Plugin in action on pages

[⌊Plugin working on posts⌉⌊Plugin working on posts⌉[

Plugin working on posts

[⌊Focus on title and columns⌉⌊Focus on title and columns⌉[

Focus on title and columns

## Instalación

 1. Upload `block-styling-backend.php` to the `/wp-content/plugins/` directory
 2. Activate the plugin through the ‘Plugins’ menu in WordPress
 3. that’s it. It works out of the box.

## Preguntas frecuentes

### How does it work?

It basically works. It’s magic.
 (Behind the scenes adding small CSS and bytes of
code to change Gutenberg **blocks layout** ).

### I really don’t understand how it works?

This plugin enhances the Gutenberg editor by offering clear visual indicators. These
indicators assist in understanding the layout and relationships among blocks, enabling
the creation of organized and visually attractive pages. Furthermore, the plugin
includes features for previewing the markup, headings, and names of your blocks.
This functionality aids in building well-structured and semantically coherent pages,
which is beneficial for improving SEO.

### May I have any extra heavy resources or bloat ?

Nope. Just, on backend, few bytes of compressed code which work only upon Gutenberg
blocks.

### What’s the killer feature ?

Now you can easily spot the markup you’re doing and also headings’ placement, to
improve your on-page SEO and writing better content.

## Reseñas

![](https://secure.gravatar.com/avatar/1471c57315a48ef94e2b07fef65eec994f9934b0d5be84ba24dff8be5c926781?
s=60&d=retro&r=g)

### 󠀁[Great addition](https://wordpress.org/support/topic/great-addition-76/)󠁿

 [meksONE](https://profiles.wordpress.org/meksone/) 5 de octubre de 2022 2 respuestas

Very simple, but yet useful! Waiting for more tweaks!

![](https://secure.gravatar.com/avatar/1ec4ac6bffef55503c7c882fc1ed8663c1c64031f5ec2ac794b3e7966939c789?
s=60&d=retro&r=g)

### 󠀁[Loved it](https://wordpress.org/support/topic/loved-it-173/)󠁿

 [Ivan Messina](https://profiles.wordpress.org/jacksoggetto/) 5 de octubre de 2022
1 respuesta

It makes it easier to navigate Gutenberg blocks. Fell in love with it. Great work.

![](https://secure.gravatar.com/avatar/0d2dc2401971f851e198ad62b61253a17b3f02938a9df08f3f31a1f910473f2f?
s=60&d=retro&r=g)

### 󠀁[It just works.](https://wordpress.org/support/topic/it-just-works-744/)󠁿

 [Dennys Dionigi](https://profiles.wordpress.org/dennysdionigi/) 4 de octubre de
2022 1 respuesta

I tested myself, and lol… I am also the coder behind itself. But.. hey! It works
and it’s also a missing feature that may improve the Blocks Ui, as it may help also
color blindness people.

 [ Leer todas las 3 reseñas ](https://wordpress.org/support/plugin/block-styling/reviews/)

## Colaboradores y desarrolladores

“Block Styling Backend” es un software de código abierto. Las siguientes personas
han colaborado con este plugin.

Colaboradores

 *   [ Dennys Dionigi ](https://profiles.wordpress.org/dennysdionigi/)

[Traduce “Block Styling Backend” a tu idioma.](https://translate.wordpress.org/projects/wp-plugins/block-styling)

### ¿Interesado en el desarrollo?

[Revisa el código](https://plugins.trac.wordpress.org/browser/block-styling/) , 
echa un vistazo al [repositorio SVN](https://plugins.svn.wordpress.org/block-styling/),
o suscríbete al [log de desarrollo](https://plugins.trac.wordpress.org/log/block-styling/)
por [RSS](https://plugins.trac.wordpress.org/log/block-styling/?limit=100&mode=stop_on_copy&format=rss).

## Registro de cambios

#### 3.1

Bugfix and ui improvement

#### 3

Improved code and overall stability

#### 2.1

Improved HTML Headings tag.
 * This has been a highly requested feature which might
help SEO. Now suddenly, if you care about the SEO on page, you could spot all the
headings you have in your pages. * While on previous version you should have seen
just that you have been using any heading, from now on, you shall also check which
heading tag you are using, of if you’re doing a semantically good job on your website.*
Near each of the title you will see a small square that indicates the closest tag
element. * Yep, of course, you need first, to write something and while doing it,
remember that you are writing for users. Humans, not robots.

#### 2.0

 * Added titles to each section
 * Microinteraction while mouseover blocks
 * Microinterations on active blocks
 * Improved code
 * Improved plugin’s bagdes and icons
 * Plus: fixed Pattern sidebar

#### 1.0

 * Second test.
 * Added screenshot.

#### 0.5

 * First test.

## Meta

 *  Versión **3.1**
 *  Última actualización **hace 2 años**
 *  Instalaciones activas **10+**
 *  Versión de WordPress ** 5.0.1 o superior **
 *  Testeado hasta **6.4.8**
 *  Idioma
 * [English (US)](https://wordpress.org/plugins/block-styling/)
 * Etiquetas:
 * [css](https://es-ar.wordpress.org/plugins/tags/css/)[gutenberg](https://es-ar.wordpress.org/plugins/tags/gutenberg/)
   [ui](https://es-ar.wordpress.org/plugins/tags/ui/)[ux](https://es-ar.wordpress.org/plugins/tags/ux/)
 *  [Vista avanzada](https://es-ar.wordpress.org/plugins/block-styling/advanced/)

## Valoraciones

 5 de 5 estrellas.

 *  [  3 valoraciones de 5 estrellas     ](https://wordpress.org/support/plugin/block-styling/reviews/?filter=5)
 *  [  0 valoraciones de 4 estrellas     ](https://wordpress.org/support/plugin/block-styling/reviews/?filter=4)
 *  [  0 valoraciones de 3 estrellas     ](https://wordpress.org/support/plugin/block-styling/reviews/?filter=3)
 *  [  0 valoraciones de 2 estrellas     ](https://wordpress.org/support/plugin/block-styling/reviews/?filter=2)
 *  [  0 valoraciones de 1 estrellas     ](https://wordpress.org/support/plugin/block-styling/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/block-styling/reviews/#new-post)

[Ver todas las reseñas](https://wordpress.org/support/plugin/block-styling/reviews/)

## Colaboradores

 *   [ Dennys Dionigi ](https://profiles.wordpress.org/dennysdionigi/)

## Soporte

¿Tenés algo que decir? ¿Necesitás ayuda?

 [Ver el foro de asistencia](https://wordpress.org/support/plugin/block-styling/)

## Donar

¿Te gustaría apoyar el progreso de este plugin?

 [ Doná a este plugin ](https://www.whynot.media)