Skip to content
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

Fix pattern preview expanding height and scrollbar issues #38175

Merged
merged 9 commits into from
Jan 24, 2022
Merged

Fix pattern preview expanding height and scrollbar issues #38175

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1ec6190
Apply a 99vh max-height to the thumbnail.
jasmussen Jan 24, 2022
a99db21
Polish
jasmussen Jan 24, 2022
94ff198
Apply pixel based max-height.
jasmussen Jan 24, 2022
46950b9
Don't apply overflow auto to all iframes
Mamaduka Jan 24, 2022
e909ec9
Memoize editor styles
Mamaduka Jan 24, 2022
929e572
Remove no need for iframe changes
Mamaduka Jan 24, 2022
86d9384
Unset height
Mamaduka Jan 24, 2022
5c12d18
Apply max-height to container
Mamaduka Jan 24, 2022
0a62238
Update max-height
Mamaduka Jan 24, 2022
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
27 changes: 26 additions & 1 deletion packages/block-editor/src/components/block-preview/auto.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import { Disabled } from '@wordpress/components';
import { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';
import { useMemo } from '@wordpress/element';

/**
* Internal dependencies
Expand All @@ -16,6 +17,8 @@ import { store } from '../../store';
// This is used to avoid rendering the block list if the sizes change.
let MemoizedBlockList;

const MAX_HEIGHT = 2000;

function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
const [
containerResizeListener,
Expand All @@ -33,6 +36,21 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
};
}, [] );

// Avoid scrollbars for pattern previews.
const editorStyles = useMemo( () => {
if ( styles ) {
return [
...styles,
{
css: 'body{height:auto;overflow:hidden;}',
__unstableType: 'presets',
},
];
}

return styles;
}, [ styles ] );

// Initialize on render instead of module top level, to avoid circular dependency issues.
MemoizedBlockList = MemoizedBlockList || pure( BlockList );

Expand All @@ -46,10 +64,14 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
style={ {
transform: `scale(${ scale })`,
height: contentHeight * scale,
maxHeight:
contentHeight > MAX_HEIGHT
? MAX_HEIGHT * scale
: undefined,
} }
>
<Iframe
head={ <EditorStyles styles={ styles } /> }
head={ <EditorStyles styles={ editorStyles } /> }
assets={ assets }
contentRef={ useRefEffect( ( bodyElement ) => {
const {
Expand All @@ -70,6 +92,9 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
width: viewportWidth,
height: contentHeight,
pointerEvents: 'none',
// This is a catch-all max-height for patterns.
// See: https://github.com/WordPress/gutenberg/pull/38175.
maxHeight: MAX_HEIGHT,
} }
>
{ contentResizeListener }
Expand Down