CSS Chat Summary: 2nd July 2020

Full meeting transcript on Slack: https://wordpress.slack.com/archives/CQ7V4966Q/p1593723636063300

I (@notlaura) facilitated the meeting.

CSSCSS Cascading Style Sheets. Audit Updates

@danfarrow made some formatting updates on the Google doc containing the audit data, and added an image of the longest selector on a mug:

Brilliant!

@isabel_brison added an audit of z-index values to the list as well.

Color Scheming Updates

We discussed the ticketticket Created for both bug reports and feature development on the bug tracker. #50504 for a modern/higher contrast color scheme in 5.5 (mistakenly referred to it as a high contrast scheme, but it is higher contrast). @afercia asked what problem this new color scheme will solve, and why it is using the Sass variables instead of CSS custom properties. @ryelle indicated that we are moving slowly with this initiative, and that for now any new schemes should continue with existing conventions.

The rationale for the new color scheme is a conversation for the design channel, but @youknowriad understood it was meant to modernize the look/feel of WordPress adminadmin (and super admin), and to possibly be the default theme later. @ryelle mentioned it would also be a good pairing with dark mode. In terms of implementation, @youknowriad discussed that there will still be a need for Sass variables, and to be cautious about what values are exposed as CSS variables since it is a runtime APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.. A CSS variable for the main admin color makes a lot of sense.

@youknowriad noted an issue with the color schemes not applying to secondary buttons (secondary is a term used in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ though not in wp-admin, and refers to the outlined style of button) that he is working on in ticket #50537. @ryelle noted that that may be intentional for color contrast, and that a specific variable for secondary/default button colors would help with this issue. @youknowriad indicated the colors are adapted for secondary buttons in Gutenberg, and this should be consistent with coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. @afercia noted that a related change was submitted in 5.3 but reverted. It is unclear if that was specifically about the button color or possibly inputs, but in any event, the functionality is inconsistent with core and Gutenberg.

I asked if there are any notes from this incident that we should take into account with the color scheming work, and @afercia mentioned that styling changes in the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor that are intended to be adopted in core, should be discussed in TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. vs. GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/. I proposed an idea that the same CSS variables that are now used Gutenberg should be used in wp-admin. @youknowriad said this would be great for post-5.5 work.

We then discussed a bit of the distinction between wp-admin CSS and Gutenberg CSS, and the history of the #core-css channel. The #core-css channel came about at the beginning of this year as a avenue for discussing how to use more modern CSS practices in wp-admin. The Gutenberg CSS architecture conversations occurred in the #core-js channel.

@ryelle asked if anyone was actively owning the task to annotate screenshots, and I committed to coming up with at least a starting point to discuss at the next meeting.

CSS Latest and Greatest Link Share

@kburgoine shared “a latest but maybe not greatest” link for CUBE CSS, a new CSS methodology that’s been floating around. Like any methodology, it depends!

That was all for this week. I’m super late posting these notes, but better than not posting them!

#summary