Update style for side meta boxes

[rilwis]

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.

[rilwis]

Screenshot of meta boxes

[Laxman Prajapati]

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]

Screenshot attached.

[rilwis]

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

[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.

Replying to rilwis:

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

[rilwis]

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.

[afercia]

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

[rilwis]

@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.

[afercia]

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.

[sarahricker]

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

[rilwis]

A difference in style of the title line

[audrasjb]

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

[sarahricker]

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!

[hedgefield]

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.

[nigeljoy]

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

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

[dhavalparejia]

Created patch.