WordPress.org
Get WordPress

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#44713 closed defect (bug) (invalid)

Gutenberg formatting layout and UI errors

Reported by: prmyapps's profile PrmyApps Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Editor Keywords:
Focuses: ui Cc:

Description

I installed Gutenberg today on my localhost on a Mac and using the Chrome browser. My theme is Twenty-Seventeen. I found 5-6 user interface issues and layout problems. I tried searching your database, but with the highly technical summary titles, it is difficult for me to tell if these concerns have already been reported.

I posted screenshots on Instagram at
​https://www.instagram.com/p/BmAR91GgMPH/?utm_source=ig_web_copy_link

the problems in the Guttenberg editor are

  1. When I am in a block, the Text Settings boxes of S M L XL or not highlighted, so I do not know what size text I am using.
  1. The font size is not displayed until I click on a S M L XL box.
  1. If i turn on Drop Cap for a block, the visual editor does not WYSIWIG this until I exit the block
  1. When on the last block, there is no + sign underneath the block to add another block. Instead, I have to go to the end of the paragraph in the last block and press Return. To be consistent, the + sign should be available on the last block.
  1. With Drop Cap On, the layout looks good in the visual editor but the layout in Preview is different.
  1. If the Visual editor is to be WYSIWIG, shouldn't it reflect the theme's format?

Attachments (2)

fullsizeoutput_2266.jpeg​ (1.6 MB) - added by PrmyApps 5 years ago.
visual editor UI
fullsizeoutput_2265.jpeg​ (942.2 KB) - added by PrmyApps 5 years ago.
resulting layout in Preview

Change History (4)

@PrmyApps
5 years ago

visual editor UI

@PrmyApps
5 years ago

resulting layout in Preview

#1 @PrmyApps
5 years ago

the post on instagram is the same screenshots I uploaded here. I didn't realize I could upload them.

#2 @pento
5 years ago

  • Component changed from General to Editor
  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

Thank you for the feedback, @PrmyApps!

Just so you know, we're tracking Gutenberg issues over on the ​Gutenberg repo, but we can go through these ones here. 🙂

1/2: Themes ​will need to specify what they would like each size to be. Without that information, Gutenberg just uses a default font size, which may not match what you see when you preview the post.

3: This is due to a inconsistent and buggy browser behaviour. We ran into issues early on where different browsers had strange issues when rendering the editable view with the drop cap. The best solution was to not show the drop cap when editing, then show it again once you move out of the block.

4: We've iterated on the block inserter a few times, there's still some work to be done here. I agree that there's the potential for confusion when there's no block inserter at the end of the post. Here are some issues for some more context: ​7006, ​7271.

5/6: Much like the Classic Editor ​requires themes to specify styling, Gutenberg has ​similar requirements. Due to some fundamental differences with how the editors function, it's not really possible to automatically re-use theme styles built for the Classic Editor in Gutenberg.

I'm going to close this ticket, but please continue providing feedback over on the ​Gutenberg repo!

Note: See TracTickets for help on using tickets.