block editor - How to use __experimentalCaptureChildToolbar

admin管理员组

文章数量:1324979

currently i am developing a block and i am trying to use an experimental API __experimentalCaptureChildToolbar (see ). This should be included in 7.2.0 of Gutenberg. It seems however unable to really tell which version is included in Wordpress (What version of Gutenberg is included with WordPress?) but i am using Wordpress 5.5.1 so it should be fine.

I was trying to simply use it like done one the navigation block, .2/packages/block-library/src/navigation/edit.js. However it did not change anything.

I am not sure how the navigation block works (and if) as it is also experimental, from what i can see. I could not get any documentation or information via Google on how to turn on those experimental blocks. Can anybody help?

From what the documentation and all the sparse info i could find on the web on __experimentalCaptureChildToolbar is it should be easy to just use it. Anybody has any guidance on how to use or has implemented it him-/herself?

Thank you.

P.S: There's not much to the code than adding the attribute

edit: function( props) {
    ...
    return (  
        <>
        <Toolbar>...</Toolbar> 
        <InnerBlocks
            template={ slidesTemplate }
            templateLock="all"
            allowedBlocks={ allowedBlocks }
            __experimentalCaptureToolbars={ true }
        />
        </>
    );
}

currently i am developing a block and i am trying to use an experimental API __experimentalCaptureChildToolbar (see https://github/WordPress/gutenberg/pull/18440). This should be included in 7.2.0 of Gutenberg. It seems however unable to really tell which version is included in Wordpress (What version of Gutenberg is included with WordPress?) but i am using Wordpress 5.5.1 so it should be fine.

I was trying to simply use it like done one the navigation block, https://github/WordPress/gutenberg/blob/7.2/packages/block-library/src/navigation/edit.js. However it did not change anything.

I am not sure how the navigation block works (and if) as it is also experimental, from what i can see. I could not get any documentation or information via Google on how to turn on those experimental blocks. Can anybody help?

From what the documentation and all the sparse info i could find on the web on __experimentalCaptureChildToolbar is it should be easy to just use it. Anybody has any guidance on how to use or has implemented it him-/herself?

Thank you.

P.S: There's not much to the code than adding the attribute

edit: function( props) {
    ...
    return (  
        <>
        <Toolbar>...</Toolbar> 
        <InnerBlocks
            template={ slidesTemplate }
            templateLock="all"
            allowedBlocks={ allowedBlocks }
            __experimentalCaptureToolbars={ true }
        />
        </>
    );
}

• block-editor

Share Improve this question asked Sep 3, 2020 at 8:46 patmanpatman 11111 bronze badge 2

• 1 What are you expecting it to do, and what happens instead? Keep in mind as this is experimental, it will go away in the future – Tom J Nowell ♦ Commented Sep 3, 2020 at 10:12
• Sure i know that, thank you. Well i expect the parent toolbar to be displayed while the children are active (as the name and doc implies) but at least some visual change. It does not. From what i have seen it should at least use a class has-toolbar-captured which from what i can see is not used while the toolbars are active. – patman Commented Sep 4, 2020 at 15:19

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

https://github/WordPress/gutenberg/blob/2d7e6904cee90a92bf1fc60467d1c6bb03654656/packages/block-editor/src/components/inner-blocks/README.md#__experimentalcapturetoolbars

Determines whether the toolbars of all child Blocks (applied deeply, recursive) should have their toolbars "captured" and shown on the Block which is consuming InnerBlocks.

For example, a button block, deeply nested in several levels of block X that utilises this property will see the button block's toolbar displayed on block X's toolbar area.

That seems to be it, a true or false value, there are no other ways to use it.

Note, that as an experimental API, this prop will not be available in the future, either because it was removed, or because it's no longer experimental and is renamed. I strongly advise against using it in production code for that reason.

Additionally, because it is experimental, that is not a guarantee that it will work, afterall, it's experimental code.

本文标签： block editorHow to use experimentalCaptureChildToolbar