Title: Block Style Guides Author: RobertGillmer Published: Ẹrẹ́nà 11, 2019 Last modified: Igbe 28, 2019 --- Ṣàwárí àwọn plugin Plugin yìí **kò tíì ṣe àyẹ̀wò pẹ̀lú àwọn ìtújáde mẹ́ta pàtàkì tó kẹ́yìn ti WordPress**. Ó lè jẹ́ pé a kò tọ́jú tàbí ṣe àtìlẹ́yìn fún un mọ́, ó sì lè ní àwọn ọ̀ràn ìbámu nígbà tí a bá lò ó pẹ̀lú àwọn ẹ̀yà WordPress tuntun. ![](https://s.w.org/plugins/geopattern-icon/block-style-guides.svg) # Block Style Guides Láti ọwọ́ [RobertGillmer](https://profiles.wordpress.org/robertgillmer/) [Ṣe ìgbàsílẹ̀](https://downloads.wordpress.org/plugin/block-style-guides.1.2.2.zip) * [Àwọn àlàyé](https://yor.wordpress.org/plugins/block-style-guides/#description) * [Àwọn àgbéyẹ̀wò](https://yor.wordpress.org/plugins/block-style-guides/#reviews) * [Ìgbéwọlẹ̀](https://yor.wordpress.org/plugins/block-style-guides/#installation) * [Ìdàgbàsókè](https://yor.wordpress.org/plugins/block-style-guides/#developers) [Ìrànlọ́wọ́](https://wordpress.org/support/plugin/block-style-guides/) ## Àpèjúwe 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Ìtumọ̀ Yorùbá: ’s. Additionally, you can use this to test how Gutenberg blocks display on custom post types which havenÌtumọ̀ Yorùbá: ’t been set up to use the Gutenberg editor yet. ## Àwọn àwòrán ìbòjú [⌊The main screen for Gutenberg Block Style Guides.⌉⌊The main screen for Gutenberg Block Style Guides.⌉[ The main screen for Gutenberg Block Style Guides. ## Ìgbéwọlẹ̀ 1. Install the plugin through the Add Plugins screen. 2. Or, if youÌtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’s activated, go to Tools / Gutenberg Blog Style Guides to create the posts. ## FAQ Can this plugin be used to test custom post types which donÌtumọ̀ Yorùbá: ’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: * [Atomic Blocks](https://wordpress.org/plugins/atomic-blocks/) * [Block Gallery](https://wordpress.org/plugins/block-gallery/) * [CoBlocks](https://wordpress.org/plugins/coblocks/) Next on the roadmap is [Ultimate Addons for Gutenberg](https://wordpress.org/plugins/ultimate-addons-for-gutenberg/) and [Kadence Blocks](https://wordpress.org/plugins/kadence-blocks/) I would rather use different placeholder text / images / URLÌtumọ̀ Yorùbá: ’s. And, IÌtumọ̀ Yorùbá: ’d really like to not Rickroll people, kaythxbai. Many of the placeholders are now filterable: * bsg-very-short-lorem (default: some lorem, IÌtumọ̀ Yorùbá: ’m not typing it out here) * bsg-short-lorem (default: some different lorem) * bsg-medium-lorem (default: some other different lorem) * bsg-long-lorem (default: some alternative other different lorem) * bsg-small-square-image (default: https://via.placeholder.com/400×400) * bsg-medium-square-image (default: https://via.placeholder.com/800×800) * bsg-large-square-image (default: https://via.placeholder.com/1600×1600) * bsg-small-portrait-image (default: https://via.placeholder.com/225×400) * bsg-medium-portrait-image (default: https://via.placeholder.com/450×800) * bsg-large-portrait-image (default: https://via.placeholder.com/900×1600) * bsg-small-landscape-image (default: https://via.placeholder.com/400×225) * bsg-medium-landscape-image (default: https://via.placeholder.com/800×450) * bsg-large-landscape-image (default: https://via.placeholder.com/1600×900) * bsg-primary-custom-color (default: #bada55) * bsg-secondary-custom-color (default: #c0ffee) * bsg-tertiary-custom-color (default: #facade) * bsg-website-url (default: https://wordpress.org) * bsg-audio-url (default: https://upload.wikimedia.org/wikipedia/en/d/d0/Rick_Astley_- _Never_Gonna_Give_You_Up.ogg) * bsg-video-url (default: https://www.youtube.com/watch?v=dQw4w9WgXcQ) * bsg-giphy-url (default: https://media1.giphy.com/media/a6OnFHzHgCU1O/giphy.gif) * bsg-gist-url (default: https://gist.github.com/robert-gillmer/370c261c97c136b68c034473d9ec87b7) 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. ## Àwọn àgbéyẹ̀wò ![](https://secure.gravatar.com/avatar/7c9f1110d4461bea9644f874501cb1bc6e47a136a0d617bd8885708a67af79ee? s=60&d=retro&r=g) ### 󠀁[Great assistant for working with Blocks](https://wordpress.org/support/topic/great-assistant-for-working-with-blocks/)󠁿 [David Decker](https://profiles.wordpress.org/daveshine/) Igbe 28, 2019 I find this plugin to be a great help when working with Blocks when building sites: the style guides give a good impression of what I can expect and how it will look visually and display on the actual used installation with the theme etc. Really helpful in day to day work. And I could also image this to be a great helper for Block developers who code extensions for existing Blocks from WP Core. Maybe popular block collection plugins will get some support in the future? Maybe, this would be a great feature extension 😉 (I am thinking of Ultimate Addons for Gutenberg and Kadence Blocks for example) Thanks for creating this plugin and releasing this for free! Keep up the good work 🙂 [ Ka gbogbo àgbéyẹ̀wò 1 ](https://wordpress.org/support/plugin/block-style-guides/reviews/) ## Àwọn Olùkópa & Olùgbéejáde “Block Style Guides” jẹ́ ètò ìṣàmúlò orísun ṣíṣí sílẹ̀. Àwọn ènìyàn wọ̀nyí ti ṣe ìkópa sí plugin yìí. Àwọn Olùkópa * [ RobertGillmer ](https://profiles.wordpress.org/robertgillmer/) A ti túmọ̀ “Block Style Guides” sí àwọn èdè agbègbè 2. Ọpẹ́lọpẹ́ fún [àwọn atúmọ̀ èdè](https://translate.wordpress.org/projects/wp-plugins/block-style-guides/contributors) fún àwọn ìkópa wọn. [Túmọ̀ “Block Style Guides” sí èdè rẹ.](https://translate.wordpress.org/projects/wp-plugins/block-style-guides) ### Ṣe o nífẹ̀ẹ́ sí ìdàgbàsókè? [Ṣàwárí koodu](https://plugins.trac.wordpress.org/browser/block-style-guides/), ṣàyẹ̀wò [ibi ìpamọ́ SVN](https://plugins.svn.wordpress.org/block-style-guides/), tàbí ṣe àgbékalẹ̀ sí [àkọsílẹ̀ ìdàgbàsókè](https://plugins.trac.wordpress.org/log/block-style-guides/) nípasẹ̀ [RSS](https://plugins.trac.wordpress.org/log/block-style-guides/?limit=100&mode=stop_on_copy&format=rss). ## Àkọsílẹ̀ àwọn àyípadà #### 1.0.0 * Initial commit #### 1.1.0 * Support for Atomic Blocks, Block Gallery, and CoBlocks. * Changed function prefix to match new plugin name. * Error reporting. * Condition to check if a class was autoloaded correctly; it it wasnÌtumọ̀ Yorùbá:’ t, load it. * Abstract constructor now always includes all lorems. * Added filters for a buncha placeholder variables. * Used those variables throughout the markup. #### 1.2.0 * Error reporting is now 927% betterer. * Form submits via AJAX, which is why the error reporting is so much betterer. * Split list of CPTÌtumọ̀ Yorùbá: ’s up into groups based on ability to use the Gutenberg editor. * “Delete all the things!” button added. (Not all the things, just all the things this plugin created, but thatÌtumọ̀ Yorùbá: ’s wordy.) #### 1.2.1 * Corrected issue where option group was not registered. #### 1.2.2 * Error messages for invalid nonces. * Cleaned up JS code. ## Àkójọpọ̀ Meta * Ẹ̀yà **1.2.2** * Ìgbàgbọ́hùn tó kẹ́yìn **ọdún 7 sẹ́yìn** * Àwọn ìgbéwọlẹ̀ tó ṣiṣẹ́ **10+** * Ẹ̀yà WordPress ** 5.0 tàbí ju bẹ́ẹ̀ lọ ** * Dánwò dé **5.1.26** * Ẹ̀yà PHP ** 5.3 tàbí ju bẹ́ẹ̀ lọ ** * Àwọn èdè * [English (US)](https://wordpress.org/plugins/block-style-guides/), [German](https://de.wordpress.org/plugins/block-style-guides/), àti [Norwegian (Bokmål)](https://nb.wordpress.org/plugins/block-style-guides/). * [Túmọ̀ sí èdè rẹ](https://translate.wordpress.org/projects/wp-plugins/block-style-guides) * Àwọn àmì * [blocks](https://yor.wordpress.org/plugins/tags/blocks/)[gutenberg](https://yor.wordpress.org/plugins/tags/gutenberg/) [gutenberg blocks](https://yor.wordpress.org/plugins/tags/gutenberg-blocks/) * [Ìwòye Tó Péye](https://yor.wordpress.org/plugins/block-style-guides/advanced/) ## Àwọn ìbò 5 lára àwọn ìràwọ̀ 5. * [ 1 5-star review ](https://wordpress.org/support/plugin/block-style-guides/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/block-style-guides/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/block-style-guides/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/block-style-guides/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/block-style-guides/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/block-style-guides/reviews/#new-post) [Wo gbogbo àwọn àgbéyẹ̀wò](https://wordpress.org/support/plugin/block-style-guides/reviews/) ## Àwọn Olùkópa * [ RobertGillmer ](https://profiles.wordpress.org/robertgillmer/) ## Ìrànlọ́wọ́ Nǹkan wà tí o fẹ́ sọ? Ṣé o nílò ìrànlọ́wọ́? [Wo àpéjọ ìrànlọ́wọ́](https://wordpress.org/support/plugin/block-style-guides/) ## Ṣe ìtọrẹ Ṣé o fẹ́ ṣe àtìlẹ́yìn fún ìlọsíwájú plugin yìí? [ Ṣe ìtọrẹ sí plugin yìí ](https://robertgillmer.com/)