Gutenberg adds a classname and separately renders CSS in the for certain when certain support features are used such as textColor. This adds additional classNames to blocks and renders additional css in head. Can it be disabled?

For example, when setting the textColor for any block, Gutenberg automatically assigns the block with a linkColor of the same value by creating an element under styles. It then applies a class name and renders that css class a styles attribute in the head listing the link color under .whateverClassItDecided a{}.

Here is what Gutenberg writes when selecting the text color.

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|accent-4"}}}},"textColor":"accent-4","className":""} -->
<p class="has-accent-4-color has-text-color has-link-color">I am a paragraph</p>
<!-- /wp:paragraph -->

Which corresponds to it writing this in the element (see the wp-elements class)

<p class="has-accent-4-color has-text-color has-link-color wp-elements-a4510a691648d9ffeb8c5f05d6a9c9a5">diff</p>

And this in the head

.wp-elements-a4510a691648d9ffeb8c5f05d6a9c9a5 a{

Is there a way to disable this wp-elements behaviour completely, removing the className that was added to the block, the automatic alignment of styles{elements ... and the css written in the head?


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.