Gutenberg 23.7 includes a fix for floated blocks overlapping sticky blocks. Sites with editorial floats, sticky sidebars, Table of Contents blocks, ads, related-content widgets, or theme CSS should retest the exact collision because local stacking contexts and widths can still produce site-specific failures.
Use this for editorial themes, documentation sites, newsrooms, affiliate sites, ad-supported publishers, and plugins that add sticky or floated block behavior.
Quick answer
Build one page containing left and right floated images, long captions, a sticky sibling, nested Groups, a Table of Contents block, and enough text to scroll. Test editor and frontend at boundary widths in LTR and RTL, with admin bar present, at 100 and 200 percent zoom, and in supported browsers. Record bounding boxes and computed position, float, clear, overflow, transform, and z-index values.
Test scenarios to run
Run the same controlled fixture across these branches. Write down the expected result before testing so a surprising response is easy to identify.
| Scenario | Fixture | Expected result |
|---|
| Float direction | Left and right floated images with captions | Sticky content never covers the media, caption, or adjacent text |
| Stacking context | Parent with transform, overflow, contain, and z-index | Sticky behavior stays inside the intended containing block |
| Responsive | Widths around every wrap and column breakpoint | No collision, jump, clipped focus ring, or unreadable line occurs |
| Accessibility | Keyboard navigation and 200 percent zoom | Focused links and controls remain visible and operable |
Diagnostic table
Use this table to connect the observed behavior to evidence and a verification step.
| Action | Evidence to collect | How to verify |
|---|
| Build the collision fixture | Create left-float and right-float fixtures beside sticky blocks with long headings, captions, lists, and links. | Floated and sticky bounding rectangles do not overlap while scrolling. |
| Map containing blocks | Include parent Groups with overflow, transform, position, contain, and z-index rules used by the production theme. | Long captions, headings, links, and lists remain readable at boundary widths. |
| Test boundary widths | Test just below, at, and above the widths where text wrapping or column layout changes. | Keyboard focus stays visible at 200 percent zoom in LTR and RTL. |
| Compare editor and frontend | Compare the editor canvas and public frontend in LTR, RTL, logged-in, and logged-out states. | Editor, logged-in frontend, and logged-out frontend produce the approved layout. |
What to check first
- Create left-float and right-float fixtures beside sticky blocks with long headings, captions, lists, and links.
- Include parent Groups with overflow, transform, position, contain, and z-index rules used by the production theme.
- Test just below, at, and above the widths where text wrapping or column layout changes.
- Compare the editor canvas and public frontend in LTR, RTL, logged-in, and logged-out states.
- Use browser geometry or screenshots to prove blocks do not overlap or hide interactive content while scrolling.
Field notes
- Capture the first viewport where the bounding rectangles intersect, not only a wide desktop screenshot.
- Test real headlines and translated text because wrapping creates the failure condition.
- Remove temporary CSS only after the Core fix passes the production fixture.
Useful command or data shape
Adapt paths, IDs, and privacy handling to the site before running commands or storing data on production.
// Browser console fixture
const floated = document.querySelector('.wp-block-image.alignleft, .wp-block-image.alignright');
const sticky = document.querySelector('.is-position-sticky');
console.table({
floated: floated?.getBoundingClientRect().toJSON(),
sticky: sticky?.getBoundingClientRect().toJSON()
});
Why this usually happens
- Floats change how inline content wraps while sticky positioning depends on scroll containers and containing blocks.
- Transform, overflow, contain, and z-index can create local stacking or clipping behavior that Core cannot infer from a theme.
- Editor styles, admin-bar offsets, and frontend CSS can use different selectors and dimensions.
Decision rule
Hold the update or keep the narrow workaround when bounding rectangles overlap, sticky content leaves its container, focus is covered, RTL reverses the intended result, or editor and frontend disagree.
Production verification checklist
- Floated and sticky bounding rectangles do not overlap while scrolling.
- Long captions, headings, links, and lists remain readable at boundary widths.
- Keyboard focus stays visible at 200 percent zoom in LTR and RTL.
- Editor, logged-in frontend, and logged-out frontend produce the approved layout.
Safe fix order
Use a sequence that makes each result easy to prove. Stop when new evidence changes the scope or owner of the problem.
- Build the collision fixture
- Map containing blocks
- Test boundary widths
- Compare editor and frontend
- Remove only proven workarounds
Mistakes to avoid
- Do not test with short placeholder text only.
- Do not add a site-wide z-index increase before identifying the stacking context.
- Do not verify only the editor or only one desktop width.
- Do not remove an existing workaround until the exact production fixture passes.
Questions teams ask during testing
Was the overlap fixed in Gutenberg 23.7?
The release notes include a fix for floated blocks overlapping sticky blocks, but theme-specific CSS still needs a regression test.
Why test the admin bar?
Logged-in frontend pages have an additional fixed element and offset that can change sticky positioning.
Why test RTL?
Float direction, logical properties, and text wrapping can produce a different collision path.
What to tell the client or owner
Share the page, blocks, viewport, scroll position, direction, browser, computed position and overflow values, bounding rectangles, and editor and frontend screenshots.
When HandL WP should help
HandL WP can create exact block and CSS fixtures, capture geometry across viewports, isolate stacking contexts, and validate a narrow production fix.
If this is active on a production site, diagnose a Gutenberg layout regression.
Related HandL WP guides
Use these related guides when the same issue touches tracking, security, checkout, or crawler visibility.
Compare every responsive preview with the public page
Run the broader Gutenberg 23.7 responsive viewport matrix across fixed mobile, tablet, desktop, and breakpoint-boundary widths before approving editor layout changes.
Helpful references