Using a shortcode block inside a Group block - Using alignment to make the shortcode block wider.

[paaljoachim]

Is there an existing issue for this?

• I have searched the existing issues

Have you tried deactivating all plugins except Gutenberg?

• I have tested with all plugins deactivated.

Have you tried replicating the bug using a default theme e.g. Twenty Twenty?

• I have tested with a default theme.

Description

Using this plugin: https://wordpress.org/plugins/my-calendar/ and Twenty Twenty One.
Going to the My Calendar page made by the plugin..

The default backend looks like this:

The frontend with Chrome Elements open.

The calendar shows width 100% inside the default Shortcode container a little further down and not seen in the above screenshot.

.mc-main.calendar, .mc-main table {
    width: 100% !important;
}

Adding the shortcode block into a Group.

Changing the Group block alignment to
Wide width.

Backend.

Frontend:

Changing the Group block alignment to
Full width.

Backend.

Frontend.

In theory the shortcode block should always show 100% width in the container it is in. It does not do so in this case.

Step-by-step reproduction instructions

1. Download https://wordpress.org/plugins/my-calendar/ and install and activate. A My Calendar page should be created. If not then add this code into a shortcode block. [my_calendar id="my-calendar"]
2. Test out the default width.
3. Test out adding the shortcode block into a Group block.
4. Test with Wide width and Full width alignments, and notice what happens in the backend and frontend.
5. The shortcode is not following the block widths.

I do not know if this is because of missing code in the plugin or if this is an error in Twenty Twenty One. I also tested TT1 and the results where a little different. There I was able to get a wide width showing calendar in the frontend.

Associated issue:
Adding the My Calendar shortcode to a Group block
joedolson/my-calendar#167

Expected Behavior

As the plugin has code to go 100% of the container it is in. I expected it to follow the width of the alignment in the Group block.

Current Behavior

Shortcode does not follow the alignment width of the Group block.

Screenshots or screen recording (optional)

Included above.

Code snippet (optional)

No response

WordPress Information

WordPress 5.8

Gutenberg Information

Gutenberg 11.2.0

I am also using the Theme Twenty Twenty One, and https://wordpress.org/plugins/my-calendar/

What browsers are you seeing the problem on?

Chrome

Device Information

Desktop

Operating System Information

OSX 11.5.1

[paaljoachim]

@getdave and @youknowriad

Adding a shortcode block into Twenty Twenty One and TT1 shows different alignment results when placed inside a Group block.

Gutenberg plugin 11.2.1
Chrome

Example using Twenty Twenty One theme.
Shortcode block inside a Group block. Wide width alignment.
Backend

Frontend

Example using TT1 theme.
Shortcode block inside a Group block. Wide width alignment.
Backend

Full width alignment.

Frontend
Shortcode block inside a Group block.
Wide width alignment.

Full width alignment.

I assume the difference in alignment between TT1 and Twenty Twenty One has to do with the Layout controls seen in the Side Editor.

An extra thought....
I believe that we now need to figure out a good method (I assume there is one) to have percentage/px control over the width of the wide block, so that we can define how wide Wide width should be for all blocks.

[Thelmachido]

It looks like the shortcode inside the group block becomes the same width as the one outside the group block if you make the group block full width.

Screen.Recording.2022-08-24.at.15.17.02.mov

WordPress 6.0.1

Gutenberg 13.9.0