Skip to content

Make meta boxes inline by default - #84659

Open
brianhogg wants to merge 22 commits into
WordPress:trunkfrom
brianhogg:update/meta-boxes-inline-default
Open

Make meta boxes inline by default#84659
brianhogg wants to merge 22 commits into
WordPress:trunkfrom
brianhogg:update/meta-boxes-inline-default

Conversation

@brianhogg

@brianhogg brianhogg commented Oct 14, 2026 •
edited
Loading

Copy link
Copy Markdown

What?

Closes #79127 and #84587

Makes the meta boxes pane "unpinned" by default, with the option to pin to the bottom. Meta box pane is 50% on open, and maximum 80% on load so the content area is never completely covered unexpectedly.

Why?

Before WordPress 7.0, meta boxes always appeared at the bottom of the content. Meta boxes are now hidden inside a thin "Meta Boxes" panel, confusing users who are looking for the contents of meta boxes containing essential plugin/theme functionality for at least some post types. Also, if the meta boxes area contains a large enough amount of content or the main meta boxes pane was resized to cover the content editing area, users need to know to reduce the size of the meta boxes pane in order to edit content.

How?

  • Meta boxes are "unpinned" and appear when the user scrolls past the content editing area
  • Meta boxes can be "pinned" to provide similar functionality currently found in WP 7.x
  • The meta boxes pane is "pinned" by default for users who have previously resized it
  • First open maxes out at 50% of the window height, and reload maxes at 80%, so the content area always has some visibility unless manually resized to cover the content editing area

I avoided removing the iframe in unpinned mode so editor styles remained separated, and to avoid a redraw.

Testing Instructions

On a fresh WP install or new WP user with administrator role

  1. Install a plugin that adds a tall main meta box, such as LifterLMS.
  2. Create a new Course (or whatever post type the meta box(es) appear on).
  3. Meta boxes appear when scrolling down past the content, whereas they were hidden under the Meta Boxes bar at the bottom previously.
  4. Click (or keyboard tab) to the "Pin to bottom" button and click (or keyboard enter) to activate the pinned mode, as it works in the current WP 7.x versions. Ensure it opens at 50% of the height of the editing area (ie. the area excluding the top bar and the block breadcrumb).
  5. Resize the meta boxes pane to the full window height, covering the content area.
  6. Save/publish the post and refresh the page, observe that the height is 80% so the content area is visible.
  7. Click (or keyboard tab) to the "Unpin" button and click (or keyboard enter) to deactivate pinned mode.
  8. Save the post and refresh, ensuring the unpinned mode persists.
  9. Open to the block Preferences, and toggle "Pin meta boxes to the bottom" under General > Advanced. Ensure it works the same as above.
  10. Ensure clicking below the last block in the content editing area adds a new paragraph block.

On an existing WP install where the main meta boxes pane has been resized

  1. Edit an existing post.
  2. Ensure the meta boxes pane displays at the same height, or at 80% of the window height if it was previously larger than that.

On an existing or new WP install

  1. Create a new post or edit an existing one.
  2. Ensure that new blocks can be added by clicking below the last block, or hovering to reveal the "+" menu.

Testing Instructions for Keyboard

The "pin to bottom" and "unpin" buttons can be accessed via the tab key. Resizing in pinned mode works as before by selecting the meta boxes bar via tab and using the up/down arrows to resize.

Screenshots or screencast

Default view when opening a CPT for the first time

CleanShot 2026-10-13 at 22 18 00@2x

View when scrolling down past the content area

CleanShot 2026-10-14 at 07 56 18@2x

Meta boxes pane is 50% the height of the editing area

CleanShot 2026-10-13 at 22 19 01@2x

New option in the editor Preferences modal

CleanShot 2026-10-13 at 23 06 42@2x

Short video showing the user experience

CleanShot.2026-10-14.at.07.57.38.mp4

Use of AI Tools

Opus 5.5, Grok 4.7 and Fable 5.1 used in scaffolding and review. Final implementation and tests were reviewed by me.

@brianhogg
brianhogg requested a review from ellatrix as a code owner October 14, 2026 02:58
@github-actions github-actions Bot added [Package] Editor /packages/editor [Package] Block editor /packages/block-editor [Package] Edit Post /packages/edit-post [Package] E2E Tests /packages/e2e-tests labels Oct 14, 2026
@github-actions

github-actions Bot commented Oct 14, 2026 •
edited
Loading

Copy link
Copy Markdown

🤖 PR meta 🤖

👋 Welcome

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @brianhogg! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

🎉 Props

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @smerriman, @soapalooza, @natesprout.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: smerriman, soapalooza, natesprout.

Co-authored-by: brianhogg <brianhogg@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: MadtownLems <madtownlems@git.wordpress.org>
Co-authored-by: Mustafabharmal <mustafabharmal@git.wordpress.org>
Co-authored-by: caspervoogt <caspervoogt@git.wordpress.org>
Co-authored-by: jamieburchell <jamieburchell@git.wordpress.org>
Co-authored-by: mrwweb <mrwweb@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

🏷️ Labels

This pull request needs exactly one label indicating its type, and has 0.

  • Required: any label starting with [Type].
  • Found: none.

Read more about Type labels in Gutenberg. If you cannot add labels yourself, a reviewer can do it for you.

@github-actions github-actions Bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Oct 14, 2026
@brianhogg brianhogg mentioned this pull request Oct 14, 2026
Open
3 of 6 tasks
@stokesman

stokesman commented Oct 19, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Thanks for the PR. I like the idea because I know it would please some folks to have the ability to scroll back and forth between the content and meta boxes.

I saw that this works by dynamically sizing the iframe to fit its contents and using a parent container to do the scrolling. This presents a couple of issues:

  1. When the content is taller than the scroll container’s height, units like vh are not true – i.e. 1:1 with the front-end.
  2. If an element's height is set to a vh unit it may create infinite growth of the iframe's height.

When I was testing this I was able to produce the second issue with the Cover block’s built in full height toggle feature. Here's the markup for it you can paste in:

<!-- wp:cover {"isUserOverlayColor":true,"minHeight":100,"minHeightUnit":"vh","layout":{"type":"constrained"}} -->
<div class="wp-block-cover" style="min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"placeholder":"Write title…","style":{"typography":{"textAlign":"center"}},"fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">full height</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

Solving those issues would be challenging. As far as I'm aware no one has ever come up with a performant solution. For instance, see this issue in what's probably the premiere library for dynamically sizing an iframe.

@brianhogg

brianhogg commented Oct 20, 2026

Copy link
Copy Markdown
Author

@stokesman Thanks for the review, and good to hear there's some interest in this solution or something like it.

I was also able to replicate the 100vh issue with the Cover block. The latest version pushed avoids it. The thing that now grows is the container sitting outside the iframe, so there's no finding and rewriting every vh in the document.

Open to any other feedback once there's another chance to review or ideas for an alternate approach.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ellatrix ellatrix Awaiting requested review from ellatrix ellatrix is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Package] Block editor /packages/block-editor [Package] E2E Tests /packages/e2e-tests [Package] Edit Post /packages/edit-post [Package] Editor /packages/editor

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

WP 7.0 Regression: Metaboxes cover full editor on new post screen

2 participants

@brianhogg @stokesman