Block alignments is so annoying

sage
, ,
1

I’m seriously struggling with how Gutenberg’s alignment system (full-width, wide-width, and content-width) works with custom ACF blocks when using ACF Composer in a classic theme. It feels like an absolute mess.

One major problem is that custom blocks need to be placed inside a group block because the is-layout-constrained class is missing otherwise, which makes it difficult to achieve consistent layouts. This is just one of the many issues that arise when trying to work with Gutenberg in a non-FSE theme.

The way Gutenberg handles layout and alignment feels overly rigid and poorly designed, especially when integrating custom blocks. It’s almost impossible to get it working smoothly in a classic theme without hacking around things.

At this point, I’m seriously considering disabling the entire alignment feature on all core blocks and using custom field settings for block width instead, just to avoid dealing with this broken system.

I’m wondering—has anyone else managed to figure out a reliable way to work with Gutenberg’s alignment system for custom ACF blocks in classic themes? It’s frustrating, and I’d love to hear how others are dealing with it because this implementation feels like it’s built for FSE-only workflows and not real-world custom development needs.

1 Like
2

I typically disable the wide/full alignment feature for the entire editor and manually add alignment classes in the PHP templates.

But if you want to keep using the default wide/full alignment classes I’ve had success with that as well (although I don’t use is-layout-constrained). To adding the is-layout-constrained class to an ACF block, you should be able to just add that in the root of the PHP template for the block. If you need is-layout-constrained on the parent ACF element in the editor (since ACF wraps the PHP template in a few divs in the editor), you can add it using WordPress’s blocks.getBlockDefaultClassName JavaScript hook.

Here’s a quick sample of how to do that using Bud’s editor integration - I use something like this to add my alignment classes to the root elements of ACF blocks in the editor:

export const name = 'example/add-acf-layout-class';

export const hook = `blocks.getBlockDefaultClassName`;

export const callback = (className, blockName) => {
  if (blockName === 'acf/some-block') {
    return className + ' is-layout-constrained';
  }

  return className;
};
1 Like
3

I think i’ll just disable it entirely and rely on custom fields to set this in a ACF:Composer partials in all my blocks. How did you do for disabling it? I just want to disable the generated alignment CSS and the alignment button in all block toolbar. I’m looking for the proper way.

Thanks!

4

I have figured something out that works well for me. Since i think disabling it on all blocks wasnt the best idea. I just disable the support for the align property for every ACF block and in the editor i inject this CSS so the width of ACF wrapper is not restricted at root level:

 // Dont constrain ACF blocks
.block-editor-block-list__layout.is-root-container {
    .acf-block-component {
        max-width: none !important;
    }

    .wp-block-group {

        .acf-block-component {
            margin-left: calc(var(--root-padding) * -1) !important;
            margin-right: calc(var(--root-padding) * -1) !important;
        }
    }
}

Then i rely on my ACF:partials alignment kit for every blocks that i make with ACF.

All that said, i still think the alignment feature and it CSS is a pain in the ass for all non FSE theme. We need to use core/group + core/[row|column] to make it work correctly in both: the editor and in the front-end.

5

I found the graal… The trick is to add this class to your wrapper editor content in the frontend… like content.blade.php should look something like this (and any other template content that retrieve it from the editor):

// Always add has-global-padding and is-layout-constrained to your wrapper editor content
<div class="page-content has-global-padding is-layout-constrained">
    @php(the_content())
</div>

Hope it will help some one else :slight_smile: