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.

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
143 changes: 84 additions & 59 deletions packages/block-editor/src/components/block-pattern-setup/index.js
Original file line number Diff line number Diff line change
@@ -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';

/**
@@ -28,6 +28,7 @@ const SetupContent = ( {
activeSlide,
patterns,
onBlockPatternSelect,
height,
} ) => {
const composite = useCompositeState();
const containerClass = 'block-editor-block-pattern-setup__container';
@@ -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`
@@ -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 }>
@@ -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,
@@ -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 }
@@ -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;
@@ -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>
</>
);
};

Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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 {
@@ -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;
@@ -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;
@@ -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 {
@@ -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
Original file line number Diff line number Diff line change
@@ -19,7 +19,11 @@ let MemoizedBlockList;

const MAX_HEIGHT = 2000;

function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
function AutoBlockPreview( {
viewportWidth,
__experimentalPadding,
__experimentalMinHeight,
} ) {
const [
containerResizeListener,
{ width: containerWidth },
@@ -68,6 +72,7 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
contentHeight > MAX_HEIGHT
? MAX_HEIGHT * scale
: undefined,
minHeight: __experimentalMinHeight,
} }
>
<Iframe
@@ -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 }
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/block-preview/index.js
Original file line number Diff line number Diff line change
@@ -29,6 +29,7 @@ export function BlockPreview( {
viewportWidth = 1200,
__experimentalLive = false,
__experimentalOnClick,
__experimentalMinHeight,
} ) {
const originalSettings = useSelect(
( select ) => select( blockEditorStore ).getSettings(),
@@ -51,6 +52,7 @@ export function BlockPreview( {
<AutoHeightBlockPreview
viewportWidth={ viewportWidth }
__experimentalPadding={ __experimentalPadding }
__experimentalMinHeight={ __experimentalMinHeight }
/>
) }
</BlockEditorProvider>
Loading