[wp-trac] [WordPress Trac] #55697: Twenty-Twenty-Two: Dark mode not applied to sub menu in navigation block

[WordPress Trac]

#55697: Twenty-Twenty-Two: Dark mode not applied to sub menu in navigation block
---------------------------+-----------------------
 Reporter:  bph            |       Owner:  (none)
     Type:  defect (bug)   |      Status:  assigned
 Priority:  high           |   Milestone:  6.0
Component:  Bundled Theme  |     Version:  trunk
 Severity:  major          |  Resolution:
 Keywords:  needs-design   |     Focuses:  css
---------------------------+-----------------------

Comment (by poena):

 A team of contributors tested this thoroughly during a contributor day at
 Yoast.

 Unfortunately we did not find a solution. We learnt that the problem is in
 the editor, and not in the theme.
 It is an issue with the specificity of the link color in the editor, and
 we tried different ways both to reduce the specificity, and to increase
 it.


 The contributor day attendees have shared the following information:

 1. We cannot increase the priority of the CSS class-structure that
 inherits the correct color, as stated in the comment in the
 [https://github.com/WordPress/gutenberg/blob/trunk/packages/block-
 library/src/navigation/style.scss#L46 source]:

 "By adding low specificity, we enable compatibility with link colors set
 in theme.json,
 but still allow them to be overridden by user-set colors."

 Important parts of the structure:
 {{{
 .wp-block-navigation .wp-block-navigation-content { color: inherit; }
 }}}


 2. We cannot remove any classes (.editor-styles-wrapper or wp-elements-#)
 in the class-structure that sets the incorrect color.

 Important parts of the structure:
 {{{
 .editor-styles-wrapper .wp-elements-1 a {color:
 var(—wp—preset—color—background);
 }}}

 The reason we cannot remove the classes:
 - .editor-styles-wrapper is auto-generated
 - .wp-elements-1 retains the style to a specific part of the website, in
 this case the header.


 3. We cannot decrease the priority of the class-structure that sets the
 incorrect color (for example using :where).
 For both of the previously mentioned classes, it is stated by the
 developers that the priority is necessary.

 "The .editor-styles-wrapper selector is required on elements styles. As it
 is
 added to all other editor styles, not providing it causes reset and global
 styles to override element styles because of higher specificity."

 [https://github.com/WordPress/gutenberg/blob/trunk/packages/block-
 editor/src/hooks/style.js#L116 Source]



 ----

 -The reason why I did not close and move this issue to the Gutenberg
 GitHub repository is that there is a potential solution specific for this
 theme, which is to not use the "header" template part inside the "header
 dark" template parts.

 If the white link color setting is removed from the header-dark parts, and
 instead applied directly to the site title, then the white text color
 would not override the link color in the navigation block.

 The reason why we can not add the white color to the site title in the
 header template part, is that this part is also used on templates with a
 white background.

 These color changes would also need to be carefully tested with the new
 style variations, and for any backwards compatibility issues.

 Pinging @jffng for your thoughts on this issue.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/55697#comment:10>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform