Fix Media & Text block preview alignment on larger devices

[im3dabasia]

What?

Ensures the Media & Text block displays side by side in preview mode, even on larger devices. Fixes ( #67079 )

Why?

Fixes an issue where the Media & Text block stacked in the preview on large screens due to a small preview container.

How?

I've applied the extra CSS only when the ancestor class is block-editor-block-preview__content-iframe, which is present only during the preview. This change will not affect the existing behavior of the Media & Text block's actual output on either small or large screen devices.

Testing Instructions

1. Create a cover block
2. Assign an image and add some text on top
3. Try to convert the block into a Media & Text block, but only hover the option.

Screencast

Before:

Screen.Recording.2024-11-19.at.11.26.30.AM.mov

After:

Screen.Recording.2024-11-19.at.11.25.00.AM.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: im3dabasia <[email protected]>
Co-authored-by: michalczaplinski <[email protected]>
Co-authored-by: ellatrix <[email protected]>
Co-authored-by: dsas <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @im3dabasia! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[dsas]

Thanks for picking this up @im3dabasia

I've taken it for a test and it works great on the desktop view, however it introduces a problem on the mobile view.

Using the mobile view, the preview shows media and text side-by-side but both the site editor, and the front end of the site show image above media. This is a regression from the current status quo.

Screen.Recording.2024-11-22.at.14.46.52.mov

[ellatrix]

If we have to use !important, it doesn't seem like the right fix.

[ellatrix]

Isn't it just a matter of making sure the preview width is larger? I see it's already set at viewportWidth. Why is that broken?

[ellatrix]

It looks like the width of the block switcher previews is hardcoded at 500. I think we should get the widths of the examples in the block type, and use the largest from those, then maybe fall back to the same width used for the inserter previews.

[im3dabasia]

Hi @ellatrix,

I noticed that the preview isn't displayed on devices with a width smaller than 782px (i.e., mobile and tablet devices). Would it make sense to adjust the default viewportWidth from 500px to something more fitting, such as 1200px? It seems like a logical adjustment, especially since previews aren’t shown on medium screens or smaller.

Looking forward to your thoughts.

gutenberg/packages/block-editor/src/components/block-switcher/preview-block-popover.js

Lines 13 to 37 in af0e277

	export default function PreviewBlockPopover( { blocks } ) {
	const isMobile = useViewportMatch( 'medium', '<' );
	if ( isMobile ) {
	return null;
	}
	return (
	<div className="block-editor-block-switcher__popover-preview-container">
	<Popover
	className="block-editor-block-switcher__popover-preview"
	placement="right-start"
	focusOnMount={ false }
	offset={ 16 }
	>
	<div className="block-editor-block-switcher__preview">
	<div className="block-editor-block-switcher__preview-title">
	{ __( 'Preview' ) }
	</div>
	<BlockPreview viewportWidth={ 500 } blocks={ blocks } />
	</div>
	</Popover>
	</div>
	);
	}

[michalczaplinski]

How were you able to trigger the preview to show up @dsas ? Much like @im3dabasia I also notice that the previews don't appear in the editor if the viewport is less than 782px.

---

@im3dabasia I think that this won't work quite well. I gave it a try and while the Media & Text block looks better, some other blocks look worse - especially ones that include text because it becomes too small to read. This is using the width of 800px, with 1200px it would look even worse.

Before	After

I think something like the approach outlined by @ellatrix makes sense here and should work for all blocks.

[michalczaplinski]

The breakpoint for the Media & Text is $break-small which is 600px. If the viewportWidth is below that value, the image and text stack on top of one another.

For now, I think it's acceptable to set the viewportWidth to 601px to account for this. This makes the Media & Text behave correctly and it ALSO keeps the other blocks legible which was not the case with larger values.

I've implemented those changes in the PR now.