WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 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 4 years ago.
Iteration 1
21376.2.diff (6.8 KB) - added by obenland 4 years ago.
Iteration 2
21376.3.diff (6.9 KB) - added by DrewAPicture 4 years ago.
group and selector spacing, etc.
21376.4.diff (6.0 KB) - added by obenland 4 years ago.
Iteration 3
21376.5.diff (2.4 KB) - added by obenland 4 years ago.
21376.6.diff (2.4 KB) - added by obenland 4 years ago.

Download all attachments as: .zip

Change History (23)

#1 @DrewAPicture
4 years ago

  • Cc xoodrew@… added

@obenland
4 years ago

Iteration 1

#2 @obenland
4 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

@obenland
4 years ago

Iteration 2

#3 @obenland
4 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

#4 @DrewAPicture
4 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.

@DrewAPicture
4 years ago

group and selector spacing, etc.

#5 @obenland
4 years ago

Related: #21399

#6 @lancewillett
4 years ago

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

#7 @lancewillett
4 years ago

In [21389]:

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

RTL version and tweaks to come after more testing.

@obenland
4 years ago

Iteration 3

#8 follow-up: @obenland
4 years ago

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

#9 @lancewillett
4 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.

#10 follow-up: @obenland
4 years ago

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

#11 in reply to: ↑ 8 @lancewillett
4 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.

#12 in reply to: ↑ 10 @lancewillett
4 years ago

Replying to obenland:

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

Yes please.

@obenland
4 years ago

@obenland
4 years ago

#13 follow-up: @obenland
4 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.

#14 in reply to: ↑ 13 @lancewillett
4 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).

#15 @lancewillett
4 years ago

In [21409]:

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

#16 @lancewillett
4 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.

#17 @lancewillett
4 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.