CUNY Academic Commons

Hi Ray, thanks for your help and apologies for forgetting I asked this exact question previously. I will search past redmine tickets in the future before posting!

That said, this fix works well but the alignment is off when using the shortcode block instead of the embed block. The shortcode block is justified left and the content needs to be centered in the page.

See here: https://greatsaltcove.commons.gc.cuny.edu/story-map-test/what-cheer-what-cove/

I tried adding shortcode align="center" and html <center>[shortcode]</center> and neither worked.

I also tried three column, adding the short code in the middle column and setting custom width to same as shortcode width. This works but adds an extra step.

Is there a way to have the shortcode/storymap align center without the use of the column block? If not thats fine but I figured I would ask.

Any insight you can provide would be much appreciated!

The "centering" is because the block editor puts embeds into a paragraph tag, and the theme does its margin styling based on that <p> wrapper. Adding the <p> wrapper to the shortcode output appears to fix this problem. But I wonder whether this is a good practice. It might result in nested paragraphs in some cases, or weird theme issues in other cases. Also, I don't know whether it's semantically good practice to put iframe elements inside of paragraphs.

It also works if, in the theme or in custom CSS, you tell iframes to display:block. I thought that iframes were block-level by default, but maybe I'm wrong about that. Or maybe the theme is doing something odd? I can't see at a glance.

Laurie, your column trick is good, but it can be made simpler: Add a Columns block, and make it 100% wide. Then put the shortcode inside. IMO this is the most idiomatic way to accomplish what you want inside the Block Editor. It's annoying to have the extra step, but it's a bit less annoying than the three-column trick as you described it.

Ray, what do you think? Is there another way to do this?

Ray, what do you think? Is there another way to do this?

For the Google Docs Shortcode plugin, I ran into a similar problem with the Block Editor a couple years back and solved this by wrapping the <iframe> around with the <figure> element -- https://github.com/cuny-academic-commons/google-docs-shortcode/commit/6087b146b2f8bfa31e1aca90514c4177866fe17f. This is something Gutenberg did back then and it appears to still work today, so perhaps use <figure> instead of <p>?

This is great -- thank you Boone and Ray!

Just to clarify: with the fix there is there no need for the column workaround, correct? The "shortcode" block will now be centered by default?

Thanks again!

Technically, what it means is this: whenever you use the storymaps shortcode, the output will be an iframe element wrapped in a <figure class="wp-block-embed"> element. This is a convention used by WordPress itself, and most themes that are built with the block editor in mind will use consistent margins for elements of this sort. In the case of this specific theme, it will mean "centering" (although it's not really technically "centering"), and in other themes it ought to mean that the iframe has similar left-right margins to other body content. We can't be sure of this across all themes, but our technique is probably as close as we can get to universality.

Ah- makes sense. That's great!!