Make WordPress Core

Opened 4 hours ago

Last modified 52 minutes ago

#65856 new defect (bug)

Lint the About page CSS for 7.1

Reported by: afercia Owned by:
Priority: normal Milestone: 7.1
Component: Administration Version: trunk
Severity: normal Keywords: has-patch dev-feedback
Cc: Focuses: accessibility, css, coding-standards

Description

In #29792 / https://github.com/WordPress/wordpress-develop/pull/12934 I'm experimenting a Stylelint configuration to lint the Core admin CSS.

I took the liberty to run it on the about.css file of the About page for WordPress 7.1. The linting reported several issues (50 errors). It would be good to fix at least a part of them.

More importantly:

In [63182] see #65698, two new order CSS properties have been added for the About page. They are used for the reponsive view media query at 600 pixels. Have they been carefully checked to see if they introduce any accessibility problems? Cc @joedolson

Most of the other errors are about:

  • Indentation.
  • Unnecessary spacing inside parentheses.
  • Unnecessary quotes.
  • Line-height value with unit.
  • Duplicate selectors.
  • Not shortened color values.
  • Missing leading zero for decimal values.

PR incoming shortly.

Change History (8)

This ticket was mentioned in PR #13014 on WordPress/wordpress-develop by @afercia.


3 hours ago
#1

  • Keywords has-patch added

Trac ticket: https://core.trac.wordpress.org/ticket/65856#ticket

The CSS for the WordPress 7.1 About page contains several CSS Coding Standards errors.

This PR aims to fix _most_ of them.

Importtant for accessibility:

At the moment, the about.css file contains two new order CSS properties. They are used for the responsive view at 600 pixels. They should be carefully checked to see if they introduce any accessibility problems.

A list of the errors is available in the attached txt file:

01 about-page-css-errors.txt

What this PR does _not_ fix:

  • It does not fix most of the 'Unexpected duplicate selector'. The duplicate selectors come from the structure of the file that is divided into sections. Still, they are unnecessary duplicate.
  • 'Unexpected qualifying type selector' e.g. h3.is-larger-heading where the element type selector should not be used. So far, I'm considering this a 'warning' and not a real error although this is explicitly mentioned in the CSS Coding Standards:

Refrain from using over-qualified selectors, div.container can simply be stated as .container.

## Use of AI Tools

None

#2 @afercia
3 hours ago

  • Focuses accessibility added

@mukesh27 commented on PR #13014:


3 hours ago
#3

Refrain from using over-qualified selectors, div.container can simply be stated as .container.

Not able to see this type of selector change in PR. Did i missed anything?

@wildworks commented on PR #13014:


85 minutes ago
#4

Sorry, the commit 07788a5aff3289008c41d39c76163ff8d078ab61 was incorrect. I have fixed it in a5c848a27a50dc6a52ec0d413334d4ea6fe4aa60.

@wildworks commented on PR #13014:


65 minutes ago
#5

I'd like to commit this as there are only two hours left until the 7.1 RC commit freeze today.

#6 @wildworks
58 minutes ago

In 63212:

Coding Standards: Lint the About page CSS.

Linting the About page styles with Stylelint reported a number of CSS coding standards violations, and this changeset addresses most of them.

Discussed in: https://github.com/WordPress/wordpress-develop/pull/13014

Follow-up to [63182].

Props afercia, mukesh27, wildworks.
See #65856.

#7 @wildworks
56 minutes ago

  • Keywords dev-feedback added

This is a backport request of [63212] to the 7.1 branch.

Note: See TracTickets for help on using tickets.