Embed Block: Border support added

[benazeer-ben]

What?

Adding block support for Embed block.
Part of #43247

Why?

Embed block is missing border support

How?

Adds the border block support via block.json

Testing Instructions

• Navigate to template/page edit.
• Then add Embed block and apply the border styles including colour, radius settings.
• Verify that block borders display correctly in both the editor and frontend.

Screenshots or screencast

Backend:

Frontend:

[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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @benazeerhassan1909.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: benazeerhassan1909.

Co-authored-by: benazeer-ben <[email protected]>
Co-authored-by: akasunil <[email protected]>
Co-authored-by: aaronrobertshaw <[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, @benazeer-ben! 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.

[aaronrobertshaw]

Thank you for putting this together @benazeer-ben 🙇

I get the feeling this one is going to have to wrangle several edge cases given the various types of content the block can embed e.g. youtube videos, tweets, spotify and audio links etc.

Testing this PR as is, I've run into a couple of issues:

1. To support border radius we should probably also support padding on the block. This might need design feedback as discussed on Video: Add border support.
2. The current approach in this PR applies the border to the block's wrapper. The embed block can also include a caption. Other blocks such as the image block, apply the border to the actual element that needs the border leaving the caption outside it. I think this would be the expected behaviour here as well.
3. When adding border or padding support we need to ensure the block has box-sizing: border-box styles so that it will respect any width its parent might be trying to apply to it.

Box sizing issue:

Embed blocks with different content and captions:

Next Steps

To move this PR forward while waiting on some design input regarding border-radius adoption, I think we can:

1. Skip serialization of borders on the block wrapper and apply it to the embed's inner wrapper so the caption falls outside it. See Video: Add border block support #63777 for some clues on this approach.
2. Add box-sizing: border-box to the block. (there's also a separate PR aimed at generically adding this style to blocks but it might be slow to land given the potential to cause visual regressions).

Thanks again for all your work on adopting block supports, it's appreciated 👍

[benazeer-ben]

Thanks @aaronrobertshaw for the detailed feedback and details.

Implemented skip serialization of borders on the block wrapper and applied it to the embed's inner wrapper.

For now padding support also added, if we get some design feedback we can change it accordingly.

Please let me know if we need more tweak on this.

Screenshare.-.2024-11-15.9_02_39.PM.mp4

[aaronrobertshaw]

The convention with these selectors is to explicitly include the block's class. In this case, .wp-block-embed.

I'm not 100% whether it is required but it does make it clearer the intended target for the styles. That block class is also tweaked when generating block style variation selectors for the block.

One last nit, there's an unnecessary space at the end of that selector. Better safe than sorry, we should clean that up in case theres some theme.json processing somewhere that wasn't expecting it.

[aaronrobertshaw]

This applies the padding to the Embed block's wrapper.

The justification for adding the padding support was so that it could be used to counter border radius and prevent the content from sticking out beyond the border.

This might need to be applied to the inner embed wrapper as well.

[aaronrobertshaw]

Thank you for iterating on this 👍

I've given it a test and there are still a few issues. Most notably:

1. Padding is applied to the wrapper so doesn't help with the border radius problem
2. The custom selector for borders should probably also have the block class in it to ensure compatibility with block style variations.
3. PR description and test instructions no longer match what the PR does

On that last point, I find it handy each time I iterate on a PR to re-test it in full asking myself some questions like:

• Have I changed what the PR does?
• If it does something new, how do I test that?
• If the PR is related to a block, are there different ways to use the block? e.g. testing the embed block with not just a video but all the other embed types.

Answering those questions then means you already have everything you need to update the PR description in a way that ensures things don't get missed and it's easier for reviewers.

---

Here's what I see when applying both padding and borders to various embeds. I'd expect the padding within the border, not outside it otherwise it's basically just a second margin.