BlockAlignmentToolbar: no ‘full’?

  • Resolved Bunker D

    (@bunkerd)


    4 years, 10 months ago

    Hi,

    I am trying to use the block alignment toolbar. Even while setting ‘wideControlsEnabled’ to ‘true’ and/or ‘controls’ to an array that includes ‘full’, the controls in the toolbar are limited to ‘left’, ‘center’ and ‘right’ (or less choices, if I use a ‘control’ attribute that excludes some of them).

    return [
    wp.element.createElement(
        wp.editor.BlockControls,
        { key: 'controls' },
        wp.element.createElement(
            wp.editor.BlockAlignmentToolbar,
            {
                value: props.attributes.position,
                onChange: onChangePosition,
                isCollapsed: false,
                wideControlsEnabled: true,
                controls: [ 'left', 'center', 'right', 'full' ],
            }
        )
    ),
    wp.element.createElement(
        wp.editor.RichText,
        {
            key: 'richtext',
            tagName: 'p',
            className: props.className + '-' + props.attributes.position,
            onChange: onChangeContent,
            value: props.attributes.content,
        }
    ),
];

    Am I missing something?

    Thank you.

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

  • Could be that the theme has to add support for full width before that choice is available.

    Thread Starter Bunker D

    (@bunkerd)

    I doubt that, considering that at this point those are just buttons that can be tied to any action. :/

    But it’s a specific component wp.editor.BlockAlignmentToolbar that even has a property of wideControlsEnabled, so at least it is optional. Maybe something is misspelled or incompatible. I know for themes, you have to support both wide and full to call the add_theme_support for it.

    Thread Starter Bunker D

    (@bunkerd)

    Well, never mind. I will create my own ToolbarGroup, or even Toolbar. Although for the latter I do not understand how to convert the JavaScript to ES5, so I guess I will transition to ESNext. (I am admittedly a bit upset that most (all?) documentation beyond tutorials is only in ESNext, while this page seems to argue in favor of ES5 for small projects.)

    I found it a pain as well to transition to modern JS development. create-guten-block really helped me a lot to create blocks with ES6 syntax. It’s a great starting point if you want to develop blocks the “right” way. I actually use this for production sites.

    There’s also a tool created by the WP dev team, but I haven’t used this for any production sites yet.
    The actual tool: https://github.com/gziolo/create-wordpress-block
    A talk by the developer on how to use it: https://wordpress.tv/2020/04/15/greg-ziolkowski-how-to-speed-up-development-with-block-scaffolding/

    Thread Starter Bunker D

    (@bunkerd)

    Thank you. I also just discovered that the ESNext+JSX needs to be compiled through other tools to be tested. The tutorials from the Block Editor Handbook do not mention anything about that (from what I have seen at least), except in the JavaScript Versions and Build Step section from which I wrongly understood that the issue exited for debug purposes but though WordPress would otherwise automatically do the required compiling.
    I found a few tutorials including this side, some mentioning the tool you mentioned (create-guten-block). I will (re)start from there.

    PS: I also discovered some of the great things ES6 (hence ESNext) brings. So at least, this justifies a bit of the hassle of transitioning to new coding practices. ^^

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘BlockAlignmentToolbar: no ‘full’?’ is closed to new replies.