A way to show variation picker after block was placed?

[QuietNoise]

More specificaly is there a way to show a variation picker for core/columns after they've been propagated with inner blocks?
I.e. to change layout from 33 / 66 to 66 / 33?

[skorasaurus]

It doesn't appear to be possible to use a back button with the variation picker; according to #31593 (the columns block uses the same code to display the variation picker)

[QuietNoise]

Thanks for quick reply. Rather than back button I was thinking about changing column layout long after undo capabiliuty is gone or not feasible anymore due to many changes to post that happened after column was placed.

There was talk about Variation Transforms API on few thread here, where one could transform from one block variation to another. For example core Categories / Tags blocks use this API and these let you transform from side bar back and forth between their available variations.

I wonder if the same was implemented for core columns and how I can possibly enable this feature for this block?

[realthemes]

@QuietNoise , block variation picker will appear when you remove inner blocks, and before you do this, you can use transform variations (create transform variation for every column variant) to switch between layouts, this is how it was in my Section With Sidebar Block

[QuietNoise]

Thanks. I'm looking for a more usable solution without the need to remove content that's inside. More in line with tranforming one variation of the columns layout say 50 / 50 to another i.e. 60 / 40. Since this is just a class change and variation transforms are a thing I would assume core Columns are a perfect fit for such feature to be easily enabled. I just can't find any doc how to do it.

This was discussed in few places in this repository i.e. here: #25231 (comment)

[t-hamano]

Can't change the width of individual columns after selecting a variation? Do you mean that you need a UI that can change this width all at once according to predefined variations?

[QuietNoise]

You can change width no problem. But it's not a feasible solution for columns that are responsive in any away and on top of everything it would require content admin to know and remember all column ratios related to their site's design. Not to mention you have to select each column and enter widths manually.
It might be good for generic content themes without strict upfront design but it's actually so bad that on every project I work on I have this feature perpanently disabled.

So, ultimately I'm looking for a way to quickly revert columns to any of the available variations from toolbar or side bar for example like demonstrated here: #25231 (comment)

[realthemes]

QuietNoise, On the Block Editor Handbook, there is an article called 'Variations.' I think it's what you are looking for.

[realthemes]

Not sure if you can apply this to the core/columns block, but you can create your custom block using the variations technique. Google 'WordPress Block Variations' for documentation and articles. Additionally, there are ready-made plugins like Bootstrap Columns for Gutenberg that may already have this feature.

[t-hamano]

Technically it's possible, but you'll need to be familiar with React and the Gutenberg API. Below is an example of one approach.

• Use the editor.BlockEdit hook to intervene in the rendering of the columns block's Edit component
• Use the InspectorControls component to render your own components in the block sidebar
• Get all variations of a column block using getBlockVariations selector
• Render the obtained variations using ToggleGroupControl, SelectControl components, etc.
• Use setAttrbiutes to apply variation values to blocks when variations are changed in a custom rendered variation control

The biggest challenge is that the current column block state does not necessarily match any variation. For example, you need to consider the behavior when the 33/66 variation is selected even though there are 3 columns.

[QuietNoise]

Thanks @t-hamano,
It's pretty much how I solved it in the first place. I show different controls when there are 2 columns and different controls when there are 3.
I just have a strong feeling I'm reinventing a wheel for something that intuitively should be part of a core feature. Seeing all those discussions here from back in 2020 about columns needing transformations and / or variation switcher in the first place made me wonder if I'm missing some dark corner of documentation which shows how to enable this for columns with simple switch in theme.json or something.

[t-hamano]

Just like the Group block, if you filter the variations of the Columns block and add transform to the scope property, you will be able to display the variation picker in the block sidebar. However, I don't think this simple approach can be used in cases such as the Columns block where the variation and the actual block state do not match.

[QuietNoise]

OMG. That't exactly it! Just tested it.

It will not change content or settings of the inner blocks and as such, it will not work for column layouts where layout is determined by the column widths directly. Neither will work switching between column layouts that have different column counts.

However, when the layout is determined by the class applied to the columns block itself and the admin just needs to switch from say two column 50 / 50 to two columns 40 / 60 it works exactly how I expect it work.
For most projects I work on, the theme must adhere strictly to orignal design and admins are prevented from doing anything that's not determined by it (i.e. they are limited to 2 columns only or so).

For anyone who might have similar issue, the bottom line is to ensure the scope has a 'transform' enabled whether you register variation of the block or filter settings of an existing one. For columns block specifically ensure the layout is determined by the class rather than by anything applied to children columns.

Example when registering variation:

wp.blocks.registerBlockVariation(
    'core/columns',
    {
      name: 'columns-60-40',
      title: '60 / 40',
      description: 'Two columns 60 / 40',
      attributes: {
        className: 'columns-60-40'
      },
      innerBlocks: [
        [ 'core/column' ],
        [ 'core/column' ],
      ],
      icon: SixtyForty(), 
      scope: [ 'block', 'transform' ],
    }
  );

The important parts are scope -> 'transform' and attributes -> className. Then in your css add styles for .columns-60-40

Simple example if you are filtering settings for core variations (say, for columns):

wp.hooks.addFilter(
  'blocks.registerBlockType',
  'core/columns',
  (settings, name) => {
    if (name === 'core/columns') {
      settings.variations.forEach( (variation) => {

        // add 'transform' to variation's scope
        variation.scope = [ 'block', 'transform' ]; 

        switch (variation.name) {

          case 'two-columns-two-thirds-one-third':
            // ensure that variation has a className attribute that you can target with CSS
            variation.attributes = {
              className: ['columns-66-33']
            }

            // ensure that variation's inner columns don't have widths set
            variation.innerBlocks = [
              [ 'core/column' ],
              [ 'core/column' ],
            ];
            break;
            
            // etc... for other variations
        }
      });

    }
    return settings;
  }
);