Make WordPress Core

Opened 10 years ago

Closed 8 years ago

#39738 closed defect (bug) (fixed)

Twenty Seventeen: Cannot resize image in the post editor due to a css rule

Reported by: mihaivalentin Owned by: SergeyBiryukov
Priority: normal Milestone: 5.0.2
Component: Bundled Theme Version: 4.7.2
Severity: normal Keywords: has-screenshots has-patch fixed-5.0
Cc: Focuses:

Description

WordPress 4.7.2, TwentySeventeen theme, wp-admin, Chrome Windows/Linux latest

  • trying to add an image to a post
  • try to resize using the resize handles

The image does not resize.

After some investigation, the problem is line 336 of editor-styles.css from the twentyseventeen theme. ​https://github.com/WordPress/WordPress/blob/4.7.2/wp-content/themes/twentyseventeen/assets/css/editor-style.css#L336

The problem is that the comment states that it is for IE8, but it is also used in modern browsers. Removing this property works and makes the image resize possible.

Can you please investigate this?

Thanks!

Attachments (2)

39738.diff​ (552 bytes ) - added by audrasjb 8 years ago.
Drop support for IE8 since it's not supported anymore by WordPress Admin and this line is breaking image resizing
39738.gif​ (1.9 MB ) - added by audrasjb 8 years ago.
Removing that line seems to solve the issue

Download all attachments as: .zip

Change History (18)

#1 @swissspidy
10 years ago

  • Component Themes → Bundled Theme
  • Summary Cannot resize image in the post editor, only on twentyseventeen theme, due to a css rule → Twenty Seventeen: Cannot resize image in the post editor due to a css rule

#2 @RDall
8 years ago

  • Keywords needs-patch has-screenshots added

I reported this on the WordPress Forms and can confirm the bug.

​https://wordpress.org/support/topic/can-not-adjust-image-size-without-caption/

Using WordPress 4.7.4
Twenty Seventeen Version: 1.6
PHP 7.2.7
Tried both Chrome & FireFox, three different installs and two different hosting providers. All resulted in the same issue.

See Screencast:
​https://cloudup.com/ieWsxqRouvq

This ticket was mentioned in ​Slack in #core-themes by rdall. ​View the logs.


8 years ago

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


8 years ago

#5 @SergeyBiryukov
8 years ago

  • Milestone Awaiting Review → 4.9.9
  • Owner set to SergeyBiryukov
  • Status new → accepted

@audrasjb
8 years ago

Drop support for IE8 since it's not supported anymore by WordPress Admin and this line is breaking image resizing

@audrasjb
8 years ago

Removing that line seems to solve the issue

#6 @audrasjb
8 years ago

  • Keywords has-patch added; needs-patch removed
  • Version 4.7.2 → 4.9.8

Hi, Welcome to WordPress Trac @mihaivalentin :)

Thanks for the issue, it's a good catch!

I tested removing the CSS declaration you quoted, and it seems to work fine.

I'd say we can remove that line since WordPress Admin doesn't support IE8 anymore.

Cheers,

Jb

#7 @swissspidy
8 years ago

  • Version 4.9.8 → 4.7.2

@audrasjb Note that the version field indicates the version where the issue was first reported or introduced.

#8 @audrasjb
8 years ago

@swissspidy thanks for your feedback and sorry for the mistake.

#9 @pento
8 years ago

  • Milestone 4.9.9 → 5.0.1

#10 @pento
8 years ago

  • Milestone 5.0.1 → 5.0.2

#11 @laurelfulford
8 years ago

#45580 was marked as a duplicate.

#12 @laurelfulford
8 years ago

  • Keywords commit added

Thanks for the report, @mihaivalentin, and for the patch, @audrasjb!

This update fixes the issue for me! As mentioned, the TinyMCE editor no longer supports IE8 -- in that browser only the text view is displayed, so this style isn't doing anything.

#13 @laurelfulford
8 years ago

Adding a note that I made an error in missing that #45580 was a duplicate of this ticket.

@subrataemfluence took the time to create a patch there, and should also get props for the work on this issue (thanks @subrataemfluence!).

#14 @laurelfulford
8 years ago

  • Resolution → fixed
  • Status accepted → closed

In 44205:

Twenty Seventeen: Remove editor style that prevents images from being resized.

Twenty Seventeen’s editor styles contained an Internet Explorer 8 specific fix that stopped images from being scalable in the editor in other browsers. Since the editor no longer supports IE8, this fix can safely be removed.

Props audrasjb, mihaivalentin, subrataemfluence.
Fixes #39738.

#15 @laurelfulford
8 years ago

  • Keywords fixed-5.0 added; commit removed
  • Resolution fixed
  • Status closed → reopened

Reopening and marking fixed-5.0 so that this can be properly merged into trunk.

#16 @desrosj
8 years ago

  • Resolution → fixed
  • Status reopened → closed

In 44307:

Twenty Seventeen: Bug Fixes.

  • Remove unnecessary ol styles from editor. Twenty Seventeen was designed with bolded numbers for its ordered list styles. This was removed from the theme prior to launch, but it was left in the editor styles, so it needed to be removed there, too.
  • To improve accessibility, the cookies content checkbox in the comment form needed some visible indication when it’s in focus.
  • Twenty Seventeen’s editor styles contained an Internet Explorer 8 specific fix that stopped images from being scalable in the editor in other browsers. Since the editor no longer supports IE8, this fix can safely be removed.
  • Fix the font-family used for Simplified Chinese (zh_CN) in the block editor CSS.

Props mmaumio, edpittol, pratikthink, afercia, audrasjb, mihaivalentin, subrataemfluence, vaishalipanchal, ze3kr, laurelfulford.

Merges [44203-44205] and [44235] into trunk.

Fixes #44775, #44699, #39738, #45408.

Note: See TracTickets for help on using tickets.