feat: add newspack-block-theme backwards compatibility

thomasguillot commented 5 months ago

All Submissions:

[x] Have you followed the Newspack Contributing guideline?
[x] Does your code follow the WordPress' coding standards and VIP Go coding standards?
[x] Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR adds backwards compatibility with the Block Theme for things like:

New colour names (accent-, contrast-, base-*)
Column block (rounded)
List block (checked)

How to test the changes in this Pull Request:

Install the Block Theme
Create a new page and play with colours, columns, and list
Publish page
Switch to the Classic Theme (this branch)

Other information:

[ ] Have you added an explanation of what your changes do and why you'd like us to include them?
[ ] Have you written new tests for your changes, as applicable?
[ ] Have you successfully ran tests with your changes locally?

thomasguillot commented 4 months ago

You can test any core blocks (e.g. paragraph, list, pullquote). Apply a background color and/or text-color.

For the background color you can just add a bunch of empty groups:

<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"backgroundColor":"base-2","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-base-2-background-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"backgroundColor":"base-3","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-base-3-background-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"backgroundColor":"base-4","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-base-4-background-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"backgroundColor":"base-5","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-base-5-background-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"backgroundColor":"contrast","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-contrast-background-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"backgroundColor":"contrast-2","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-contrast-2-background-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"backgroundColor":"contrast-3","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-contrast-3-background-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"backgroundColor":"accent","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-accent-background-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"backgroundColor":"accent-2","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-accent-2-background-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

For the column block, there's a "Rounded" style:

For the list block, there's a "Checked" style:

leogermani commented 4 months ago

Hi @thomasguillot

I have tested but I also don't know exactly what to expect. Here are the results:

The editor on the Block theme:

The editor on the regultar Theme - with no rounded corners or "checked" styles

The page on the Regular theme - here we can see the corners and checked

The page on the block theme

thomasguillot commented 4 months ago

@leogermani Thank you. It looks like it's working fine with the exception of the list/column styles in the editor. I actually can't replicate the list styles issue. Does your block still have the class?

list-classic-theme

thomasguillot commented 4 months ago

@leogermani For the column's rounded style, it should now be visible in the Editor https://github.com/Automattic/newspack-theme/pull/2315/commits/cc0cb926d5b99a6339e51ad6afa278186d5dbd47

leogermani commented 4 months ago

Does your block still have the class?

Looks like it has: 'is-style-checked`. Is that the one?

I see the columns rounded borders now

thomasguillot commented 4 months ago

Looks like it has: 'is-style-checked`. Is that the one?

Yes. Very strange since I can't replicate. I pushed some changes: https://github.com/Automattic/newspack-theme/pull/2315/commits/b7f83d44c8f55fd9fc02f72d4c8e2d40b7704898

@leogermani does this fix the issue on your end?

leogermani commented 4 months ago

@leogermani does this fix the issue on your end?

yes!

matticbot commented 4 months ago

:tada: This PR is included in version 1.92.0-epic-ras-acc.1 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

matticbot commented 3 months ago

:tada: This PR is included in version 1.92.0-alpha.1 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

matticbot commented 3 months ago

:tada: This PR is included in version 1.92.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

Automattic / newspack-theme