WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 11 months 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
Milestone: 5.0.2 Priority: normal
Severity: normal Version: 4.7.2
Component: Bundled Theme Keywords: has-screenshots has-patch fixed-5.0
Focuses: Cc:
PR Number:

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 15 months 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 15 months ago.
Removing that line seems to solve the issue

Download all attachments as: .zip

Change History (18)

#1 @swissspidy
3 years ago

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

#2 @RDall
15 months 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.


15 months ago

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


15 months ago

#5 @SergeyBiryukov
15 months ago

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

@audrasjb
15 months ago

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

@audrasjb
15 months ago

Removing that line seems to solve the issue

#6 @audrasjb
15 months ago

  • Keywords has-patch added; needs-patch removed
  • Version changed from 4.7.2 to 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
15 months ago

  • Version changed from 4.9.8 to 4.7.2

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

#8 @audrasjb
15 months ago

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

#9 @pento
14 months ago

  • Milestone changed from 4.9.9 to 5.0.1

#10 @pento
11 months ago

  • Milestone changed from 5.0.1 to 5.0.2

#11 @laurelfulford
11 months ago

#45580 was marked as a duplicate.

#12 @laurelfulford
11 months 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
11 months 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
11 months ago

  • Resolution set to fixed
  • Status changed from accepted to 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
11 months ago

  • Keywords fixed-5.0 added; commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

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

#16 @desrosj
11 months ago

  • Resolution set to fixed
  • Status changed from reopened to 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.