Using allowed_block_types_all hook for Jetpack blocks

  • Resolved Noelle Steegs

    (@noellesteegs)


    1 month, 3 weeks ago

    Hi there,

    For my use case I am limiting the available blocks in the editor, and for this I am using the allowed_block_types_all hook. What I am not certain of, is whether this can also be used for Jetpack blocks. If so, how do I target the YouTube and Instagram blocks? And if not, what ways does Jetpack have of limiting the available blocks with code?

     function qx_limit_block_types($allowed_block_types, $block_editor_context) {  $allowed_block_types = array(      'core/heading',     // Heading block      'core/image',       // Image block      'core/list',        // List block      'core/paragraph',   // Paragraph block     'core/pullquote',   // Quote block      'core/button',   // Button block      'core/buttons',   // Buttons block );  return $allowed_block_types;  }  add_filter('allowed_block_types_all', 'qx_limit_block_types', 10, 2);
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    1 month, 2 weeks ago

    You can indeed use that filter to limit what blocks are available on your site, regardless of the plugin used to register the block.

    The YouTube block is not provided by Jetpack. It’s a variation of the “embed” block provided by WordPress itself. If you allow core/embed , you’ll get access to all embed variations provided by WordPress.

    Jetpack brings in 2 blocks that may interest you:

    • The jetpack/instagram-gallery block allows you to display the latest posts from your Instagram account. The block is named “Latest Instagram Posts” in the block editor.
    • Jetpack also adds an additional “Instagram” variation to the Embed block from WordPress. So if you allow core/embed , you will also gain access to the Instragram embed block provided by Jetpack.

    I hope this helps.

    Thread Starter Noelle Steegs

    (@noellesteegs)

    1 month, 2 weeks ago

    Hey Jeremy,

    Thanks so much for the clarity.

    Yes, core/embed now allows the Insta block on the site. But it also allows all other embeds. That looks a bit strange to a client, I think, a short list with images, lists, paragraphs headings and dozens of embeds. 🙂 Do you know whether there’s a way that I can give access to specific embed type blocks, and not the rest? E.g. if I just want to allow for the Insta block, how would I do that?

    Also is there a place where I can see a list of all the blocks Jetpack includes along with their references (like jetpack/instagram-gallery)?

    Have a stunning day!

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    1 month, 2 weeks ago

    Do you know whether there’s a way that I can give access to specific embed type blocks, and not the rest? E.g. if I just want to allow for the Insta block, how would I do that?

    Yes, that can be done. You could do something like this to only allow YouTube and Instagram for example:

     /** * Only allow specific embed variations. */ function jeherve_filter_enabled_embed_variations() { $filter_embeds = <<<JS wp.domReady( function () { const allowedEmbedBlocks = [ 'instagram', 'youtube' ]; // Only keep what's on our whitelist. wp.blocks.getBlockType( 'core/embed' ).variations.forEach( function ( variation ) { if ( allowedEmbedBlocks.indexOf( variation.name ) === -1 ) { wp.blocks.unregisterBlockVariation( 'core/embed',  variation.name ); } } ); // Disable a few more specific variations added by the Jetpack plugin. const jetpackEmbedVariations = [ 'facebook', 'loom', 'smartframe', 'descript' ]; jetpackEmbedVariations.forEach( function ( variation ) { wp.blocks.unregisterBlockVariation( 'core/embed',  variation ); } ); } ); JS; wp_add_inline_script( 'jetpack-blocks-editor', $filter_embeds ); } add_action( 'enqueue_block_assets', 'jeherve_filter_enabled_embed_variations' );

    Also is there a place where I can see a list of all the blocks Jetpack includes along with their references (like jetpack/instagram-gallery)?

    In your block editor, you can look at Jetpack_Editor_Initial_State.available_blocks in your browser console to see a list of all the blocks defined by Jetpack.

    You can also look at the list of blocks that ships with the plugin. It is available here:

    https://github.com/Automattic/jetpack/blob/d06f2566033c10177da52d468d3f7376e1546373/projects/plugins/jetpack/extensions/index.json

    Finally, you can look at the list displayed here:

    https://wordpress.org/plugins/jetpack/#blocks

    Thread Starter Noelle Steegs

    (@noellesteegs)

    1 month, 1 week ago

    Thanks a bunch, Jeremy. That worked like a charm and I feel empowered having the lists for future reference. Awesome support. 💪

Viewing 4 replies - 1 through 4 (of 4 total)

Tags