Make WordPress Core

Opened 7 years ago

Closed 7 years ago

Last modified 19 months ago

#9066 closed defect (bug) (fixed)

editor_plugin.js adds "hard-coded" inline-style for width+10px which makes it hard for theme development

Reported by: sporketeer Owned by: azaozz
Milestone: 3.9 Priority: high
Severity: normal Version:
Component: JavaScript Keywords:
Focuses: Cc:


In /wp-includes/js/tinymce/plugins/wpeditimage/editor_plugin.js in line 122 additional 10 pixels get added to the value entered by a user. This might seem okay if you are using the default theme and some other themes, but it is bad markup making it hard for theme developers to change things around.

Example for a problem:
An image gets uploaded and has a width of 300 pixels. When a caption gets used the following mark-up is being created:

<p><div id="attachment_118" class="wp-caption alignleft" style="width: 310px"><img src="http://www.domain.com/wp-content/uploads/foto-2-300x225.jpg" alt="…

the div has a class and an id so there is no need for inline styles, especially not if it inserts some weird width attribute which someone thought to be appropriate. CSS is great for styling but please leave the styling to the theme's CSS!

So the additional 10 pixels should be taken out, please.

A picture of x pixels in width should be within a div of no size whatsoever, at least not inline styled width.

Thank you!

Change History (3)

comment:1 @azaozz7 years ago

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

This only affects displaying of captions inside the visual editor. For the site the tags are created by the [caption] shortcode. If you want to change the defaults you can add a different function that parses it and use the "img_caption_shortcode" filter to replace the output.

comment:2 @nacin19 months ago

  • Resolution changed from invalid to fixed

In 27668:

Introduce HTML5 caption support.

When a theme supports HTML5 captions via add_theme_support( 'html5', 'caption' ), figure and figcaption will be used instead of div and p.

There's a bonus. But first, some history: Captions were introduced with an inline style set for the container. This remains, as it is there to force captions to wrap. But this inline style included an extra 10 pixels, which have vexxed theme developers for years. While these pixels were designed to ensure padding around floated images, modern themes handle this with grace. The additional pixels thus feel encumbering.

As the new HTML5 gallery support avoids outputting default gallery styles (again, irking theme developers for years; see #26697), the new HTML5 caption support will also ditch these 10 pixels of unwanted hand-holding.

The 10 pixels are also removed entirely in the visual editor (and more styles may also disappear here; see #26642), giving themes the power necessary to match the frontend styles.

The filter img_caption_shortcode_width added in 3.7 to work around this madness (see #14380) is skipped entirely when the theme supports HTML5 captions.

props obenland, azaozz.
see #26642. also fixes #9066.

comment:3 @nacin19 months ago

  • Keywords inline style theme problems removed
  • Milestone changed from 2.7.1 to 3.9
Note: See TracTickets for help on using tickets.