Update/wp 5.4

[dreamwhisper]

Added

• CSS to adjust left padding for WordPress 5.4 Social Icons.
• Editor styles to ensure theme colors work for inline text colors.
• Editor styles for WordPress 5.4 compatibility, including link color, buttons, headings, and lists.

Changed

• Updated one-click theme setup content to include WordPress 5.4 button markup.

Removed

• Unused light heading class.

How to test

1. Create a page or post and switch to the code editor.
2. Paste the block code shared below.
3. Switch back to the visual editor.
4. Follow the guidance provided below to test in the editor and the front end.

<!-- wp:heading -->
<h2>New Social Links Block</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Make sure these social icons look the way they should in your theme:</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://facebook.com","service":"facebook"} /-->

<!-- wp:social-link {"url":"https://twitter.com","service":"twitter"} /-->

<!-- wp:social-link {"service":"instagram"} /-->

<!-- wp:social-link {"service":"linkedin"} /-->

<!-- wp:social-link {"service":"youtube"} /--></ul>
<!-- /wp:social-links -->

<!-- wp:paragraph -->
<p>The social links list above should not have left padding or margin.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>New Buttons Block</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Here's a button from WordPress 5.3. Make sure it looks and is positioned the way it should in your theme:</p>
<!-- /wp:paragraph -->

<!-- wp:button {"align":"right"} -->
<div class="wp-block-button alignright"><a class="wp-block-button__link" href="https://google.com">5.3 button</a></div>
<!-- /wp:button -->

<!-- wp:paragraph -->
<p>Note: buttons where no alignment was selected would align left by default in versions prior to 5.4. They will align center in the editor now, but not on the front end. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here's some buttons using the new "Buttons" block in WordPress 5.4. Make sure they are aligned properly, according to the text on each button.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"align":"right"} -->
<div class="wp-block-buttons alignright"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">5.4 Button Aligned Right</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons {"align":"left"} -->
<div class="wp-block-buttons alignleft"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">5.4 button aligned left</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">5.4 buttons aligned center</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons {"align":"left"} -->
<div class="wp-block-buttons alignleft"></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"clear"} -->
<hr class="wp-block-separator clear"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>Inline text colors</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Make sure the text in the following block is colored properly.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This text should be a normal default color. <span class="has-inline-color has-theme-primary-color">This text should be the theme's primary color.</span></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This text should be a normal default color. <span class="has-inline-color has-theme-secondary-color">This text should be the theme's secondary accent color, if it has one.</span> If it doesn't, the text will be default.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>List styling changes</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Make sure this list looks correct in the editor and on the front end.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Thing 1</li><li>Thing 2</li><li>Thing 3</li><li>Thing 4</li></ul>
<!-- /wp:list -->

<!-- wp:list {"ordered":true} -->
<ol><li>Thing 1</li><li>Thing 2</li><li>Thing 3</li><li>Thing 4</li></ol>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>Link color classname change</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a href="https://google.ca">This is a link. Does the color match what you've set for the theme's primary color in the customizer?</a></p>
<!-- /wp:paragraph -->

Documentation

Needs support documentation cc @susannelson

Suggested changelog entry

• See above

Notes

None

[dreamwhisper]

just one comment about mentioning 5.4 is the minimum in the changelog.

Good catch! Added.