Options of Align Wide and Align Full disappear from Group and Cover blocks #48074
Comments
|
I can't reproduce this issue with WordPress 6.1.1 and the Gutenberg plugin enabled, version 15.1.0. Using the T23 theme. Everything is working fine on my end. |
|
Maybe is something on my theme.json. It follows. {
"version": 2,
"settings": {
"appearanceTools": true,
"useRootPaddingAwareAlignments": true,
"layout": {
"contentSize": "930px",
"wideSize": "1200px"
},
"spacing": {
"margin": true,
"padding": true,
"blockGap": true,
"units": [ "rem", "px", "%" ],
"spacingSizes": [
{
"name": "10",
"slug": "10",
"size": "1.0rem"
},
{
"name": "20",
"slug": "20",
"size": "2.0rem"
},
{
"name": "30",
"slug": "30",
"size": "3.0rem"
},
{
"name": "40",
"slug": "40",
"size": "4.0rem"
},
{
"name": "50",
"slug": "50",
"size": "5.0rem"
},
{
"name": "60",
"slug": "60",
"size": "6.0rem"
},
{
"name": "100",
"slug": "100",
"size": "10.0rem"
}
]
},
"typography": {
"customFontSize": true,
"lineHeight": true,
"dropCap": true,
"fontStyle": true,
"fontWeight": true,
"letterSpacing": true,
"textDecoration": true,
"textTransform": true,
"fontSizes": [
{
"name": "Micro",
"slug": "xxs",
"size": "1.0rem"
},
{
"name": "Smaller",
"slug": "xs",
"size": "1.2rem"
},
{
"name": "Small",
"slug": "small",
"size": "1.4rem"
},
{
"name": "Normal",
"slug": "medium",
"size": "1.6rem"
},
{
"name": "Large",
"slug": "large",
"size": "1.8rem"
},
{
"name": "Big",
"slug": "xl",
"size": "2rem"
},
{
"name": "X Bigger",
"slug": "xxl",
"size": "2.4rem"
},
{
"name": "Huge",
"slug": "xxxl",
"size": "5rem"
},
{
"name": "Header 6",
"slug": "h6",
"size": "2rem"
},
{
"name": "Header 5",
"slug": "h5",
"size": "2.2rem"
},
{
"name": "Header 4",
"slug": "h4",
"size": "2.4rem"
},
{
"name": "Header 3",
"slug": "h3",
"size": "2.6rem"
},
{
"name": "Header 2",
"slug": "h2",
"size": "3.6rem"
},
{
"name": "Header 1",
"slug": "h1",
"size": "5rem"
}
],
"fontFamilies": [
{
"fontFamily": "\"korolev\", sans-serif",
"name": "korolev",
"slug": "primary",
"fontFace":[
{
"fontFamily": "korolev",
"fontWeight": "500 700",
"fontStyle": "normal",
"fontStretch": "normal",
"fontDisplay": "swap"
}
]
},
{
"fontFamily": "\"Courier New\", monospace",
"name": "Courier New",
"slug": "monospace"
}
]
},
"color":{
"custom": true,
"customDuotone": true,
"customGradient": true,
"link": true,
"text": true,
"background": true,
"defaultGradients": true,
"defaultPalette": true,
"palette":[
{
"name": "Dark Blue (primary)",
"slug": "primary",
"color": "#2C296E"
},
{
"name": "Pink (secondary)",
"slug": "secondary",
"color": "#DF0F83"
},
{
"name": "Orange",
"slug": "orange",
"color": "#F16521"
},
{
"name": "Yellow",
"slug": "yellow",
"color": "#FF9B19"
},
{
"name": "Blue 2",
"slug": "blue2",
"color": "#49479D"
},
{
"name": "Blue 3",
"slug": "blue3",
"color": "#6D7DBD"
},
{
"name": "Blue Light",
"slug": "bluelight",
"color": "#299AD2"
},
{
"name": "Blue Light 2",
"slug": "bluelight2",
"color": "#5EC3D4"
},
{
"name": "Blue Light 3",
"slug": "bluelight3",
"color": "#B1DED3"
},
{
"name": "Black",
"slug": "black",
"color": "#000000"
},
{
"name": "White",
"slug": "white",
"color": "#FFFFFF"
}
]
}
},
"styles": {
"spacing": {
"blockGap": "35px",
"margin": {
"top": "0",
"right": "0",
"bottom": "0",
"left": "0"
},
"padding": {
"top": "0",
"right": "0",
"bottom": "0",
"left": "0"
}
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--primary)",
"lineHeight": "1.5",
"fontSize": "var(--wp--preset--font-size--medium)",
"fontWeight": "500"
},
"elements": {
"h1": {
"typography": {
"fontWeight": "700",
"fontSize": "var(--wp--preset--font-size--h-1)"
}
},
"h2": {
"typography": {
"fontWeight": "700",
"fontSize": "var(--wp--preset--font-size--h-2)"
}
},
"h3": {
"typography": {
"fontWeight": "700",
"fontSize": "var(--wp--preset--font-size--h-3)"
}
},
"h4": {
"typography": {
"fontWeight": "700",
"fontSize": "var(--wp--preset--font-size--h-4)"
}
},
"h5": {
"typography": {
"fontWeight": "700",
"fontSize": "var(--wp--preset--font-size--h-5)"
}
},
"h6": {
"typography": {
"fontWeight": "700",
"fontSize": "var(--wp--preset--font-size--h-6)"
}
},
"link": {
"color": {
"text": "var(--wp--preset--color--primary)"
}
}
}
}
}And the add_theme_support: add_theme_support('editor-styles');
add_theme_support('automatic-feed-links');
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
add_theme_support('html5', ['comment-list', 'comment-form', 'search-form', 'gallery', 'caption']);
add_theme_support('wp-block-styles');
add_theme_support('custom-spacing');
add_theme_support('responsive-embeds' );
add_theme_support('custom-units', 'rem', '%');
add_theme_support('align-wide'); |
|
Looks good, although I don't think you need to add those add_theme_support calls manually. They're not in the T23 theme. Please, try activating one of the standard themes and see if it works for you, cause in that case this issue can be closed (as then it wouldn't be a bug). 🙂 |
|
Hi @rvenancior, If the theme you are testing is a hybrid theme, then it would be the same issue as #47857 This issue has been fixed in #47961. |
t-hamano
added
[Package] Block editor
|
@rvenancior, please check this comment. |
|
Thank you everyone for the comments. @gyurmey2 got it. My theme expect that, if is not set an alignment it set the block width according to the screen size. I got the code below from the twentytwentyone theme. @media (min-width: 1200px) {
.post-thumbnail,
.entry-content .wp-audio-shortcode,
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
.wp-block-group > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
.default-max-width {
max-width: var(--wp--style--global--wide-size);
}
} |
|
Glad it's solved @rvenancior, can you close the issue? 😄 |
|
Looks like it's fixed for the 6.2 Beta 2 @rvenancior, so it will be fixed once you update to 6.2 when it's released #47857 (comment) |
|
Right, on WordPress 6.2, but what about on Guttenberg plugin? Because right now on WordPress 6.1.1 it is working good. |
|
Understanding this issue can be a bit complicated. This problem can be reproduced with WordPress 6.2 Beta1. And the issue was resolved in #47961 and backported to WordPress 6.2 Beta2. Therefore, WordPress 6.2 Beta2 without the Gutenberg plugin enabled will not have the problem. However, for the Gutenberg project, this fix will be included in the unreleased version 15.2. The latest version of the gutenberg plugin is 15.1, which does not include this fix. Therefore, even with WordPress 6.2 Beta2, if the Gutenberg plugin is enabled, this problem will occur again because the block editor will be replaced by code that does not contain the fixes. |
|
I upgraded to 15.2 and the issue persists, as OP first identified. Running latest WP with custom non-hybrid theme. Only Gutenberg is activated. |
|
I tested all the cases again. The empty theme (hybrid theme) used in the test was the following three files:
/*
Theme Name: Empty Theme
*/
<?php
// Silence is golden.
{
"version": 2,
"settings": {
"layout": {
"contentSize": "650px",
"wideSize": "1200px"
}
}
}The test results are as follows:
Which of the above applies to the environment you tested? |
@spacedragn do you mean it's a custom block theme? If so, I have a suspicion about what the cause might be. Could you check if in the post editor sidebar, in the Post tab, the template is editable? You should be able to click on the template name to open a popover that shows an "edit template" button, like so:
|
|
@tellthemachines Yes, it’s a custom block theme with HTML-based FSE Templates and Parts. Here’s what I’m seeing on Pages, for example. I also checked the Site Editor, and the alignment settings are missing there, as well. Further context: this is now a custom Block theme that was formerly a custom Classic theme, built from scratch. |
|
Hmmm, then it's not what I'm thinking. @spacedragn have you checked if the Post Content block from that template has "Inner blocks use content width" enabled? |
|
@tellthemachines “Inner blocks use content width” is disabled on Post Content and any parent Groups, if there are any. When I disable Gutenberg 15.2 or revert to 15.1, the alignment features are back and the layouts behave as expected. |
|
Ah, then that's the problem. As per this comment linked above, if “Inner blocks use content width” is disabled on Post Content then root blocks in the post editor won't have wide/full alignment controls. That's expected because if there is no content width, those controls won't do anything. |
|
@tellthemachines Wow, that completely broke my brain here.
Thanks for troubleshooting this. I hope the thread helps others piece it together. |
|
@tellthemachines It is worth mentioning that this problem occurs in the official Gutemberg installation. |
Yeah, it would be good to explore ways of making this more obvious as it's a common pain point.
This is another issue which hopefully will be fixed in #45299! |
|
I'm going to go ahead and close this one as the issue has since been fixed and 6.2 is already released. Please feel free to reopen if it reoccurs! |
|
I am experiencing this issue in WP 6.3.2 in the full site editor area. If you add a group block to a normal page, you have the align options on the block. If you add a group block to the full site editor area, you do not have the alignment options. The only way to have a group block which is set to alignwide is to create a group block, with Inner blocks use content width toggled on, then have a second group block with the alignment options enabled. Is this a bug or expected behaviour? If it's a bug I'll open a new issue. I tested this in my own hybrid theme and also in WP's twenty twenty three theme. |
My understanding is that these are all intended behaviors. At the root level of the Site Editor, blocks always fill the editor canvas and cannot be set to wide or full width. |
Description
Feature:
The align options were working good until the last update of Gutenberg 15.1.0.
If I deactivate the Gutenberg plugin, the align appears, and works good.
Important: The frontend is not broken, all the blocks that were set as alignfull still works, but on the backend I cannot set alignfull for new pages or blocks.
Step-by-step reproduction instructions
1 - Add a block of Cover or Group
2 - Try to set the alignment full or wide.
Screenshots, screen recording, code snippet
Gutenberg disabled
Gutenberg Enabled
Environment info
WordPress: 6.1.1
Gutenberg: 15.1.0
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes
The text was updated successfully, but these errors were encountered: