Gutenberg: Shortcode block: Allow wide/full alignment and additional CSS class

[webmandesign]

Is your feature request related to a problem? Please describe.
I'm trying to display a Jetpack portfolio using a shortcode. The content area (blocks) in my theme are narrow, so, when the shortcode is rendered on front-end, the displayed portfolio posts (in 3 columns) are very narrow. I'd like to use wide alignment to display the Jetpack portfolio shortcode.

Describe the solution you'd like
Would be great if we could set the wide/full alignment for the Shortcode block. The block could generate a wrapper div.alignwide or div.alignfull respectively around the shortcode output on front-end.

The same would be beneficial if the Shortcode block could allow setting up an additional CSS class, just like other blocks allow this (such as Paragraph block). In this case, again, the class would be applied on wrapper div around the shortcode output on front-end.

Describe alternatives you've considered
For now I do the whole wrapper div with alignment class and shortcode using HTML block, which is not really desirable.

Thank you for consideration!

[jorgefilipecosta]

Hi @webmandesign, the group block now supports wide alignments. What if the alignment is applied to the group and then the shortcode block is nested inside? Would that fit your use-case?

[jorgefilipecosta]

I'm closing the issue for now, if the suggestion does not fit your needs feel free to comment on the issue and we will look further into it.

[webmandesign]

Hi @jorgefilipecosta,

Sure, that's actually perfect! I'm sorry for not checking with actual Gutenberg plugin, but rather with WP5.2.2. My mistake!

Thanks and regards,

Oliver

[brianrc]

Unfortunately, simply putting it inside a group block does not work for themes like the default Twenty Twenty theme which uses CSS selectors like this to calculate element width:

`.entry-content

*:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
max-width: 58rem;
width: calc(100% - 4rem);
}`

Everything without an alignment, including all shortcodes, are restricted to the minimum width whether they are in group block or not.

Please reopen this issue and allow wide/full alignment and additional CSS class so we can target shortcodes properly.