Skip to content

Block editor canvas iframe: play around with restricting max height of iframe #58484

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ramonjd wants to merge 2 commits into from
Closed

Block editor canvas iframe: play around with restricting max height of iframe #58484

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
12b141a
An experiment only:
ramonjd Jan 31, 2024
6cb5794
Update editor-canvas.js
ramonjd Jan 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions packages/block-editor/src/components/iframe/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ function Iframe( {
scale = 1,
frameSize = 0,
expand = false,
maxHeight,
readonly,
forwardedRef: ref,
...props
Expand Down Expand Up @@ -239,7 +240,12 @@ function Iframe( {
// We need to counter the margin created by scaling the iframe. If the scale
// is e.g. 0.45, then the top + bottom margin is 0.55 (1 - scale). Just the
// top or bottom margin is 0.55 / 2 ((1 - scale) / 2).
const marginFromScaling = ( contentHeight * ( 1 - scale ) ) / 2;
// const maxHeight = props.style?.maxHeight || 0;
const maxContentHeight =
maxHeight && contentHeight > maxHeight
? maxHeight / ( 1 - scale )
Copy link
Member Author

@ramonjd ramonjd Jan 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Scale the maxHeight.

Copy link
Member Author

@ramonjd ramonjd Jan 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wondering if we could get the container height using DOM API here instead 🤷🏻

Would save all the ref passing and other chicanery

: contentHeight;
const marginFromScaling = ( maxContentHeight * ( 1 - scale ) ) / 2;

return (
<>
Expand All @@ -250,7 +256,7 @@ function Iframe( {
style={ {
border: 0,
...props.style,
height: expand ? contentHeight : props.style?.height,
height: expand ? maxContentHeight : props.style?.height,
marginTop:
scale !== 1
? -marginFromScaling + frameSize
Expand All @@ -263,7 +269,7 @@ function Iframe( {
scale !== 1
? `scale( ${ scale } )`
: props.style?.transform,
transition: 'all .3s',
transition: props.style?.transition || 'all .3s',
} }
ref={ useMergeRefs( [ ref, setRef ] ) }
tabIndex={ tabIndex }
Expand Down
17 changes: 15 additions & 2 deletions packages/edit-site/src/components/block-editor/editor-canvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,13 @@ import {

const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );

function EditorCanvas( { enableResizing, settings, children, ...props } ) {
function EditorCanvas( {
enableResizing,
settings,
children,
containerHeight,
...props
} ) {
const { hasBlocks, isFocusMode, templateType, canvasMode, isZoomOutMode } =
useSelect( ( select ) => {
const { getBlockCount, __unstableGetEditorMode } =
Expand Down Expand Up @@ -109,13 +115,20 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
iframeProps={ {
expand: isZoomOutMode,
scale: isZoomOutMode ? 0.45 : undefined,
frameSize: isZoomOutMode ? 100 : undefined,
frameSize: isZoomOutMode ? 50 : undefined,
className: classnames(
'edit-site-visual-editor__editor-canvas',
{
'is-focused': isFocused && canvasMode === 'view',
}
),
maxHeight:
isZoomOutMode && containerHeight
Copy link
Member Author

@ramonjd ramonjd Jan 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess we wouldn't want to set a maxHeight in isZoomOutMode always.

Right now I'm just testing in the site editor when browsing styles.

? containerHeight
: undefined,
style: {
transition: isZoomOutMode ? 'none' : undefined,
},
...props,
...( canvasMode === 'view' ? viewModeProps : {} ),
} }
Expand Down
25 changes: 22 additions & 3 deletions packages/edit-site/src/components/block-editor/site-editor-canvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,12 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { useViewportMatch, useResizeObserver } from '@wordpress/compose';

import {
useViewportMatch,
useResizeObserver,
useRefEffect,
} from '@wordpress/compose';
import { useState } from '@wordpress/element';
/**
* Internal dependencies
*/
Expand Down Expand Up @@ -59,12 +63,25 @@ export default function SiteEditorCanvas() {
const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
const forceFullHeight = isNavigationFocusMode;
const [ containerHeight, setContainerHeight ] = useState();
const containerRef = useRefEffect(
Copy link
Member Author

@ramonjd ramonjd Jan 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I expect this is not ideal.

It's a lot of faffery just to passing down the iframe container's height.

Maybe we pass down the ref? 🤷🏻

( node ) => {
if ( ! node && ! node?.offsetHeight ) {
return;
}
setContainerHeight( node?.offsetHeight );
},
[ window.innerHeight ]
);

return (
<EditorCanvasContainer.Slot>
{ ( [ editorCanvasView ] ) =>
editorCanvasView ? (
<div className="edit-site-visual-editor is-focus-mode">
<div
className="edit-site-visual-editor is-focus-mode"
ref={ containerRef }
>
{ editorCanvasView }
</div>
) : (
Expand All @@ -73,6 +90,7 @@ export default function SiteEditorCanvas() {
'is-focus-mode': isFocusMode || !! editorCanvasView,
'is-view-mode': isViewMode,
} ) }
ref={ containerRef }
>
<BackButton />
<ResizableEditor
Expand All @@ -86,6 +104,7 @@ export default function SiteEditorCanvas() {
<EditorCanvas
enableResizing={ enableResizing }
settings={ settings }
containerHeight={ containerHeight }
>
{ resizeObserver }
</EditorCanvas>
Expand Down