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

Remove core/post-comments-form block styles that are overriding button element styles #42053

Merged
merged 13 commits into from
Jul 15, 2022

Conversation

matiasbenedetto
Copy link
Contributor

@matiasbenedetto matiasbenedetto commented Jun 29, 2022

What?

Remove core/post-comments-form block styles that are overriding button element styles from theme.json

Why?

These styles are preventing that the theme.json styles for button elements apply over the core/post-comments-form submit button.

How?

I think those styles can be removed because they are no longer needed and they are conflicting with the button element styles.

Testing Instructions

  1. Add theme.json settings for core/button block:
	"styles": {
              "elements": {
                      "button": {
                              "border": {
	                              "color": "black",
	                              "style": "solid",
	                              "width": "3px"
                              }
              },
	...
  1. Check the rendered post comments form and see if the styles are being overridden.

Screenshots or screencast

Using the theme.json from the top ⬆️ example:

Before:
image

After:
image

…hey are overriding the core/block button styles.
@matiasbenedetto matiasbenedetto added [Type] Bug An existing feature does not function as intended [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. labels Jun 29, 2022
@github-actions
Copy link

github-actions bot commented Jun 29, 2022

Size Change: +6.79 kB (+1%)

Total Size: 1.26 MB

Filename Size Change
build/block-editor/index.min.js 153 kB +701 B (0%)
build/block-editor/style-rtl.css 14.6 kB +39 B (0%)
build/block-editor/style.css 14.6 kB +39 B (0%)
build/block-library/blocks/cover/style-rtl.css 1.55 kB -1 B (0%)
build/block-library/blocks/cover/style.css 1.55 kB -1 B (0%)
build/block-library/blocks/gallery/style-rtl.css 1.53 kB +36 B (+2%)
build/block-library/blocks/gallery/style.css 1.53 kB +37 B (+2%)
build/block-library/blocks/image/editor-rtl.css 736 B -2 B (0%)
build/block-library/blocks/image/style-rtl.css 627 B +103 B (+20%) 🚨
build/block-library/blocks/image/style.css 630 B +100 B (+19%) ⚠️
build/block-library/blocks/post-comments-form/style-rtl.css 493 B -2 B (0%)
build/block-library/blocks/post-comments-form/style.css 493 B -2 B (0%)
build/block-library/blocks/social-links/style-rtl.css 1.39 kB +20 B (+1%)
build/block-library/blocks/social-links/style.css 1.38 kB +21 B (+2%)
build/block-library/blocks/template-part/editor-rtl.css 178 B +29 B (+19%) ⚠️
build/block-library/blocks/template-part/editor.css 178 B +29 B (+19%) ⚠️
build/block-library/common-rtl.css 1.01 kB +20 B (+2%)
build/block-library/common.css 1 kB +21 B (+2%)
build/block-library/editor-rtl.css 10.2 kB +22 B (0%)
build/block-library/editor.css 10.2 kB +21 B (0%)
build/block-library/index.min.js 184 kB +1.35 kB (+1%)
build/block-library/style-rtl.css 11.7 kB +127 B (+1%)
build/block-library/style.css 11.7 kB +128 B (+1%)
build/blocks/index.min.js 47.1 kB +65 B (0%)
build/components/index.min.js 230 kB +104 B (0%)
build/components/style-rtl.css 14 kB +11 B (0%)
build/components/style.css 14.1 kB +11 B (0%)
build/core-data/index.min.js 14.7 kB -4 B (0%)
build/customize-widgets/index.min.js 11.2 kB +26 B (0%)
build/data/index.min.js 7.99 kB +34 B (0%)
build/dom/index.min.js 4.69 kB +32 B (+1%)
build/edit-post/index.min.js 30.5 kB +54 B (0%)
build/edit-site/index.min.js 53.6 kB +1.65 kB (+3%)
build/edit-site/style-rtl.css 8.23 kB +37 B (0%)
build/edit-site/style.css 8.22 kB +37 B (0%)
build/edit-widgets/index.min.js 16.5 kB +28 B (0%)
build/editor/index.min.js 41.3 kB +1.86 kB (+5%) 🔍
build/format-library/index.min.js 6.75 kB +6 B (0%)
build/rich-text/index.min.js 11.1 kB +3 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 982 B
build/annotations/index.min.js 2.76 kB
build/api-fetch/index.min.js 2.26 kB
build/autop/index.min.js 2.14 kB
build/blob/index.min.js 475 B
build/block-directory/index.min.js 6.58 kB
build/block-directory/style-rtl.css 990 B
build/block-directory/style.css 991 B
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 103 B
build/block-library/blocks/audio/style.css 103 B
build/block-library/blocks/audio/theme-rtl.css 110 B
build/block-library/blocks/audio/theme.css 110 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 59 B
build/block-library/blocks/avatar/style.css 59 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 441 B
build/block-library/blocks/button/editor.css 441 B
build/block-library/blocks/button/style-rtl.css 543 B
build/block-library/blocks/button/style.css 543 B
build/block-library/blocks/buttons/editor-rtl.css 292 B
build/block-library/blocks/buttons/editor.css 292 B
build/block-library/blocks/buttons/style-rtl.css 275 B
build/block-library/blocks/buttons/style.css 275 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 103 B
build/block-library/blocks/code/style.css 103 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 406 B
build/block-library/blocks/columns/style.css 406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 187 B
build/block-library/blocks/comment-template/style.css 185 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 95 B
build/block-library/blocks/comments/editor.css 95 B
build/block-library/blocks/cover/editor-rtl.css 615 B
build/block-library/blocks/cover/editor.css 616 B
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 110 B
build/block-library/blocks/embed/theme.css 110 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 253 B
build/block-library/blocks/file/style.css 254 B
build/block-library/blocks/file/view.min.js 346 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 948 B
build/block-library/blocks/gallery/editor.css 950 B
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 333 B
build/block-library/blocks/group/editor.css 333 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 327 B
build/block-library/blocks/html/editor.css 329 B
build/block-library/blocks/image/editor.css 737 B
build/block-library/blocks/image/theme-rtl.css 110 B
build/block-library/blocks/image/theme.css 110 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 199 B
build/block-library/blocks/latest-posts/editor.css 198 B
build/block-library/blocks/latest-posts/style-rtl.css 463 B
build/block-library/blocks/latest-posts/style.css 462 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 493 B
build/block-library/blocks/media-text/style.css 490 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 705 B
build/block-library/blocks/navigation-link/editor.css 703 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation-submenu/view.min.js 423 B
build/block-library/blocks/navigation/editor-rtl.css 2.03 kB
build/block-library/blocks/navigation/editor.css 2.04 kB
build/block-library/blocks/navigation/style-rtl.css 1.96 kB
build/block-library/blocks/navigation/style.css 1.95 kB
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB
build/block-library/blocks/navigation/view.min.js 443 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 363 B
build/block-library/blocks/page-list/editor.css 363 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 260 B
build/block-library/blocks/paragraph/style.css 260 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments/editor-rtl.css 77 B
build/block-library/blocks/post-comments/editor.css 77 B
build/block-library/blocks/post-comments/style-rtl.css 632 B
build/block-library/blocks/post-comments/style.css 630 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 605 B
build/block-library/blocks/post-featured-image/editor.css 605 B
build/block-library/blocks/post-featured-image/style-rtl.css 153 B
build/block-library/blocks/post-featured-image/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 282 B
build/block-library/blocks/post-template/style.css 282 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 80 B
build/block-library/blocks/post-title/style.css 80 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 370 B
build/block-library/blocks/pullquote/style.css 370 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 234 B
build/block-library/blocks/query-pagination/style.css 231 B
build/block-library/blocks/query/editor-rtl.css 365 B
build/block-library/blocks/query/editor.css 364 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 385 B
build/block-library/blocks/search/style.css 386 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 233 B
build/block-library/blocks/separator/style.css 233 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 464 B
build/block-library/blocks/shortcode/editor.css 464 B
build/block-library/blocks/site-logo/editor-rtl.css 708 B
build/block-library/blocks/site-logo/editor.css 708 B
build/block-library/blocks/site-logo/style-rtl.css 192 B
build/block-library/blocks/site-logo/style.css 192 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 177 B
build/block-library/blocks/social-link/editor.css 177 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/spacer/editor-rtl.css 322 B
build/block-library/blocks/spacer/editor.css 322 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 494 B
build/block-library/blocks/table/editor.css 494 B
build/block-library/blocks/table/style-rtl.css 611 B
build/block-library/blocks/table/style.css 609 B
build/block-library/blocks/table/theme-rtl.css 175 B
build/block-library/blocks/table/theme.css 175 B
build/block-library/blocks/tag-cloud/style-rtl.css 226 B
build/block-library/blocks/tag-cloud/style.css 227 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 561 B
build/block-library/blocks/video/editor.css 563 B
build/block-library/blocks/video/style-rtl.css 159 B
build/block-library/blocks/video/style.css 159 B
build/block-library/blocks/video/theme-rtl.css 110 B
build/block-library/blocks/video/theme.css 110 B
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/theme-rtl.css 695 B
build/block-library/theme.css 700 B
build/block-serialization-default-parser/index.min.js 1.11 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/compose/index.min.js 11.7 kB
build/customize-widgets/style-rtl.css 1.4 kB
build/customize-widgets/style.css 1.4 kB
build/data-controls/index.min.js 653 B
build/date/index.min.js 32 kB
build/deprecated/index.min.js 507 B
build/dom-ready/index.min.js 324 B
build/edit-navigation/index.min.js 16 kB
build/edit-navigation/style-rtl.css 4.02 kB
build/edit-navigation/style.css 4.03 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-post/style-rtl.css 6.97 kB
build/edit-post/style.css 6.97 kB
build/edit-widgets/style-rtl.css 4.35 kB
build/edit-widgets/style.css 4.35 kB
build/editor/style-rtl.css 3.65 kB
build/editor/style.css 3.65 kB
build/element/index.min.js 4.27 kB
build/escape-html/index.min.js 537 B
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.64 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.77 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.78 kB
build/keycodes/index.min.js 1.38 kB
build/list-reusable-blocks/index.min.js 1.74 kB
build/list-reusable-blocks/style-rtl.css 835 B
build/list-reusable-blocks/style.css 835 B
build/media-utils/index.min.js 2.93 kB
build/notices/index.min.js 953 B
build/nux/index.min.js 2.05 kB
build/nux/style-rtl.css 732 B
build/nux/style.css 728 B
build/plugins/index.min.js 1.94 kB
build/preferences-persistence/index.min.js 2.22 kB
build/preferences/index.min.js 1.3 kB
build/primitives/index.min.js 933 B
build/priority-queue/index.min.js 612 B
build/react-i18n/index.min.js 696 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.68 kB
build/reusable-blocks/index.min.js 2.22 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/server-side-render/index.min.js 1.61 kB
build/shortcode/index.min.js 1.53 kB
build/token-list/index.min.js 644 B
build/url/index.min.js 3.61 kB
build/vendors/react-dom.min.js 38.5 kB
build/vendors/react.min.js 4.34 kB
build/viewport/index.min.js 1.08 kB
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.19 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

Copy link
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

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

I think we should only remove the styles that are provided by core theme.json. For example cursor:pointer is not, so it should remain. Testing this I saw no difference because the class .wp-block-button__link in the button block's CSS adds cursor:pointer, but IMO it should not be removed - same to all other CSS that are not in theme.json.

@matiasbenedetto
Copy link
Contributor Author

I updated the testing instructions following the issue conversation.
And, as @draganescu suggested, I restored all the properties but the border one, which can be provided by themes.json.

Copy link
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

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

Let's land this 👍🏻

@carolinan
Copy link
Contributor

Using Empty theme.
Screenshots from the block editor, not site editor.

Before:
WordPress 6.0, for comparison. Button styles in the editor and front do not match (Gutenberg is deactivated here).
comment-form-button-gb-decativated

With Gutenberg trunk, and changes copied from PR description and added to theme.json:
comment-form-button-gb-trunk

After, with PR applied:
Changes copied from PR description and added to theme.json:
comment-form-button-pr-json-changes

Without button styles in theme.json, the button has the browser default border for buttons (and I assume this is the style that will be the default style used in classic themes).

comment-form-button-has-default-border


There is also an issue with the border radius, but I do not know which of the button element PR's that caused it. I suspect that this might even bleed through from the WordPress admin area styles, from the .submit CSS class?

@carolinan
Copy link
Contributor

carolinan commented Jun 30, 2022

I am not fond of the browser default border that will be used if theme authors do not style this button, but I also do not have a solution for it.

Copy link
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

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

Let's wait on figuring out what's up with the roundness in @carolinan 's tests

@matiasbenedetto matiasbenedetto changed the title Remove core/post-comments-form block styles that are overriding core/button block styles Remove core/post-comments-form block styles that are overriding button element styles Jul 1, 2022
@carolinan
Copy link
Contributor

carolinan commented Jul 2, 2022

The .submit style has a higher specificity.
I assume the submit class was added at some point to match the original comment_form() function.

image

@matiasbenedetto
Copy link
Contributor Author

matiasbenedetto commented Jul 5, 2022

The problems around border-radius found by @carolinan preexist this PR and they are not strictly related to the original intention of this PR.
image
Despite that, I introduced a commit removing the .submit class introduced in this PR. Removing that class doesn't seem to be affecting the form button and fixes the border-radius problem which caused the weird button shape ☝️ .

Apart from that, I added a default setting in Gutenberg's default theme.json to remove the user-agent default button border. In this way, we are able to style the core/post-comments-form submit button using the theme's theme.json element button (styles.elements.button).

In this screenshot, you can see that both problems seem to be solved. For this example, I'm using emptytheme and these settings in the theme's theme.json.

	"styles": {
		"elements": {
			"button": {
				"border": {
					"color": "red",
					"style": "solid",
					"width": "10px"
				},
				"color": {
					"background": "orange",
					"text": "blue"
				}
			}
		}
	}	

image

With Gutenberg plugin disabled still are some visual discrepancies between the editor and the frontend caused by some admin CSS definitions. I may have a fix for that, I'm testing it. Due it is a core-problem that needs to be fixed in core repo I think we can move forward with this PR.

Thanks @carolinan and @draganescu for your feedback!

@scruffian
Copy link
Contributor

removing the .submit class introduced #41251

I think that class pre-dates that PR...

@@ -34,7 +34,6 @@ const CommentsForm = () => {
name="submit"
type="submit"
className={ classnames(
'submit',
Copy link
Contributor

Choose a reason for hiding this comment

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

Where else is this class? If it's not needed should we remove the directives as well?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I haven't found the class anywhere else in Gutenberg codebase.
The CSS directives live in the WordPress core repo: https://github.com/WordPress/wordpress-develop/blob/0a17a80bccd452b91c3b63f71f010ba131a2c954/src/wp-admin/css/forms.css#L415-L421

@draganescu draganescu dismissed their stale review July 6, 2022 11:36

The new updates seem to solve the problems

@matiasbenedetto matiasbenedetto added the [Block] Post Comments Form Affects the Comments Form Block label Jul 8, 2022
Copy link
Contributor

@michalczaplinski michalczaplinski left a comment

Choose a reason for hiding this comment

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

This looks good to me 👍

I have originally added the submit classes in 08d34f3 when creating the Post Comments Form for the editor. The only reason for adding it was because the PHP (non-block) comments also include it.

Copy link
Contributor

@michalczaplinski michalczaplinski left a comment

Choose a reason for hiding this comment

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

Uh, I'm sorry for having to revoke my approval 😅

I have noticed that the submit class is also applied on the frontend through the comment_form_defaults filter:

add_filter( 'comment_form_defaults', 'post_comments_form_block_form_defaults' );

This is where the comment_form_defaults filter is being applied in Core.

This filter was introduced to the Post Comments Form block in #40628 because of the feedback in #34994 (comment).

So, I think we should either remove the submit class in both places or keep it in both 🙂 .

@matiasbenedetto
Copy link
Contributor Author

Thanks for your detailed feedback @michalczaplinski !
In the last commit, I removed the submit class also from the server-side rendering. Do you think that could work?

@michalczaplinski michalczaplinski self-requested a review July 15, 2022 23:23
Copy link
Contributor

@michalczaplinski michalczaplinski left a comment

Choose a reason for hiding this comment

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

I think that's fine! 🙂

There is only one class (submit) applied to the button which is defined here and added to the final markup here

Also, I wanna note this comment which confirms that CSS classes can change from time to time given good reasons (I'm paraphrasing).

@michalczaplinski michalczaplinski merged commit 875a204 into trunk Jul 15, 2022
@michalczaplinski michalczaplinski deleted the fix/42052 branch July 15, 2022 23:24
@github-actions github-actions bot added this to the Gutenberg 13.8 milestone Jul 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Post Comments Form Affects the Comments Form Block [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Post comment form block styles are overriding button elements theme.json styles
5 participants