Skip to content

Commit

Permalink
Update query block creation and replacement flows (#38997)
Browse files Browse the repository at this point in the history 
Co-authored-by: James Koster <james@jameskoster.co.uk>
  • Loading branch information
@jorgefilipecosta @jameskoster @adamziel
2 people authored and adamziel committed Apr 11, 2022
1 parent ad486d5 commit 4893c10
Show file tree
Hide file tree
Showing 10 changed files with 316 additions and 129 deletions.
143 changes: 84 additions & 59 deletions packages/block-editor/src/components/block-pattern-setup/index.js
View file
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
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
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
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
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

0 comments on commit 4893c10

Please sign in to comment.