css – Add Custom Alignment Option to WordPress Blocks/Gutenberg

Question

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.

0
RCNeil 4 months 2022-08-02T15:23:58-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse