WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#41888 closed defect (bug) (invalid)

Code Editor: Warning messages

Reported by: paaljoachim Owned by:
Milestone: Priority: high
Severity: normal Version:
Component: General Keywords: has-patch reporter-feedback
Focuses: ui Cc:

Description

In a style.css file I checked.
There are mysterious messages such as:
6 of the following:
"Using width with padding-left can sometimes make elements larger then you expect."

I also got a warning beside border: 1px solid #ddd
"Using width with border can sometimes make elements larger then you expect."

2 warnings in the following code.
"Outlines should only be modified using :focus. and
"Using width with padding can sometimes make elements larger then you expect."

There was also a very long warning message beside display: box. Basically with a lot of text saying that box is the wrong code to use.

I am hoping that this will be adjusted.

Attachments (5)

41888.0.diff (472 bytes) - added by westonruter 4 years ago.
Code-editing-warnings3.jpg (279.3 KB) - added by paaljoachim 4 years ago.
Code-Editor-Outline-none-CSS.png (32.7 KB) - added by paaljoachim 4 years ago.
Code-editor-warnings.png (55.1 KB) - added by paaljoachim 4 years ago.
Code-editor-warnings2.jpg (155.0 KB) - added by paaljoachim 4 years ago.

Download all attachments as: .zip

Change History (18)

This ticket was mentioned in Slack in #core-customize by paaljoachim. View the logs.


4 years ago

#2 @westonruter
4 years ago

  • Milestone changed from Awaiting Review to 4.9
  • Type changed from enhancement to defect (bug)

Some additional CSSLint rules probably need to be disabled.

#3 @adnan.limdi
4 years ago

  • Focuses ui added

#4 @westonruter
4 years ago

  • Summary changed from Better Code Editing: Warning messages to Code Editor: Warning messages

@westonruter
4 years ago

#5 @westonruter
4 years ago

  • Keywords has-patch reporter-feedback added

@paaljoachim the CSSLint rules being raised for you are:

The box-model one can probably safely be removed, but the outline-none one seems like a key one to keep for a11y.

What is the CSS being flagged by the outline-none rule? Is it in fact incorrect?

#6 @paaljoachim
4 years ago

Hey Weston

* I uploaded the images to trac and relinked them. Hopefully they will show up this time. *

Regarding display: box;
Warning message begins with: Expected (inline I block I list-item...and many other options and ends with I webkit-inline-flex) but found 'box'.

https://core.trac.wordpress.org/raw-attachment/ticket/41888/Code-editor-warnings2.jpg

Regarding outline: none
The CSS in use:

! .genesis-nav-menu .sub-menu a {
	background-color: #111;
	outline: none;
!	padding: 20px;
	position: relative;
	width: 200px;
}

The yellow circle with the ! in it is next to the class name. The warning message says Outlines should only be modified using: focus. There is also a ! next to padding and the warning message there which says "Using width with padding can sometimes make elements larger then you expect."

https://core.trac.wordpress.org/raw-attachment/ticket/41888/Code-Editor-Outline-none-CSS.png

There is also an ! next to a filter.
CSS:

.with-background-image:after {
	-ms-filter: "alpha(Opacity=30)";
!	filter: alpha(opacity=30);
	opacity: 0.30;
}

Expected (<filter-function-list> I none) but found 'alpha(opacity=30)'.

Which to me gives no meaning. If it instead could suggest a better way to code the filter then that would be helpful.

Btw
Regarding the "fatal" error.

.page-header .entry-meta {
		font-size: 1.6ren;
	}

The X is listed beside the ren. As I changed it to rem a dropdown with a very long list of options showed up.

https://core.trac.wordpress.org/raw-attachment/ticket/41888/Code-editor-warnings.png

Btw
Here is the warning at the beginning of the CSS. (Genesis child themes have a ton of CSS which just looks like it is minimized at the opening of the coding area of the CSS.)

https://core.trac.wordpress.org/raw-attachment/ticket/41888/Code-editing-warnings3.jpg

Last edited 4 years ago by paaljoachim (previous) (diff)

#7 @westonruter
4 years ago

@paaljoachim none of your images are showing up.

This ticket was mentioned in Slack in #core by paaljoachim. View the logs.


4 years ago

#9 @afercia
4 years ago

Re: display: box; at line 1231: box is not a valid value for the display property, the error message is correct.

#10 @paaljoachim
4 years ago

I am thinking that some of the warnings are correct but the way it lists a full block of code on hover does not really help, but instead creates code overload. It would be good to cut down on the messages and also show the ones that are really needed and then show as precise as possible messages. Bottom line is to keep warning and errors messages helpful and short.

#11 @afercia
4 years ago

As far as I know, the way errors and warnings are reported is how the CodeMirror "UI" works. I guess any change should be evaluated and implemented upstream. Not to argue, this is one of the things that should always be evaluated before adopting a library.

#12 @westonruter
4 years ago

  • Priority changed from normal to high

Bumping priority to high for visibility and alignment with 4.9 goals, and given proximity to beta 1 deadline.

#13 @melchoyce
4 years ago

  • Milestone 4.9 deleted
  • Resolution set to invalid
  • Status changed from new to closed

Since it looks like these errors are correct, I'm going to close this out.

If we need to adjust the CSSLint rules we're including, let's make a new ticket for that.

Note: See TracTickets for help on using tickets.