How to support column order settings in block editor? (Solved)

[intriguebill]

I can't seem to get 'column order' changes to display in the block editor using classes such as 'order-first', 'order-last'.

I've added these to custom-editor-styles.scss:

// Add utilities and helpers
@import "assets/bootstrap5/helpers";
@import "assets/bootstrap5/utilities";

// Add additional features
@import "assets/bootstrap5/buttons";
@import "assets/bootstrap5/containers";
@import "assets/bootstrap5/forms";
@import "assets/bootstrap5/grid";
@import "assets/bootstrap5/images";
@import "assets/bootstrap5/tables";
@import "assets/bootstrap5/card";
@import "assets/bootstrap5/accordion";

I'm running npm run watch, I see the files being updated when changes are made.

In the block editor, I'm using an ACF field to change classes of two columns, switching between order-md-0 and order-md-1, so the image column will be displayed either on the right or the left.

<div>
    <div class="container">
        <div class="row">
            <div class="col-md-6 order-md-1">
                 ... image content ...
            </div>
            <div class="col-md-6 order-md-0">
                ... text content ...
            </div>
        </div>
    </div>
</div>

Everything BUT column order appears to display as expected in the block editor -- grid, columns, rows, buttons, etc.

I've tried using order-0 / order-1, order-first / order-last, order-md-0 / order-md-1.

• I see the classes change in the block editor as I toggle between 'left' and 'right' settings for the field.
• When I preview or save and view on the frontend, the column order displays as expected (image switching from left to right or vice versa).
• BUT I'm not seeing the column order change in the block editor when the field is toggled between left and right.

So, it appears the css to support the column order change is missing from the editor, even though I'm including the files that should support this ... ?

Is there an scss file other than those noted above that I should be including in custom-editor-styles.scss to enable column order changes to display as expected in the block editor?

Maybe I'm missing something obvious ... ? :)

Thanks for your help!

[intriguebill]

I think I may have found the missing piece -- added:

// Set up bootstrap utilities
@import "assets/bootstrap5/bootstrap-utilities";

And removed the earlier references that didn't seem to work. So now, the whole custom-editor-styles.scss looks like this:

//Add your own editor styles here or import additional files

// Grab our child theme variables
@import "theme/child_theme_variables";

// Grab a few bootstrap assets so we can use mixins, variables, etc
@import "assets/bootstrap5/functions";
@import "assets/bootstrap5/variables";
@import "assets/bootstrap5/mixins";
@import "assets/bootstrap5/reboot";
@import "assets/bootstrap5/root";

// Add additional features
@import "assets/bootstrap5/buttons";
@import "assets/bootstrap5/containers";
@import "assets/bootstrap5/forms";
@import "assets/bootstrap5/grid";
@import "assets/bootstrap5/images";
@import "assets/bootstrap5/tables";
@import "assets/bootstrap5/card";
@import "assets/bootstrap5/accordion";

// Set up basic typography
@import "assets/bootstrap5/type";

// Set up bootstrap utilities
@import "assets/bootstrap5/bootstrap-utilities";

// Start bringing in colors and styles. 
@import "assets/understrap/theme/colors";
@import "assets/understrap/theme/blocks";

// Fixes Gutenberg's cover block color picker.
.components-circular-option-picker__option {
	border-radius: 50%;
}

// Matches the page title font weight.
.editor-post-title .editor-post-title__input{
	font-size: $h1-font-size;
	font-weight: $headings-font-weight;
}

This appears to have fixed the issue ... the missing styles are now included. Toggling the field changes the display order of the columns in the block editor.

[bacoords]

Thank you for including your fix here for others to see!