Media & Text: Turn Stack on mobile toggle on by default

[AmirS]

Description

Fixes #14281.

This PR updates the Media & Text block to be responsive by default.
When new Media & Text block is added, "Stack on mobile" toggle is set to on by default.

How has this been tested?

The Media and Text block is updated to use true as a default value for isStackedOnMobile block attribute.
Core__media-text*** fixtures have been regenerated to include is-stacked-on-mobile class name for the Media & Text block elements.

Screenshots

Checklist:

• My code is tested.
• My code follows the WordPress code style.

[aduth]

Can you clarify if or where a discussion took place leading to this suggested change?

[aduth]

Unless I'm mistaken, this would be considered a breaking change, and would invalidate existing Media & Text blocks.

See also: https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-deprecation/

[marekhrabe]

This originated in #14281. I have a feeling it cannot be this easy to update the default, as it will indeed invalidate blocks. Can we make migration somehow simply for this?

Also, I think that when the stacking becomes default, we should implement it also as a default in CSS and only add a classname when NOT stacking (opposite logic of the current one). Does that make sense?

[jorgefilipecosta]

Hi @AmirS thank you for working on this PR.
I added a commit with the required deprecation logic.
To test it I pasted (in this branch) the following code in the code editor created using the master branch:

<!-- wp:media-text {"mediaType":"image"} -->
<div class="wp-block-media-text alignwide"><figure class="wp-block-media-text__media"><img src="https://s.w.org/images/home/screen-themes.png?3" alt=""/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
<p class="has-large-font-size">Test</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

<!-- wp:media-text {"align":"full","mediaPosition":"right","mediaType":"image"} -->
<div class="wp-block-media-text alignfull has-media-on-the-right"><figure class="wp-block-media-text__media"><img src="https://s.w.org/images/home/screen-themes.png?3" alt=""/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
<p class="has-large-font-size">Test</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

<!-- wp:media-text {"align":"","mediaPosition":"right","mediaType":"image","isStackedOnMobile":true} -->
<div class="wp-block-media-text has-media-on-the-right is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://s.w.org/images/home/screen-themes.png?3" alt=""/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
<p class="has-large-font-size">Test</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

<!-- wp:media-text {"align":"full","mediaPosition":"right","mediaType":"image","isStackedOnMobile":true} -->
<div class="wp-block-media-text alignfull has-media-on-the-right is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://s.w.org/images/home/screen-themes.png?3" alt=""/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
<p class="has-large-font-size">Test</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

The blocks were migrated successfully and kept the stack on mobile setting they had.

Also, I think that when the stacking becomes default, we should implement it also as a default in CSS and only add a classname when NOT stacking (opposite logic of the current one). Does that make sense?

Unfortunately, it is not possible to implement it as the default on CSS, without changing all the existing blocks that set stack on mobile as false to be stacked on mobile. That is breaking change as we are changing the look of existing blocks even if the user does not open them on the editor.
We may discuss this after, or check if someone has an idea to mitigate this problem. I think we can add some kind of migration but if the user never opens&saves the post the post will be set to stacked on mobile.

I think this PR should be ready.

[melchoyce]

Hey, why was this PR closed?

[paaljoachim]

Hey @AmirS

Could you give us a status update on this PR? Let us know what we can do to help move this PR onward. Is this PR ready for a final review? Thanks.

[AmirS]

Yes, after the required deprecation logic added by @jorgefilipecosta, this PR should be ready for a review.

[noisysocks]

Hey @AmirS, the changes here look good but the branch needs to be rebased with the latest changes in master.

[jorgefilipecosta]

Hi @noisysocks, the conflicts this PR were really huge and across all the files. I reapplied the change from master following the same logic and regenerated all the media&text fixtures, it seems to be working well and is ready for a review.

[jorgefilipecosta]

This PR seems ready, let's merge it. If there is any further comment please add them here and we will iterate.