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

Infinite-Null · 2024-12-25T05:58:26Z

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

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

Screenshots or screencast

Before	After

…lement

github-actions · 2024-12-25T05:58:41Z

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 <ankitkumarshah@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: andersnoren <anlino@git.wordpress.org>

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

yogeshbhutkar · 2024-12-25T08:54:08Z

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.

t-hamano

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

This PR

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 · 2024-12-26T06:29:02Z

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!

t-hamano

Thanks for the update!

Sorry, my explanation was insufficient. The problem is that padding is applied to the table element, resulting in space between the table and the caption. I think what is expected here is that both padding and margin are applied to the figure element, just like with block instances.

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

Therefore, the above code alone is not sufficient.

Furthermore, it would be a good idea to delete the __experimentalSelector field and aggregate it into the selectors field.

Considering these things, the following definition should work fine:

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

Infinite-Null · 2024-12-27T10:17:17Z

Thanks for the update!

Sorry, my explanation was insufficient. The problem is that padding is applied to the table element, resulting in space between the table and the caption. I think what is expected here is that both padding and margin are applied to the figure element, just like with block instances.
"selectors": {
    "spacing": {
	"margin": ".wp-block-table"
   }
},
Therefore, the above code alone is not sufficient.

Furthermore, it would be a good idea to delete the __experimentalSelector field and aggregate it into the selectors field.

Considering these things, the following definition should work fine:
"selectors": {
	"root": ".wp-block-table > table",
	"spacing": ".wp-block-table"
},

Hi @t-hamano,
Thank you for your guidance! I’ve made the necessary changes and submitted a review request. Please take a look at it at your convenience.

t-hamano

LGTM! I tested it using the following theme.json:

Details

{
	"$schema": "../../schemas/json/theme.json",
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		}
	},
	"styles": {
		"blocks": {
			"core/table": {
				"color": {
					"text": "green",
					"background": "#ccc"
				},
				"border": {
					"width": "5px",
					"style": "dashed",
					"color": "#000"
				},
				"typography": {
					"fontSize": "20px",
					"fontWeight": "bold",
					"textTransform": "uppercase",
					"textDecoration": "underline"
				},
				"spacing": {
					"padding": {
						"top": "60px",
						"bottom": "60px"
					},
					"margin": {
						"top": "60px",
						"bottom": "60px"
					}
				}
			}
		}
	}

}

✅ Padding and margin are applied to the figure element. All other styles are applied to the table element.
✅ Styles applied in the Global Styles UI correctly override styles defined in theme.json.
Block instance styles correctly override styles applied in the Global Styles UI.

By the way, while reviewing this PR, I noticed that block instances cannot override typography styles applied in theme.json or global styles.

This is not a blocker because it occurs in trunk. I will merge this PR and then submit the issue.

Table Block: Apply margin styles to figure wrapper instead of table e…

11d068a

…lement

Infinite-Null requested review from ajitbohra and fabiankaegy as code owners December 25, 2024 05:58

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 self-requested a review December 26, 2024 04:03

t-hamano reviewed Dec 26, 2024

View reviewed changes

Table Block: Use Block Selectors API for margin styles

e85cc36

Infinite-Null requested a review from t-hamano December 26, 2024 06:29

t-hamano reviewed Dec 27, 2024

View reviewed changes

Migrate table block to use standardized selectors

f6c238a

Infinite-Null requested a review from t-hamano December 27, 2024 10:15

t-hamano approved these changes Dec 27, 2024

View reviewed changes

t-hamano merged commit a34eaca into WordPress:trunk Dec 27, 2024
62 checks passed

t-hamano changed the title ~~Table Block: Fix margin to include caption in spacing~~ Table Block: Fix margin/padding to include caption in spacing Dec 27, 2024

github-actions bot added this to the Gutenberg 20.0 milestone Dec 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Infinite-Null commented Dec 25, 2024

github-actions bot commented Dec 25, 2024 •

edited

Loading

yogeshbhutkar commented Dec 25, 2024

t-hamano left a comment

Infinite-Null commented Dec 26, 2024

t-hamano left a comment

Infinite-Null commented Dec 27, 2024

t-hamano left a comment •

edited

Loading

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

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

Conversation

Infinite-Null commented Dec 25, 2024

What?

Why?

Testing Instructions

Screenshots or screencast

github-actions bot commented Dec 25, 2024 • edited Loading

yogeshbhutkar commented Dec 25, 2024

t-hamano left a comment

Choose a reason for hiding this comment

trunk

This PR

Infinite-Null commented Dec 26, 2024

t-hamano left a comment

Choose a reason for hiding this comment

Infinite-Null commented Dec 27, 2024

t-hamano left a comment • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Dec 25, 2024 •

edited

Loading

t-hamano left a comment •

edited

Loading