Fix/50850 Global Style applied correctly to the table block

[faisal-alvi]

Closes #50850

What?

This PR fixes the issue between the global styles and the block editor styles for the table block. Also refactors the block.json to use the new Selectors API.

Why?

The global styles were only applied to the table tag but a few styles like spacing should be applied to the td tags.

How?

This PR fixes the issue by updating the global styles CSS and the block editor-level styles and also by using the new Selectors API.

Testing Instructions

1. Go to the site editor.
2. Add a table block with some contents
3. Go to Global Styles and change the table block border globally (color and width.)
4. See the global style changes are applied correctly.
5. Also confirm the global styles are overwritten at block settings level.

Screenshots or screencast

[github-actions]

Warning: Type of PR label error

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
• Labels found: [Block] Table.

Read more about Type labels in Gutenberg.

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

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: faisal-alvi <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: iamtakashi <[email protected]>

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

[faisal-alvi]

@t-hamano Is this PR helpful? Can you please check and let me know if any changes are required?

[t-hamano]

Sorry for the late feedback 🙇

To be honest, this problem is very complex.

This is because we need to be able to override styles set in the global styles at the block level. For this PR, please try the following scenario.

• Apply borders, font size, and background color to the Table block in the global styles.
• Insert a table block into the block editor.
• Apply borders, font size, and background color to the Table block.
• Probably no styles other than the border will be applied.

To ideally solve a problem like this, I think we should refactor with the new Selectors API. Additionally, we may also need to adjust this CSS regarding the border.

[faisal-alvi]

@t-hamano thanks for the feedback, I see the areas of improvement and fixed them so that it should solve the issue. Can you please have a look?

However, one point to share here is that the padding from the Global styles is applied to the individual <td>s but at the block editor it is applied to the <figure> tag, this is another issue (not sure if someone has already reported but) this should be solved separately.

[faisal-alvi]

I realized I did not use the new Selectors API, I'll try to refactor using it and update the PR soon.

[faisal-alvi]

@t-hamano I've updated the PR and refactored the table block.json to use the new Selectors API. Can you please have a look or assign someone else as a reviewer?