Blocks: Improve Rendering Accuracy

[n7studios]

Summary

Improves the rendering accuracy between the block editor and frontend site.

Broadcasts

Editor: Include the container div, so that settings such as Display order and Display as grid are reflected in the block editor. These always correctly display on the frontend site, but failed to display since introducing #842, which removed the container div in the block editor to prevent double margins/paddings rendering.

Before:

After:

Form Trigger and Product

Frontend: Enqueue the wp-block-button stylesheet, so that buttons render the same (i.e. with border radius) as the standard WordPress button block, on which the Form Trigger + Product buttons are based.

Before:

After:

Testing

Updated Form Trigger and Product tests to confirm WordPress' button block styles are included in frontend output.
Visual tests performed to confirm output accurate between the block editor and frontend.

Checklist

• I have written a test and included it in this PR
• I have run all tests and they pass
• The code passes when running the PHP CodeSniffer
• Code meets WordPress Coding Standards for PHP, HTML, CSS and JS
• Security and Sanitization requirements have been followed
• I have assigned a reviewer or two to review this PR (if you're not sure who to assign, we can do this step for you)

[github-actions]

WordPress Playground

🚀 Your PR has been built and is ready for testing in WordPress Playground!

Click here to test your changes in WordPress Playground