WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 months ago

#21536 closed enhancement (wontfix)

Better editor background

Reported by: azaozz Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: TinyMCE Keywords:
Focuses: Cc:

Description

When the editor body has max-width (most newer themes set that) the body in the TinyMCE iframe is aligned left or right (RTL), and the content suddenly stops in the middle (if the browser window is wide). This doesn't look good and is a bit weird and unexpected.

Attachments (2)

editor-bg.png (29.1 KB) - added by azaozz 3 years ago.
21536.patch (1.7 KB) - added by azaozz 3 years ago.

Download all attachments as: .zip

Change History (11)

@azaozz3 years ago

comment:1 @azaozz3 years ago

Centering the body and adding a light background color to the html element looks a lot better (and resembles desktop editors most users are familiar with).


@azaozz3 years ago

comment:2 @azaozz3 years ago

21536.patch adds a centered white background on the html element and centers the body. The same effect can be achieved with CSS 3 (without an actual image) but wouldn't work in IE.

comment:3 @azaozz3 years ago

In [21495]:

Better editor background, take one, see #21536

comment:4 follow-up: @toscho3 years ago

  • Cc info@… added

What I do in my editor stylesheets to stretch the body:

html
{
	background:         #bbb;
	height:             100%;
}
body
{
	max-width:          620px;
	background:         #eee;
	margin:             0 auto;
	padding:            20px;
	min-height:         100%;
	box-sizing:         border-box;
}

Note the box-sizing – it prevents unnecessary scroll bars.

comment:5 in reply to: ↑ 4 @azaozz3 years ago

Replying to toscho:

What I do in my editor stylesheets to stretch the body...

Yeah, tried several similar styles. One problem with them is that when inserting a floated image the body doesn't stretch and looks "broken". Another problem is browser differences: without using background-image the css needs 4 variations to cover all supported browsers (yeah, IE7 too).

A nice way of doing this is to create a "flat" gradient for background-image with css3 instead of using a real image. Not working in IE < 10 though.

Last edited 3 years ago by azaozz (previous) (diff)

comment:6 @azaozz3 years ago

  • Resolution set to wontfix
  • Status changed from new to closed

Wontfix, see [21532].

Last edited 3 years ago by azaozz (previous) (diff)

comment:7 @SergeyBiryukov3 years ago

  • Milestone 3.5 deleted

comment:8 @ircbot9 months ago

This ticket was mentioned in IRC in #wordpress-dev by avryl. View the logs.

comment:9 @ericlewis3 months ago

For reference, two discussions discussed and ended up in a revert on this, 1 and 2.

In summary,

Themes may not be implementing an editor stylesheet, and this was intended as a "sane default" - writing width is 600px and background indicates that.

The gray space shows the user where the editable ends and non-editable area begins.

The centering was intended to create parity with desktop publishing software (i.e. MS Word) for a familiar experience. Centering editable area works in Word because the content width is 100% of the application width. In WordPress, the existence of the admin menu on the left and a right column on the right means that the editor is not 100% of the application width, and may blur the utility / beauty of centering the editable in an editor among many UI pieces on the screen.

Last edited 3 months ago by ericlewis (previous) (diff)
Note: See TracTickets for help on using tickets.