WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#21376 closed enhancement (fixed)

Twenty Twelve: add editor stylesheet

Reported by: lancewillett Owned by: lancewillett
Milestone: 3.5 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: ui-feedback has-patch
Focuses: Cc:

Description

Add editor-style.css to style up the Visual Editor with basic typography and look-and-feel from Twenty Twelve's main stylesheet.

Attachments (6)

21376.diff (6.7 KB) - added by obenland 3 years ago.
Iteration 1
21376.2.diff (6.8 KB) - added by obenland 3 years ago.
Iteration 2
21376.3.diff (6.9 KB) - added by DrewAPicture 3 years ago.
group and selector spacing, etc.
21376.4.diff (6.0 KB) - added by obenland 3 years ago.
Iteration 3
21376.5.diff (2.4 KB) - added by obenland 3 years ago.
21376.6.diff (2.4 KB) - added by obenland 3 years ago.

Download all attachments as: .zip

Change History (23)

comment:1 @DrewAPicture3 years ago

  • Cc xoodrew@… added

@obenland3 years ago

Iteration 1

comment:2 @obenland3 years ago

  • Keywords has-patch added; needs-patch removed

So I added a first patch for the editor style.

Three things:

  • We need to think about how we add the optional font. I approached it by adding two editor stylesheets. One with the font, that gets added optionally and one with the actual editor style. I don't know, can we alter class names inside the editor? Or add a class conditionally?
  • I ran across a few tags that don't have styles yet in the main stylesheet: hr, big, del, ins
  • The comment submit button is not styled. Is that intentional or should we open another ticket for that?

I'd appreciate it if you guys could give the patch a spin and give me feedback! I'll keep testing it with the Theme Unit Test in the meantime.

Thanks,
Konstantin

@obenland3 years ago

Iteration 2

comment:3 @obenland3 years ago

The second iteration completes all existing tags. Tested heavily with Layout Test and Image Test.

Still missing:

  • Styles for hr, big, del, ins
  • Explanation for the second add_editor_style() call

comment:4 @DrewAPicture3 years ago

I realize Core's CSS Coding Standards are still a work in progress, but I think we can at the very least cherry-pick a couple of them to apply in this situation, namely group and selector spacing, as well as making sure selector groups are always multi-line.

Incremental patch attached.

@DrewAPicture3 years ago

group and selector spacing, etc.

comment:6 @lancewillett3 years ago

Noting we'll need the equivalent RTL version as well.

comment:7 @lancewillett3 years ago

In [21389]:

Twenty Twelve: add editor stylesheet, first pass props obenland. See #21376.

RTL version and tweaks to come after more testing.

@obenland3 years ago

Iteration 3

comment:8 follow-up: @obenland3 years ago

21376.4.diff adds RTL support, merges .alignleft margins and respects CSS guidelines (props @DrewAPicture)

comment:9 @lancewillett3 years ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from new to closed

In [21406]:

Twenty Twelve: style hr, big, del, ins in editor stylesheet (and add all except big to style.css also). Fixes #21376.

comment:10 follow-up: @obenland3 years ago

Will editor-style.rtl.css run through #21441?

comment:11 in reply to: ↑ 8 @lancewillett3 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Replying to obenland:

respects CSS guidelines (props @DrewAPicture)

DrewAPicture and obenland, let's stick with our current standard of no lines between style declaration blocks. It's what we've done with previous default themes.

comment:12 in reply to: ↑ 10 @lancewillett3 years ago

Replying to obenland:

Will editor-style.rtl.css run through #21441?

Yes please.

@obenland3 years ago

@obenland3 years ago

comment:13 follow-up: @obenland3 years ago

I'm not sure whether 21376.6.diff is still needed, it's just minor.

Anyway, updated the original patch sans editor-style-rtl.css file.

comment:14 in reply to: ↑ 13 @lancewillett3 years ago

Replying to obenland:

I'm not sure whether 21376.6.diff is still needed, it's just minor.

Anyway, updated the original patch sans editor-style-rtl.css file.

Thanks, we do need the rest of the cleanup (selectors only one per line, etc).

comment:15 @lancewillett3 years ago

In [21409]:

Twenty Twelve: update editor stylesheet, props obenland. See #21376.

comment:16 @lancewillett3 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

Editor styles for v 1.0 are good to go, new issues should be opened in new tickets.

comment:17 @lancewillett3 years ago

In [21566]:

Twenty Twelve: add in missing style.css tag for 'editor-style', see #21376.

Note: See TracTickets for help on using tickets.