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

Update query block creation and replacement flows #38997

Merged
merged 12 commits into from
Apr 11, 2022
Merged

Update query block creation and replacement flows #38997

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
62b7e25
Update query block creation and replacement flows
jorgefilipecosta Feb 22, 2022
aacef86
Keep option to choose between carousel and grid
jorgefilipecosta Apr 1, 2022
36d72fc
Update design
jorgefilipecosta Apr 7, 2022
535ca60
Adjust modal styling
jameskoster Apr 7, 2022
fd389ea
Maintain a two column layout on small screens
jameskoster Apr 7, 2022
84d46f0
Enhance design
jorgefilipecosta Apr 7, 2022
6b41b9c
Fix background on the site editor.
jorgefilipecosta Apr 8, 2022
426f294
Action positioning
jameskoster Apr 8, 2022
d021c42
Fix double scroll on grid view
jorgefilipecosta Apr 8, 2022
71b7b79
Fix: Background on some resolutions
jorgefilipecosta Apr 8, 2022
26b8740
Fix white flash between slides
jameskoster Apr 8, 2022
459dcf3
Fix end to end tests
jorgefilipecosta Apr 8, 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
143 changes: 84 additions & 59 deletions packages/block-editor/src/components/block-pattern-setup/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
} from '@wordpress/components';

import { useState } from '@wordpress/element';
import { useInstanceId } from '@wordpress/compose';
import { useInstanceId, useResizeObserver } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';

