I
I
Igor Dmitriev2019-08-14 18:23:34
css
Igor Dmitriev, 2019-08-14 18:23:34

How to add custom classes to standard Gutenberg elements?

Primitive elements are rendered in their pure form, without any classes, such as Paragraph: or List:
<p>тут какой то текст</p>

<ul>
  <li>текст пункта<li>
</ul>

You need to add your own classes to these elements. The question is how to do it the right way (functions.php, etc.)?
---
User response (NOT CORRECT): When you select any standard element, there is a "Block" tab in the right sidebar (where the record settings are displayed). There, in the "Additional" drop-down block, you can specify the classes you need.
Why?
The user should not even hear about classes and tags.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
G
Grigory S., 2019-08-15
@iworkup

add_filter('render_block', 'wrapBlock', 10, 2);

function wrapBlock($block_content, $block)
{
    $name = $block['blockName'];

    if ($name)
    {
        return sprintf('<div class="e-block e-block-%s">%s</div>', str_replace('/', '-', $name), $block_content);
    }

    return $block_content;
}

A
Anatoly Kulikov, 2019-08-14
@anatoly_kulikov

When you select any standard element, then in the right sidebar (where the record settings are displayed) there is a "Block" tab. There, in the "Additional" drop-down block, you can specify the classes you need.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question