Extend columns block

  • Resolved JohnDBB

    (@johndbb)


    4 years, 8 months ago

    Hello

    I would like to add some additional custom layouts to the columns block as well as adding a class to each column with its final width, so I can change styles inside the column based on its size.

    But I cannot find how to do it

    Any ideas would be appreciated!

    Thank you in advance

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Paal Joachim Romdahl

    (@paaljoachim)

    Hey John

    Let’s see if I got this right.
    In Gutenberg version 7.7.1.

    I added 3 columns.
    Btw notice on the bottom the breadcrumbs bar that looks like this:
    Document -> Columns -> Column (based on what is selected)
    I added a paragraph block into the first column.
    Clicked the bottom breadcrumbs so that I selected the first column.
    Then went to the sidebar. Clicked Advanced. Added a CSS class name.
    Added class names to the other columns where I needed to do so.
    Then I went to the Appearance -> Theme Editor.
    Stylesheet style.css. Added the needed CSS.

    Hopefully that helps. As a month as passed by you have likely found out how to do this already.

    Thread Starter JohnDBB

    (@johndbb)

    Thank you Paal!

    I needed it programatically. Yes, I got it doing something like this:

        wp.blocks.registerBlockVariation(
        'core/columns',
        {
            name: '70-30',
            title: 'Dos columnas 70-30',
            isDefault: false,
            attributes: {
                className: 'columnas-70-30'
            },
            innerBlocks: [
                [ 'core/column', { width: 70, className: 'ancho-70' }, [ [ 'acf/noticia-portada', { className: 'is-style-cover-white' } ], [ 'acf/noticia-portada' ] ] ],
                [ 'core/column', { width: 30, className: 'ancho-30' }, [ [ 'acf/noticia-portada' ], [ 'acf/noticia-portada' ] ] ]
            ],
            icon: icon7030,
            scope: [ 'block' ]
        }
    );
    Thread Starter JohnDBB

    (@johndbb)

    By the way, t only works with wordpress 5.4

    Plugin Support Paal Joachim Romdahl

    (@paaljoachim)

    Hey John

    That sure makes it helpful that 5.4 will be released at the end of March…:)

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Extend columns block’ is closed to new replies.