Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table Block: Fix margin to include caption in spacing #68281

Open
wants to merge 2 commits into
base: trunk
Choose a base branch
from

Conversation

Infinite-Null
Copy link
Contributor

Fixes: #68217

What?

The PR modifies the margin application in table blocks to ensure theme.json margin settings are applied to the figure wrapper instead of the inner table element.

Why?

When margins are set via theme.json, they are applied to the inner table element, causing undesirable spacing between the table and its caption. This PR fixes these spacing inconsistencies by applying margins to the correct element.

Testing Instructions

  1. Create a new post
  2. Insert a table block
  3. Add a caption to the table
  4. In theme.json, set a margin for the core/table block (e.g., 128px)
  5. Check the caption and table block

Screenshots or screencast

Before After
image image

Copy link

github-actions bot commented Dec 25, 2024

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.

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

Co-authored-by: Infinite-Null <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: yogeshbhutkar <[email protected]>
Co-authored-by: andersnoren <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@yogeshbhutkar
Copy link
Contributor

Hi @Infinite-Null, thanks for the PR ✨

I've tested out the PR and it seems to work as expected. The bug has been resolved.

Screenshot 2024-12-25 at 2 22 01 PM

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Block] Table Affects the Table Block labels Dec 26, 2024
@t-hamano t-hamano self-requested a review December 26, 2024 04:03
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR!

One thing to be aware of is that the __experimentalSelector field affects all global styles. Other styles, except padding/margin, etc. are expected to apply to the table element, but in this PR they are applied to the figure element, which is not the intention.

Below is a screenshot of the border, color, and font styles applied to the Table block via the global styles:

trunk

image

This PR

image

Therefore, we cannot modify the __experimentalSelector field directly.

Instead, there is now a new Block Selectors API. Can we use this to target spacing support to figure elements and other elements to table elements as before?

@Infinite-Null
Copy link
Contributor Author

Hi @t-hamano,

Thank you for the suggestion. I’ve reverted the __experimentalSelector and applied the following to address the issue:

"selectors": {
    "spacing": {
	"margin": ".wp-block-table"
   }
},

Please review it at your convenience.
Thank You!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Table Affects the Table Block [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Table block: Bottom margin pushes the caption down
3 participants