CSS classes in the block editor

  • Hi,

    I’m trying to simplify and optimize a stylesheet made for styling the block editor that I copied from a theme I found on GitHub when WP 5.0 was released.

    Many (not all) of the CSS rules in this stylesheet are prefixed with classes such as: .editor-block-list__block, .edit-post-visual-editor or .block-library-list. An example:

    
.editor-block-list__block .wp-block-quote {
    font-size: 1rem;
    font-style: normal;
    margin: 0 1.6em 1.6em;
}

    Or:

    
.edit-post-visual-editor .editor-block-list__block blockquote p {
    font-family: "Times New Roman", Times, serif;
    font-size: 1rem;
    line-height: 1.4;
}

    My question is, with all the work that has been done to make styling the block editor easier for theme developers since WP 5.0, are these prefix classes still necessary? Or can I use the .wp-block-xxxx classes directly?

    Thanks in advance

    • This topic was modified 3 years, 1 month ago by Steven Stern (sterndata).
    • This topic was modified 3 years, 1 month ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
Viewing 1 replies (of 1 total)

  • Hi there,

    The prefixes are never “necessary”, they simply enable you to target specific environments. In most cases I should think that targeting wp-block-* would be adequate, but it really depends on what you’re trying to achieve.

Viewing 1 replies (of 1 total)
  • The topic ‘CSS classes in the block editor’ is closed to new replies.