Table block: Bottom margin pushes the caption down

[andersnoren]

Description

When you set a margin on the table block in theme.json, the margin is applied to the table element inside of the figure element. If you include a table caption, the figcaption is included after the table element, which means that the bottom margin applied to the block will be added between the table and the figcaption, instead of beneath the block as a whole.

If you apply a custom vertical margin to the table block inside of the editor, that margin is added to the figure element. That means that you can't overwrite the theme.json table margin on a specific table block.

Step-by-step reproduction instructions

1. Create a new post.
2. Insert a table block, and give it a figcaption.
3. Note the theme.json bottom margin for the core/table block being applied on the table element, pushing down the caption.
4. Add a vertical margin to the table block inside of the editor. It will be applied to the figure element, which means that the table block now has a vertical margin on the table element, set in theme.json, and a vertical margin set on the figure element, set with the custom margins in the editor.

Screenshots, screen recording, code snippet

Block markup for a table block with 128px in custom vertical margin.

<!-- wp:table {"className":"is-style-regular","style":{"spacing":{"margin":{"top":"128px","bottom":"128px"}}}} -->
<figure class="wp-block-table is-style-regular" style="margin-top:128px;margin-bottom:128px"><table class="has-fixed-layout"><thead><tr><th>Table Header</th><th>Table Header</th></tr></thead><tbody><tr><td>Table Cell</td><td>Table Cell</td></tr><tr><td>Table Cell</td><td>Table Cell</td></tr></tbody><tfoot><tr><td>Table Footer Cell</td><td>Table Footer Cell</td></tr></tfoot></table><figcaption class="wp-element-caption">This is the table caption.</figcaption></figure>
<!-- /wp:table -->

Screenshot of a table block given 128px vertical margin in theme.json (table element), and 128px custom vertical margin on this specific table block (figure element).

Environment info

WordPress 6.7.1
With and without Gutenberg 19.9.0 active

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Infinite-Null]

Hi @andersnoren,

Thank you for bringing this up. I was successfully able to reproduce the issue. My theme.json is:

{
	"$schema": "../../../schemas/json/theme.json",
	"version": 3,
	"styles": {
	  "color": {
		"background": "white"
	  },
	  "blocks": {
		"core/table": {
		  "spacing": {
			"margin": {
			  "top": "128px",
			  "bottom": "128px"
			}
		  }
		}
	  }
	}
  }

Screencast:

Screen.Recording.2024-12-22.at.6.28.54.PM.mov

I’ll work on a solution for this issue and open a draft PR shortly.

[Infinite-Null]

Hi @andersnoren and @t-hamano,

I’ve created a PR with the proposed solution. I’d appreciate it if you could test and review it.

Thank you!