Skip to content

Commit

Permalink
Fix support of sticky position in non-iframed post editor (#53540)
Browse files Browse the repository at this point in the history
* Fix support of sticky position in non-iframed post editor
  • Loading branch information
stokesman authored and tellthemachines committed Aug 31, 2023
1 parent 7605074 commit c81f322
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 9 deletions.
17 changes: 9 additions & 8 deletions packages/edit-post/src/components/visual-editor/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -338,11 +338,19 @@ export default function VisualEditor( { styles } ) {
.is-root-container.alignfull { max-width: none; margin-left: auto; margin-right: auto;}
.is-root-container.alignfull:where(.is-layout-flow) > :not(.alignleft):not(.alignright) { max-width: none;}`;

const isToBeIframed =
( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) &&
! hasMetaBoxes ) ||
isTemplateMode ||
deviceType === 'Tablet' ||
deviceType === 'Mobile';

return (
<BlockTools
__unstableContentRef={ ref }
className={ classnames( 'edit-post-visual-editor', {
'is-template-mode': isTemplateMode,
'has-inline-canvas': ! isToBeIframed,
} ) }
>
<VisualEditorGlobalKeyboardShortcuts />
Expand All @@ -359,14 +367,7 @@ export default function VisualEditor( { styles } ) {
className={ previewMode }
>
<MaybeIframe
shouldIframe={
( ( hasV3BlocksOnly ||
( isGutenbergPlugin && isBlockBasedTheme ) ) &&
! hasMetaBoxes ) ||
isTemplateMode ||
deviceType === 'Tablet' ||
deviceType === 'Mobile'
}
shouldIframe={ isToBeIframed }
contentRef={ contentRef }
styles={ styles }
>
Expand Down
6 changes: 5 additions & 1 deletion packages/edit-post/src/components/visual-editor/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@
position: relative;
display: flex;
flex-flow: column;
overflow: hidden;
// In the iframed canvas this keeps extra scrollbars from appearing (when block toolbars overflow). In the
// legacy (non-iframed) canvas, overflow must not be hidden in order to maintain support for sticky positioning.
&:not(.has-inline-canvas) {
overflow: hidden;
}

// Gray preview overlay (desktop/tablet/mobile) is intentionally not set on an element with scrolling content like
// interface-interface-skeleton__content. This causes graphical glitches (flashes of the background color)
Expand Down

0 comments on commit c81f322

Please sign in to comment.