fixed table block footer section issue

[viralsampat-multidots]

What?

The PR is added to resolved table block tfoot issue for both front-end and back-end.

Why?

I have checked Gutenberg table block and I have added its header section, test data, and footer section. But, in admin and at front-end user can't identify that which is footer section. Because footer section is react like row & columns data.

How?

First I have checked its CSS and found that tfoot was not working like header. So, I have added its CSS.

Testing Instructions

1. Open a Post or Page.
2. Insert a Table Block.
3. Enable Header section from block setting.
4. Enable Footer section from block setting.
5. Insert data into the table and check that table header & tfoot is not looks like same.

Testing Instructions for Keyboard

Screenshots or screencast

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @viralsampat-multidots! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[mikachan]

Thanks for working on this! I think it's a good idea to make the thead and tfoot of the table block consistently different from the rest of the table.

I believe the font-weight and text alignment for the thead element are inherited from the browser defaults, so I'm not sure if applying these to the tfoot via CSS is the best approach. Or, if we do, I think we should also apply them to the thead via CSS as well, so we can ensure they're the same cross-browser.

Instead, what do you think of applying the bottom border to the thead and the top border to the tfoot as a default style? Currently, these borders are only applied if the theme opts into wp-block-styles. We could move these styles from the theme.scss and into style.scss to make sure they're always applied on the front end and the editor.

[viralsampat-multidots]

Hello @mikachan

Thanks for your feedback.

Here, I need to do anything? If yes then I will make above mentioned changes.

Please let me know your feedback for the same.

Thanks,

[mikachan]

Hi @viralsampat-multidots! I prefer the option of moving the border styles from theme.scss to style.scss, so they're the default styles, rather than changing the font weight. I think it'd be worth making these changes so we can test them out. This would include:

• Removing the font-weight and text alignment changes
• Moving the following CSS from theme.scss to style.scss:

	thead {
		border-bottom: 3px solid;
	}

	tfoot {
		border-top: 3px solid;
	}

[viralsampat-multidots]

Hi @viralsampat-multidots! I prefer the option of moving the border styles from theme.scss to style.scss, so they're the default styles, rather than changing the font weight. I think it'd be worth making these changes so we can test them out. This would include:

• Removing the font-weight and text alignment changes
• Moving the following CSS from theme.scss to style.scss:

	thead {
		border-bottom: 3px solid;
	}

	tfoot {
		border-top: 3px solid;
	}

Hello @mikachan

Thanks for your feedback,

I have made above mentioned change and added it as PR.

Thanks,

[mikachan]

This is looking good! I think this works well 👍 I've left one more inline comment.

[mikachan]

Thanks for working on this. I think this is good to bring in! 🎉

[github-actions]

Congratulations on your first merged pull request, @viralsampat-multidots! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

[viralsampat-multidots]

Congratulations on your first merged pull request, @viralsampat-multidots! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

Hello Team,

I have added my wordpress.org profile.

Thanks,