Additional CSS classes field

As explained in WordPress Power Toolkit: Harness AI to build next-level websites

The Additional CSS Classes field is a Gutenberg block setting for entering one or more CSS class names.

The Additional CSS Classes field lets you apply an existing CSS class to a Gutenberg block without editing its HTML manually. section 7.7

To add a class in Gutenberg:

• Select the block you want to style. section 7.7
• Open the three-dot menu, choose the Block tab, and expand Advanced. section 7.7
• Type the class name into Additional CSS Class(es), without the leading period. section 7.7

Example

If the class is greensans, enter greensans—not .greensans. WordPress adds the class= attribute to the block’s HTML. section 7.7

Figure 7.13 You can apply classes to a block using Gutenberg’s Additional CSS Class(es) field.

Use the figure to identify the Additional CSS Class(es) field in Gutenberg’s block settings. section 7.7

How WordPress Power Toolkit: Harness AI to build next-level websites covers it

How deep it goes

Explains the interface sequence, generated HTML, naming rule, and limitations involving Classic blocks.

Examples

Uses greensans and contrasts entering a class name with defining a selector using a leading period.

What it assumes

Assumes a defined CSS class and teaches the field’s Gutenberg workflow from the interface basics.

What you can do after

Apply it via Gutenberg to attach CSS classes to supported blocks without manually writing the HTML class attribute.

How it connects

Connects CSS classes with Gutenberg blocks, HTML class attributes, the Advanced module, and code view.

liveBookmanning.com

Read WordPress Power Toolkit: Harness AI to build next-level websites on liveBook Get the book at manning.com

Related concepts

• CSS classconfigures · A name assigned to one or more document elements through a class attribute, allowing CSS selectors to match them and apply shared style declarations.

This explainer was generated by Manning's knowledge graph from the text of WordPress Power Toolkit: Harness AI to build next-level websites. The section links point to the parts of the book it draws on.