WordPress.org

Make WordPress Core

Opened 7 weeks ago

Last modified 9 days 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 (4)

Screenshot at Sep 10 09-53-24.png (39.7 KB) - added by rilwis 7 weeks ago.
Screenshot of meta boxes
51284-1.png (143.3 KB) - added by Laxman Prajapati 6 weeks ago.
Screenshot attached.
51284.png (31.3 KB) - added by afercia 6 weeks ago.
line.png (28.4 KB) - added by rilwis 2 weeks ago.
A difference in style of the title line

Download all attachments as: .zip

Change History (18)

@rilwis
7 weeks ago

Screenshot of meta boxes

#1 @Laxman Prajapati
6 weeks 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
6 weeks ago

Screenshot attached.

#2 @afercia
6 weeks ago

  • Focuses accessibility added

#3 follow-up: @rilwis
6 weeks 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
6 weeks 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
6 weeks 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
6 weeks 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
6 weeks ago

#7 @rilwis
5 weeks 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.


5 weeks ago

#9 @afercia
5 weeks 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
2 weeks ago

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

#11 in reply to: ↑ 10 @sarahricker
2 weeks 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.


2 weeks ago

@rilwis
2 weeks ago

A difference in style of the title line

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


9 days ago

#14 @audrasjb
9 days ago

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

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

Note: See TracTickets for help on using tickets.