mrwweb / wordpress-block-editor-theme-support-starter

Starter CSS for Themes Supporting the WordPress Block Editor

Starter CSS for the WordPress Block Editor

It's awfully hard to remember the markup, classes, and options for all the new blocks in WordPress. This project aims to document that information in an easy-to-grab starter stylesheet for WordPress themes.

Contributions are encouraged! Submit a simple pull request or open an issue (encouraged before larger PRs).

Note on CSS selectors

The selectors in this project are as much for documentation as they are for styling. That's why every class is qualified with an element. This is particularly useful in cases where a block may change markup depending on it's configuration.

Depending on your CSS authoring preferences and site environment, you are encouraged to adjust selectors in your project to keep specificity as low as possible.

Comment Styles

Follow the TwentyTwenty section comment styles for block group sections and PHPDoc-like comments for a single block section.

Roadmap

• Keep updated with future versions for WordPress (Issues & PRs greatly appreciated!)
• Add SCSS version of stylesheets, possibly with useful features like @each loop for color classes (Feedback issue re: SCSS)
• Add supplemental stylesheets for popular 3rd-party blocks
• (Maybe?) Include relevant PHP functions for theme support
• (Maybe?) Support for package managers

Finding This Useful?

You'll probably love the MRW Simplified Editor plugin.

wordpress-block-editor-theme-support-starter's Issues

Add post title selector to block-editor-styles.css

Add Table of Contents to Files

As suggested by @kelliwise in #1, a table of contents would be a useful overview for folks getting started and those seeking a specific selector.

What is the best way to document classes, options, etc.?

Currently all information about optional classes, inline styles, alignments, etc. is included in a comment preceding the block's CSS selectors. Here's the most verbose example:

/*
 * Button
 *
 * Note: Buttons container added in WP5.4
 *
 * Alignments: alignleft, aligncenter, alignright
 * Default Style Variations: is-style-outline
 * Possible Inline Styles: border-radius
 * Color Support: Background, Text
 */

Some questions I would love feedback on:

1. Is this the best possible way to do this?
2. Is any information missing or unclear?
3. What would be a better way?

Add Selectors for Widget Blocks

Not urgent, but would be good to be complete.

Gallery Block Front & Back End Selectors

Video Block Front & Back End Selectors

Add a separate style sheet documenting core Block Patterns

With Block Patterns in WordPress 5.5, themes may want to support the specific patterns provided by core. Would adding specific selector patterns be useful?

Add Selectors for Social Icons block in WP 5.4

More Block (Front? &) Back End Selectors

Consider adding example of a custom block style variation somewhere

This gets into the territory of including PHP-related stuff as well (which is tempting). Deserves more thought.

Page Break Block Front & Back End Selectors

Should we provide an SCSS version?

My current intention with the project is to provide useful copy-and-pasteable files for WordPress themes.

Since CSS is valid SCSS, these files can be dropped into an .scss file without any issue. So, are there any ways in which a SCSS version of these files could provide extra value?

The likely changes I can think of would be:

• Use a single layer of nesting for unqualified element selectors like .wp-block-quote cite
• Provide some conveniences such as looped output of color classes

Are these improvements worth the extra maintenance cost? Could the CSS version be output cleanly from the SCSS version for easier upkeep? I lean toward yes on both questions but would love some more feedback!

Missing figcaption on Image Block

Cover Block Front & Back End Selectors

Rename `master` branch to `main`

Eager to do this but waiting on official Github support to make this change easier and more stable. That is expected in the next few months.

Audio Front & Back End Selectors