2

When you set up blocks in the block editor (Gutenberg), you typically get options on how to align them (i.e. none, wide, full). Or, if your theme doesn't have them, you can use the function add_theme_support (); to include them. This is really helpful because then I can style them with CSS like something below:

.alignfull {
   width: 100vw !important;
   max-width: 100vw !important;
   position: relative;
   left: 50% !important;
   right: 50% !important;
   margin-left: -50vw !important;
   margin-right: -50vw !important;
   margin-top: 0;
   margin-bottom: 0;
}

Is there a hook I could include in my theme's functions.php to add another alignment option? A custom one I could style with my CSS?

Do I have to hook into each block to accomplish this or can it be something where if alignment is supported, the option will be included?

Ideally, I would love to have an option for my Column block to have a smaller width alignment option for content editors to choose from.

column block alignment

I found an issue raised about it from Dec 2020 with not much luck. Adding a CSS class under "Advanced" is not ideal when you are trying to keep bumpers on for the content editor.

2 Answers 2

1

I had the same issue. Actually you can use hook: blocks.registerBlockType. To extend default aligment aligment.

Example: (with lodash)

wp.hooks.addFilter( 'blocks.registerBlockType',
    'my/change_alignment', ( settings, name ) => {
    switch( name ) {
      case 'core/columns':
        return lodash.assign( {}, settings, {
          supports: lodash.assign( {}, settings.supports, {
            align: [ 'center', 'wide', 'full'] // Aligments
          } ),
        } );
    }
  
    return settings;
  });

ES6 version plus optional chaining, without lodash, and just add alignment instead of replace:

window?.wp?.hooks.addFilter(
    'blocks.registerBlockType',
    'my/change_alignment',
    (settings, name) => {
        switch (name) {
            case 'core/media-text':
                const extraAlign = ['full']; // Extra to add
                const { supports } = settings;
                const newSetting = {
                    ...settings,
                    supports: {
                        ...supports,
                        align: [...extraAlign, ...supports.align], // or enter array of which one you want instead of extending.
                    },
                };
                return newSetting;
        }

        return settings;
    },
);

Note: I tried to hook inside domReady and then use import { addFilter } from '@wordpress/hooks'; and call hook. But does not seem to work for some reason so I ended up with above code.

The source: wptips.dev

0

Today i have same task for add extra alignment but the block editor (Gutenberg) does not provide any type of functionality for extending core columns. You can set max width settings like this in the json file in your theme

"custom": {},
        "layout": {
          "contentSize": "800px",
          "wideSize": "1074px"
        }

full code is here

 {
"version": 1,
  "settings": {
    "color": {
      "custom": false,
      "customDuotone": false,
      "customGradient": false,
      "duotone": [],
      "gradients": [],
      "link": false,
      "palette": []
    },
    "custom": {},
    "layout": {
      "contentSize": "800px",
      "wideSize": "1074px"
    },
    "spacing": {
      "customMargin": false,
      "customPadding": false,
      "units": []
    },
    "typography": {
      "customFontSize": false,
      "customLineHeight": false,
      "dropCap": false,
      "fontSizes": []
    },
    "blocks": {
      "core/button": {
        "color": {
          "palette": []
        }
      }
    }
  },
  "styles": {
    "color": {},
    "elements": {
      "h1": {},
      "h2": {},
      "h3": {},
      "h4": {},
      "h5": {},
      "h6": {},
      "link": {}
    },
    "typography": {}
  }
}

and you can add core style for class add in core/columns

register_block_style(
            'core/columns',
            array(
                'name'  => 'name',
                'label' => 'label',
            )
        );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.