Install Software For Free

You can install many open source software for free

Block Style Guides

Developer robertgillmer
Update Time April 29, 2019, 12:05 a.m.
Donation URL: donation
PHP Version: 5.3 +
WordPress Version: 5.1.1
Copyright: GPLv2 or later
Copyright URL: Copyright Information

Tag

blocks gutenberg gutenberg blocks gutenberg styling block styling

Download

1.0.0 1.1.0 1.2.0 1.2.1 1.2.2

Description:

This plugin allows you to create "style guides" displaying all core WordPress Gutenberg blocks, including variations, for styling purposes. You can choose which custom post types you can create the posts for, so you can see if there are CSS differences across different CPT's. Additionally, you can use this to test how Gutenberg blocks display on custom post types which haven't been set up to use the Gutenberg editor yet.

Installation:

  1. Install the plugin through the Add Plugins screen.
  2. Or, if you're feeling adventurous, download the plugin, unzip it, and upload it to the /wp-content/plugins folder via (S)FTP.
  3. But really, do that first one, all the cool kids are doing it.
  4. Once it's activated, go to Tools / Gutenberg Blog Style Guides to create the posts.

Screenshots:

  • The main screen for Gutenberg Block Style Guides.

FAQs:

Can this plugin be used to test custom post types which don't support Gutenberg Editor yet?

Yes it can. The Gutenberg mockup that this plugin puts into the_content will be parsed by WordPress just as if it had been entered through the editor directly.

Can I choose which blocks to display?

That will be offered in a future release.

Do you only create pages for core WordPress Gutenberg blocks?

If you have the following plugins installed and activated, there will be separate pages created for each:

Next on the roadmap is Ultimate Addons for Gutenberg and Kadence Blocks

I would rather use different placeholder text / images / URL's. And, I'd really like to not Rickroll people, kaythxbai.

Many of the placeholders are now filterable:

Do I need to use the class name to filter those variables?

Nah, just call the filter directly. This keeps you from having to track down the class name with the namespacing and the bases and the everything.

Why do I have to open the Audio/Video page through the Preview page to get the videos to work?

In order to make the video URL filterable, the URL is injected into the markup as part of an echo call. For some reason, this makes WordPress not convert it to an oEmbed until the page is viewed from the backend. And why is that? Because normally a wizard does it, but he gets confused by echo statements. Or something.

Changelog:

1.0.0 1.1.0 1.2.0 1.2.1 1.2.2