/**
Expand All @@ -28,6 +28,7 @@ const SetupContent = ( {
activeSlide,
patterns,
onBlockPatternSelect,
height,
} ) => {
const composite = useCompositeState();
const containerClass = 'block-editor-block-pattern-setup__container';
Expand All @@ -38,41 +39,52 @@ const SetupContent = ( {
[ activeSlide + 1, 'next-slide' ],
] );
return (
<div className={ containerClass }>
<ul className="carousel-container">
{ patterns.map( ( pattern, index ) => (
<BlockPatternSlide
className={ slideClass.get( index ) || '' }
key={ pattern.name }
pattern={ pattern }
/>
) ) }
</ul>
<div
className="block-editor-block-pattern-setup__carousel"
style={ { height } }
>
<div className={ containerClass }>
<ul className="carousel-container">
{ patterns.map( ( pattern, index ) => (
<BlockPatternSlide
className={ slideClass.get( index ) || '' }
key={ pattern.name }
pattern={ pattern }
minHeight={ height }
/>
) ) }
</ul>
</div>
</div>
);
}
return (
<Composite
{ ...composite }
role="listbox"
className={ containerClass }
aria-label={ __( 'Patterns list' ) }
<div
style={ { height } }
className="block-editor-block-pattern-setup__grid"
>
{ patterns.map( ( pattern ) => (
<BlockPattern
key={ pattern.name }
pattern={ pattern }
onSelect={ onBlockPatternSelect }
composite={ composite }
/>
) ) }
</Composite>
<Composite
{ ...composite }
role="listbox"
className={ containerClass }
aria-label={ __( 'Patterns list' ) }
>
{ patterns.map( ( pattern ) => (
<BlockPattern
key={ pattern.name }
pattern={ pattern }
onSelect={ onBlockPatternSelect }
composite={ composite }
/>
) ) }
</Composite>
</div>
);
};

function BlockPattern( { pattern, onSelect, composite } ) {
const baseClassName = 'block-editor-block-pattern-setup-list';
const { blocks, title, description, viewportWidth = 700 } = pattern;
const { blocks, description, viewportWidth = 700 } = pattern;
const descriptionId = useInstanceId(
BlockPattern,
`${ baseClassName }__item-description`
Expand All @@ -94,9 +106,6 @@ function BlockPattern( { pattern, onSelect, composite } ) {
blocks={ blocks }
viewportWidth={ viewportWidth }
/>
<div className={ `${ baseClassName }__item-title` }>
{ title }
</div>
</CompositeItem>
{ !! description && (
<VisuallyHidden id={ descriptionId }>
Expand All @@ -107,7 +116,7 @@ function BlockPattern( { pattern, onSelect, composite } ) {
);
}

function BlockPatternSlide( { className, pattern } ) {
function BlockPatternSlide( { className, pattern, minHeight } ) {
const { blocks, title, description } = pattern;
const descriptionId = useInstanceId(
BlockPatternSlide,
Expand All @@ -119,7 +128,10 @@ function BlockPatternSlide( { className, pattern } ) {
aria-label={ title }
aria-describedby={ description ? descriptionId : undefined }
>
<BlockPreview blocks={ blocks } __experimentalLive />
<BlockPreview
blocks={ blocks }
__experimentalMinHeight={ minHeight }
/>
{ !! description && (
<VisuallyHidden id={ descriptionId }>
{ description }
Expand All @@ -141,6 +153,10 @@ const BlockPatternSetup = ( {
const [ showBlank, setShowBlank ] = useState( false );
const { replaceBlock } = useDispatch( blockEditorStore );
const patterns = usePatternsSetup( clientId, blockName, filterPatternsFn );
const [
contentResizeListener,
{ height: contentHeight },
] = useResizeObserver();

if ( ! patterns?.length || showBlank ) {
return startBlankComponent;
Expand All @@ -152,35 +168,44 @@ const BlockPatternSetup = ( {
};
const onPatternSelectCallback =
onBlockPatternSelect || onBlockPatternSelectDefault;
const onStartBlank = startBlankComponent
? () => {
setShowBlank( true );
}
: undefined;
return (
<div
className={ `block-editor-block-pattern-setup view-mode-${ viewMode }` }
>
<SetupToolbar
viewMode={ viewMode }
setViewMode={ setViewMode }
activeSlide={ activeSlide }
totalSlides={ patterns.length }
handleNext={ () => {
setActiveSlide( ( active ) => active + 1 );
} }
handlePrevious={ () => {
setActiveSlide( ( active ) => active - 1 );
} }
onBlockPatternSelect={ () => {
onPatternSelectCallback( patterns[ activeSlide ].blocks );
} }
onStartBlank={ () => {
setShowBlank( true );
} }
/>
<SetupContent
viewMode={ viewMode }
activeSlide={ activeSlide }
patterns={ patterns }
onBlockPatternSelect={ onPatternSelectCallback }
/>
</div>
<>
{ contentResizeListener }
<div
className={ `block-editor-block-pattern-setup view-mode-${ viewMode }` }
>
<SetupContent
viewMode={ viewMode }
activeSlide={ activeSlide }
patterns={ patterns }
onBlockPatternSelect={ onPatternSelectCallback }
height={ contentHeight - 2 * 60 }
/>
<SetupToolbar
viewMode={ viewMode }
setViewMode={ setViewMode }
activeSlide={ activeSlide }
totalSlides={ patterns.length }
handleNext={ () => {
setActiveSlide( ( active ) => active + 1 );
} }
handlePrevious={ () => {
setActiveSlide( ( active ) => active - 1 );
} }
onBlockPatternSelect={ () => {
onPatternSelectCallback(
patterns[ activeSlide ].blocks
);
} }
onStartBlank={ onStartBlank }
/>
</div>
</>
);
};

Expand Down
4 changes: 3 additions & 1 deletion packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ import { VIEWMODES } from './constants';

const Actions = ( { onStartBlank, onBlockPatternSelect } ) => (
<div className="block-editor-block-pattern-setup__actions">
<Button onClick={ onStartBlank }>{ __( 'Start blank' ) }</Button>
{ onStartBlank && (
<Button onClick={ onStartBlank }>{ __( 'Start blank' ) }</Button>
) }
<Button variant="primary" onClick={ onBlockPatternSelect }>
{ __( 'Choose' ) }
</Button>
Expand Down
58 changes: 32 additions & 26 deletions packages/block-editor/src/components/block-pattern-setup/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@
align-items: flex-start;
width: 100%;
border-radius: $radius-block-ui;
box-shadow: inset 0 0 0 $border-width $gray-900;
outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.

// TODO change to check parent.
&.view-mode-grid {
Expand All @@ -15,37 +13,41 @@
}

.block-editor-block-pattern-setup__container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: $grid-unit-20;
padding: $grid-unit-20;
max-height: 550px;
overflow: auto;
margin: 0 $border-width $border-width $border-width;
width: calc(100% - #{ $border-width * 2 });
background: $white;
column-gap: $grid-unit-30;
display: block;
width: 100%;
padding: $grid-unit-40;
column-count: 2;

@include break-huge() {
column-count: 3;
}

.block-editor-block-preview__container,
div[role="button"] {
cursor: pointer;
}

.block-editor-block-pattern-setup-list__item-title {
padding: $grid-unit-05;
font-size: $helptext-font-size;
text-align: center;
}
.block-editor-block-pattern-setup-list__list-item {
break-inside: avoid-column;
margin-bottom: $grid-unit-30;

.block-editor-block-preview__container {
min-height: 100px;
border-radius: $radius-block-ui;
border: $border-width solid $gray-300;
}

.block-editor-block-preview__container {
border-radius: $radius-block-ui;
border: $border-width solid $gray-300;
.block-editor-block-preview__content {
width: 100%;
}
}
}
}

.block-editor-block-pattern-setup__toolbar {
height: $header-height;
box-sizing: border-box;
position: relative;
padding: $grid-unit-20;
width: 100%;
text-align: left;
Expand All @@ -54,13 +56,12 @@
// Block UI appearance.
border-radius: $radius-block-ui $radius-block-ui 0 0;
background-color: $white;
box-shadow: inset 0 0 0 $border-width $gray-900;
outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.

display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-top: 1px solid $gray-300;
align-self: flex-end;

.block-editor-block-pattern-setup__display-controls {
display: flex;
Expand Down Expand Up @@ -93,13 +94,12 @@
box-sizing: border-box;
}
.pattern-slide {
opacity: 0;
position: absolute;
top: 0;
width: 100%;
margin: auto;
padding: $grid-unit-20;
transition: transform 0.5s, opacity 0.5s, z-index 0.5s;
padding: 0;
transition: transform 0.5s, z-index 0.5s;
z-index: z-index(".block-editor-block-pattern-setup .pattern-slide");

&.active-slide {
Expand All @@ -125,3 +125,9 @@
}
}
}

.block-editor-block-pattern-setup__carousel,
.block-editor-block-pattern-setup__grid {
width: 100%;
overflow-y: auto;
}
11 changes: 10 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 @@ -19,7 +19,11 @@ let MemoizedBlockList;

const MAX_HEIGHT = 2000;

function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
function AutoBlockPreview( {
viewportWidth,
__experimentalPadding,
__experimentalMinHeight,
} ) {
const [
containerResizeListener,
{ width: containerWidth },
Expand Down Expand Up @@ -68,6 +72,7 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
contentHeight > MAX_HEIGHT
? MAX_HEIGHT * scale
: undefined,
minHeight: __experimentalMinHeight,
} }
>
<Iframe
Expand Down Expand Up @@ -98,6 +103,10 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
// This is a catch-all max-height for patterns.
// See: https://github.com/WordPress/gutenberg/pull/38175.
maxHeight: MAX_HEIGHT,
minHeight:
scale < 1 && __experimentalMinHeight
? __experimentalMinHeight / scale
: __experimentalMinHeight,
} }
>
{ contentResizeListener }
Expand Down
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/block-preview/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export function BlockPreview( {
viewportWidth = 1200,
__experimentalLive = false,
__experimentalOnClick,
__experimentalMinHeight,
} ) {
const originalSettings = useSelect(
( select ) => select( blockEditorStore ).getSettings(),
Expand All @@ -51,6 +52,7 @@ export function BlockPreview( {
<AutoHeightBlockPreview
viewportWidth={ viewportWidth }
__experimentalPadding={ __experimentalPadding }
__experimentalMinHeight={ __experimentalMinHeight }
/>
) }
</BlockEditorProvider>
Expand Down
Loading