blog-limiting-blocks

Limiting Available Blocks Within Gutenberg

Published: 26th November 2018

Gutenberg is here and it's causing a stir within the Wordpress community. Ensure the new editor walks before it runs by limiting the default blocks and ensuring a smoother stress free transition.

We’re not against change, but after looking at the new editor we were concerned at just how much it allows site admins to do. With so many blocks to choose from and in a limitless combination clients could easily become confused when editing their content… worst still, they could get carried away! Adding too much content and breaking the bespoke design! Now you’ve got your design and marketing departments shouting at you; that well thought out design is now broken and those calculated CTAs have been pushed below the page fold by 12 YouTube Videos, 4 headings (all H1s!) and 6 galleries.

OK, the above might be a slight exaggeration, but we’ve been in this game a long time and have seen this sort of thing happen! One solution is to limit the blocks available to your clients, this will allow you to roll Gutenberg out smoothly, training clients on the simpler easier to use blocks before giving them free reign on the whole lot. Let’s take a look at how to disable blocks with the simple code snippet below:

 

add_filter( 'allowed_block_types', 'theme_allowed_block_types' );

function theme_allowed_block_types($allowed_blocks, $post) {

$blocks = array(
'core/image',
'core/paragraph',
'core/heading'

);

return $blocks;

}

 

Placing this code within your functions.php file will restrict the blocks available to those set within the array. You can see we’ve been very restrictive, only allowing 4 blocks. Currently the full list of default blocks is:

core/button
core/pullquote
core/table
core/preformatted
core/code
core/html
core/freeform
core/latest-posts
core/categories
core/cover-image
core/text-columns
core/verse
core/video
core/audio
core/block
core/paragraph

core-embed/twitter
core-embed/youtube
core-embed/facebook
core-embed/instagram
core-embed/wordpress
core-embed/soundcloud
core-embed/spotify
core-embed/flickr
core-embed/vimeo
core-embed/animoto
core-embed/cloudup
core-embed/collegehumor
core-embed/dailymotion
core-embed/funnyordie
core-embed/hulu
core-embed/imgur
core-embed/issuu
core-embed/kickstarter
core-embed/meetup-com
core-embed/mixcloud
core-embed/photobucket
core-embed/polldaddy
core-embed/reddit
core-embed/reverbnation
core-embed/screencast
core-embed/scribd
core-embed/slideshare
core-embed/smugmug
core-embed/speaker
core-embed/ted
core-embed/tumblr
core-embed/videopress
core-embed/wordpress-tv

As you can see there are fair few blocks available and if you’re developing bespoke themes having all of these available to a client could certainly cause issues, especially on larger enterprise projects where every detail is carefully considered by design and marketing departments. On such sites it might be that you limit blocks on pages, ensuring changes are subtle but within the news section you enable additional blocks, allowing for more creativity. This would require a simple adjustment to the above code:

 

add_filter( 'allowed_block_types', 'theme_allowed_block_types' );

function theme_allowed_block_types($allowed_blocks, $post) {

$blocks = array(
'core/image',
'core/paragraph',
'core/heading'

);

//If the post type is equal to post add more blocks to the array
if( get_post_type() == 'post' ) {
$blocks[] = 'core/shortcode';
$blocks[] = 'core/list';
}

return $blocks;

}

 

There are some really interesting blocks available with plenty more still to come. We’re looking forward to incorporating these into our future projects and with a limited approach and client training we’re optimistic they will bring value over the old editor.


Previous Page

More blog entries

Add a Custom Colour Pallet to Gutenberg

Published: 28th November 2018

We've already discussed how the new editor comes with blocks and how to limit these in our article Limiting Blocks Within Gutenberg. In this article we want to look at controlling which, if any,...

Read the full article

Are You Gettin’ Ready For Gutenberg?

Published: 20th November 2018

Wordpress has had the same editor for as long as we can remember, it's had a few features added or removed over the years but otherwise it's always worked and looked the same. This has made it very...

Read the full article

In Browser Push Notifications – Are you missing out?

Published: 5th November 2018

You’re probably familiar with push notifications on your phone, they pop up to let you know when some activity has occurred within one of your apps or web services. It might be a Facebook post, or...

Read the full article

Get in touch today, let's talk about your next project

Follow us on Twitter

RT @sewatch: There are more than 200 ranking signals used by Google. Here are 14 of the most important ones for 2019. https://t.co/wwisbHD

3 days ago

User Friendly Media
@UFMediaUK

@learnwithmattc We've been running some tests recently and noticed that Gravity Forms breaks the new editor, might be worth checking out? :)

16 days ago

User Friendly Media
@UFMediaUK

Inventory and assessment - what to do with your older blog posts. Thanks @Moz https://t.co/Kl3oTfEE94

17 days ago

User Friendly Media
@UFMediaUK

RT @Designmodo: 10 Websites with Data Visualization Driving User Experience - https://t.co/4Rz2CLwWYG A new showcase on Designmodo. #exa

17 days ago

User Friendly Media
@UFMediaUK

Joomla Development Drupal Development Wordpress Development Shopify Setup and Customisation Laravel Development Boot Strap Framework development Google Street View Integration Cloud Flare Content Distribution