WordPress.org

Make WordPress Core

Opened 15 months ago

Last modified 7 months ago

#51284 assigned enhancement

Update style for side meta boxes

Reported by: rilwis Owned by: azhiyadev
Milestone: Future Release Priority: normal
Severity: normal Version: 5.5.1
Component: Editor Keywords: has-screenshots good-first-bug needs-patch
Focuses: ui, accessibility Cc:

Description

In the latest version 5.5.1, WordPress adds the arrows to the meta box handles to allows users to move a meta box up or down.

That works nicely for meta boxes below the content area. However, for the side boxes, the arrows takes a lot of space and reduce the space for the meta box title.

The 2nd problem is that the toggle icon (collapse/expand) is different from the Gutenberg panel icon.

I attach a screenshot to see the problems clearer.

Attachments (5)

Screenshot at Sep 10 09-53-24.png (39.7 KB) - added by rilwis 15 months ago.
Screenshot of meta boxes
51284-1.png (143.3 KB) - added by Laxman Prajapati 15 months ago.
Screenshot attached.
51284.png (31.3 KB) - added by afercia 15 months ago.
line.png (28.4 KB) - added by rilwis 14 months ago.
A difference in style of the title line
51284.diff (756 bytes) - added by dhavalparejia 3 months ago.
Created patch.

Download all attachments as: .zip

Change History (22)

@rilwis
15 months ago

Screenshot of meta boxes

#1 @Laxman Prajapati
15 months ago

Hello,

Yes, I see the blank space too much below the "Template" field in the "Post Attributes" section.

The reason for that the below div is getting blank. (Please find attached screenshot.)

<div class="components-panel__row"></div>

And about the Arrow issue @rilwis Which theme you are using?

Thanks,

@Laxman Prajapati
15 months ago

Screenshot attached.

#2 @afercia
15 months ago

  • Focuses accessibility added

#3 follow-up: @rilwis
15 months ago

@laxman-prajapati I'm using eStar theme. I think it happens to all themes, not just eStar.

#4 in reply to: ↑ 3 ; follow-up: @Laxman Prajapati
15 months ago

@rilwis The setting section is providing from your eStar theme. Not from all themes for example you can check with twentytwenty default wordpress theme.

Replying to rilwis:

@laxman-prajapati I'm using eStar theme. I think it happens to all themes, not just eStar.

#5 in reply to: ↑ 4 @rilwis
15 months ago

Replying to Laxman Prajapati:

@rilwis The setting section is providing from your eStar theme. Not from all themes for example you can check with twentytwenty default wordpress theme.

Maybe I didn't explain enough the problem. It's not about the theme or the settings. It's about the styling of custom meta boxes on Gutenberg-enabled edit screen.

If developers add a meta box with a snippet like:

add_meta_box( 'custom-id', 'Custom Title', 'callback_function', 'post', 'side' );

(Note about the parameter side, which makes the meta box appear on the right sidebar, below Gutenberg panels. It's worth noting that, meta boxes are still supported in Gutenberg.)

Then it will appear similar to the screenshot I uploaded. The problems as I said in the first message (and pointed in the screenshot) are:

  • Different styles between collapse/expand arrows in custom meta boxes and Gutenberg panels.
  • Inappropriate size and position of the arrow up/down in custom meta boxes.

#6 @afercia
15 months ago

For the Classic Editor, the size of the reorder buttons was reduced a bit to address a similar issue, see https://core.trac.wordpress.org/changeset/48465

I'd suggest to apply the same CSS also for the block editor, to make these buttons a bit smaller.

Worth noting legacy meta boxes in the sidebar are an edge case. Anyways, a very long title doesn't break: it just spans in multiple lines, see screenshot below.

Regarding the icons: that's an issue for the Editor and Design teams, as Gutenberg uses icons in an inconsistent way than the rest of the admin:

  • in the admin, the "toggle" icons are triangles and in Gutenberg are chevron instead
  • legacy meta boxes still use triangles for the toggle button, also in Gutenberg and this is inconsistent
  • in the admin, the reorder icons are chevrons (see for example widgets and menu items reordering in the Customizer) while in Gutenberg chevrons are used for a variety of purposes

@afercia
15 months ago

#7 @rilwis
15 months ago

@afercia Thanks for the details. They're great.

I agree to apply the same CSS to both classic & block editors for the reorder buttons.

The arrows seem to be a bigger problem.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


15 months ago

#9 @afercia
15 months ago

  • Component changed from General to Editor
  • Keywords good-first-bug added
  • Milestone changed from Awaiting Review to 5.6

This ticket was discussed during today's accessibility bug-scrub: agreed to add the good-first-bug keyword and move this ticket to the 5.6 milestone. We'll see if it needs to be moved to the Gutenberg repository.

#10 follow-up: @sarahricker
14 months ago

  • Owner set to azhiyadev
  • Status changed from new to assigned

#11 in reply to: ↑ 10 @sarahricker
14 months ago

Hauwa(@azhiyadev) is going to give this good-first-bug a shot! 😀
I will be standing by to help out / mentor as needed.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


14 months ago

@rilwis
14 months ago

A difference in style of the title line

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


14 months ago

#14 @audrasjb
14 months ago

  • Keywords needs-patch added
  • Milestone changed from 5.6 to Future Release

Moving this to future release as it still needs a patch.

#15 @sarahricker
10 months ago

Noting that there is some overlap with https://core.trac.wordpress.org/ticket/51419 which needs design. @hedgefield Can we talk these over with design team to get a better handle on how to move forward? Thanks!

#16 @hedgefield
10 months ago

Thanks @sarahricker, I've left my thoughts on the arrow UX in #51419 and propose we use that as the central point of discussion. This ticket can still continue to fix any inconsistent styling issues.

#17 @nigeljoy
7 months ago

Related to this, the icons that rearrange the meta boxes currently hide long page titles.

https://cdn-std.droplr.net/files/acc_1121510/40xjnM

https://d.pr/i/40xjnM

@dhavalparejia
3 months ago

Created patch.

Note: See TracTickets for help on using tickets.