From 62b7e25924e43f3ffd5f5a89722659f2d08df6fa Mon Sep 17 00:00:00 2001 From: Jorge Date: Tue, 22 Feb 2022 16:38:10 +0000 Subject: [PATCH 01/12] Update query block creation and replacement flows --- .../block-library/src/query/edit/index.js | 140 ++++++++++++++---- .../src/query/edit/pattern-selection-modal.js | 58 ++++++++ .../src/query/edit/query-placeholder.js | 16 +- .../src/query/edit/query-toolbar.js | 6 + packages/block-library/src/query/editor.scss | 13 ++ 5 files changed, 193 insertions(+), 40 deletions(-) create mode 100644 packages/block-library/src/query/edit/pattern-selection-modal.js diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js index f31945a08f1d37..40f9d64df50a98 100644 --- a/packages/block-library/src/query/edit/index.js +++ b/packages/block-library/src/query/edit/index.js @@ -2,9 +2,9 @@ * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { cloneBlock } from '@wordpress/blocks'; +import { store as blocksStore } from '@wordpress/blocks'; import { useInstanceId } from '@wordpress/compose'; -import { useEffect } from '@wordpress/element'; +import { useState, useEffect } from '@wordpress/element'; import { BlockControls, InspectorControls, @@ -12,9 +12,14 @@ import { useSetting, store as blockEditorStore, useInnerBlocksProps, - __experimentalBlockPatternSetup as BlockPatternSetup, + __experimentalGetMatchingVariation as getMatchingVariation, } from '@wordpress/block-editor'; -import { SelectControl } from '@wordpress/components'; +import { + Button, + SelectControl, + Placeholder, + Modal, +} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; /** @@ -24,10 +29,14 @@ import QueryToolbar from './query-toolbar'; import QueryInspectorControls from './inspector-controls'; import QueryPlaceholder from './query-placeholder'; import { DEFAULTS_POSTS_PER_PAGE } from '../constants'; -import { getFirstQueryClientIdFromBlocks } from '../utils'; +import PatternSelectionModal from './pattern-selection-modal'; const TEMPLATE = [ [ 'core/post-template' ] ]; -export function QueryContent( { attributes, setAttributes } ) { +export function QueryContent( { + attributes, + setAttributes, + openPatternSelectionModal, +} ) { const { queryId, query, @@ -102,6 +111,7 @@ export function QueryContent( { attributes, setAttributes } ) { attributes={ attributes } setQuery={ updateQuery } setDisplayLayout={ updateDisplayLayout } + openPatternSelectionModal={ openPatternSelectionModal } /> @@ -124,43 +134,119 @@ export function QueryContent( { attributes, setAttributes } ) { ); } -function QueryPatternSetup( props ) { - const { clientId, name: blockName } = props; +function QueryPatternSetup( { + attributes, + clientId, + name, + openPatternSelectionModal, + setAttributes, +} ) { + const [ isStartingBlank, setIsStartingBlank ] = useState( false ); const blockProps = useBlockProps(); - const { replaceBlock, selectBlock } = useDispatch( blockEditorStore ); - const onBlockPatternSelect = ( blocks ) => { - const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) ); - const firstQueryClientId = getFirstQueryClientIdFromBlocks( - clonedBlocks + + const { blockType, allVariations, hasPatterns } = useSelect( + ( select ) => { + const { getBlockVariations, getBlockType } = select( blocksStore ); + const { + getBlockRootClientId, + __experimentalGetPatternsByBlockTypes, + } = select( blockEditorStore ); + const rootClientId = getBlockRootClientId( clientId ); + + return { + blockType: getBlockType( name ), + allVariations: getBlockVariations( name ), + hasPatterns: !! __experimentalGetPatternsByBlockTypes( + name, + rootClientId + ).length, + }; + }, + [ name, clientId ] + ); + + const matchingVariation = getMatchingVariation( attributes, allVariations ); + const icon = matchingVariation?.icon || blockType?.icon?.src; + const label = matchingVariation?.title || blockType?.title; + if ( isStartingBlank ) { + return ( + ); - replaceBlock( clientId, clonedBlocks ); - if ( firstQueryClientId ) { - selectBlock( firstQueryClientId ); - } - }; - // `startBlankComponent` is what to render when clicking `Start blank` - // or if no matched patterns are found. + } return (
- } - onBlockPatternSelect={ onBlockPatternSelect } - /> + + { !! hasPatterns && ( + + ) } + + +
); } const QueryEdit = ( props ) => { const { clientId } = props; + const [ + isPatternSelectionModalOpen, + setIsPatternSelectionModalOpen, + ] = useState( false ); const hasInnerBlocks = useSelect( ( select ) => !! select( blockEditorStore ).getBlocks( clientId ).length, [ clientId ] ); const Component = hasInnerBlocks ? QueryContent : QueryPatternSetup; - return ; + return ( + <> + + setIsPatternSelectionModalOpen( true ) + } + /> + { isPatternSelectionModalOpen && ( + + setIsPatternSelectionModalOpen( false ) + } + > + + + ) } + + ); }; export default QueryEdit; diff --git a/packages/block-library/src/query/edit/pattern-selection-modal.js b/packages/block-library/src/query/edit/pattern-selection-modal.js new file mode 100644 index 00000000000000..fb6cc5786687ba --- /dev/null +++ b/packages/block-library/src/query/edit/pattern-selection-modal.js @@ -0,0 +1,58 @@ +/** + * WordPress dependencies + */ +import { cloneBlock } from '@wordpress/blocks'; +import { useAsyncList } from '@wordpress/compose'; +import { + __experimentalBlockPatternsList as BlockPatternsList, + store as blockEditorStore, +} from '@wordpress/block-editor'; +import { useSelect, useDispatch } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import { getFirstQueryClientIdFromBlocks } from '../utils'; + +export default function PatternSelectionModal( { clientId, name } ) { + const { blockPatterns } = useSelect( + ( select ) => { + const { + getBlockRootClientId, + __experimentalGetPatternsByBlockTypes, + } = select( blockEditorStore ); + const rootClientId = getBlockRootClientId( clientId ); + + return { + blockPatterns: __experimentalGetPatternsByBlockTypes( + name, + rootClientId + ), + }; + }, + [ clientId, name ] + ); + const { replaceBlock, selectBlock } = useDispatch( blockEditorStore ); + + const onBlockPatternSelect = ( _pattern, blocks ) => { + const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) ); + const firstQueryClientId = getFirstQueryClientIdFromBlocks( + clonedBlocks + ); + replaceBlock( clientId, clonedBlocks ); + if ( firstQueryClientId ) { + selectBlock( firstQueryClientId ); + } + }; + const shownBlockPatterns = useAsyncList( blockPatterns, { step: 6 } ); + + return ( +
+ +
+ ); +} diff --git a/packages/block-library/src/query/edit/query-placeholder.js b/packages/block-library/src/query/edit/query-placeholder.js index 51b31d59e11c6d..07151aff4823be 100644 --- a/packages/block-library/src/query/edit/query-placeholder.js +++ b/packages/block-library/src/query/edit/query-placeholder.js @@ -5,7 +5,6 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useBlockProps, __experimentalBlockVariationPicker, - __experimentalGetMatchingVariation as getMatchingVariation, store as blockEditorStore, } from '@wordpress/block-editor'; import { @@ -13,13 +12,8 @@ import { store as blocksStore, } from '@wordpress/blocks'; -const QueryPlaceholder = ( { clientId, name, attributes, setAttributes } ) => { - const { - blockType, - defaultVariation, - scopeVariations, - allVariations, - } = useSelect( +function QueryPlaceholder( { clientId, name, setAttributes, icon, label } ) { + const { defaultVariation, scopeVariations } = useSelect( ( select ) => { const { getBlockVariations, @@ -31,16 +25,12 @@ const QueryPlaceholder = ( { clientId, name, attributes, setAttributes } ) => { blockType: getBlockType( name ), defaultVariation: getDefaultBlockVariation( name, 'block' ), scopeVariations: getBlockVariations( name, 'block' ), - allVariations: getBlockVariations( name ), }; }, [ name ] ); const { replaceInnerBlocks } = useDispatch( blockEditorStore ); const blockProps = useBlockProps(); - const matchingVariation = getMatchingVariation( attributes, allVariations ); - const icon = matchingVariation?.icon || blockType?.icon?.src; - const label = matchingVariation?.title || blockType?.title; return (
<__experimentalBlockVariationPicker @@ -64,6 +54,6 @@ const QueryPlaceholder = ( { clientId, name, attributes, setAttributes } ) => { />
); -}; +} export default QueryPlaceholder; diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js index 92db79c7dad7b2..c9e02a5d2a3ace 100644 --- a/packages/block-library/src/query/edit/query-toolbar.js +++ b/packages/block-library/src/query/edit/query-toolbar.js @@ -16,6 +16,7 @@ export default function QueryToolbar( { attributes: { query, displayLayout }, setQuery, setDisplayLayout, + openPatternSelectionModal, } ) { const maxPageInputId = useInstanceId( QueryToolbar, @@ -128,6 +129,11 @@ export default function QueryToolbar( { /> ) } + + + { __( 'Replace' ) } + + ); diff --git a/packages/block-library/src/query/editor.scss b/packages/block-library/src/query/editor.scss index 27d4ce00c4939a..3b3ed11676ac3a 100644 --- a/packages/block-library/src/query/editor.scss +++ b/packages/block-library/src/query/editor.scss @@ -5,3 +5,16 @@ .wp-block-query__create-new-link { padding: 0 $grid-unit-20 $grid-unit-20 56px; } + +.block-library-query__pattern-selection-content .block-editor-block-patterns-list { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: $grid-unit-10; + + .block-editor-block-patterns-list__list-item { + margin-bottom: 0; + .block-editor-block-preview__container { + max-height: 250px; + } + } +} From aacef8601bd0c446c24b32c67eb378f3cceb7aa8 Mon Sep 17 00:00:00 2001 From: Jorge Date: Fri, 1 Apr 2022 17:10:48 +0100 Subject: [PATCH 02/12] Keep option to choose between carousel and grid --- .../components/block-pattern-setup/index.js | 9 ++- .../block-pattern-setup/setup-toolbar.js | 4 +- .../block-library/src/query/edit/index.js | 25 ++++++-- .../src/query/edit/pattern-selection-modal.js | 58 ------------------- packages/block-library/src/query/editor.scss | 31 ++++++++++ 5 files changed, 59 insertions(+), 68 deletions(-) delete mode 100644 packages/block-library/src/query/edit/pattern-selection-modal.js diff --git a/packages/block-editor/src/components/block-pattern-setup/index.js b/packages/block-editor/src/components/block-pattern-setup/index.js index 2fa25326a5c9c9..1ca22ee08d5b3d 100644 --- a/packages/block-editor/src/components/block-pattern-setup/index.js +++ b/packages/block-editor/src/components/block-pattern-setup/index.js @@ -152,6 +152,11 @@ const BlockPatternSetup = ( { }; const onPatternSelectCallback = onBlockPatternSelect || onBlockPatternSelectDefault; + const onStartBlank = startBlankComponent + ? () => { + setShowBlank( true ); + } + : undefined; return (
{ onPatternSelectCallback( patterns[ activeSlide ].blocks ); } } - onStartBlank={ () => { - setShowBlank( true ); - } } + onStartBlank={ onStartBlank } /> (
- + { onStartBlank && ( + + ) } diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js index 40f9d64df50a98..743efe42dacf23 100644 --- a/packages/block-library/src/query/edit/index.js +++ b/packages/block-library/src/query/edit/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { store as blocksStore } from '@wordpress/blocks'; +import { store as blocksStore, cloneBlock } from '@wordpress/blocks'; import { useInstanceId } from '@wordpress/compose'; import { useState, useEffect } from '@wordpress/element'; import { @@ -13,6 +13,7 @@ import { store as blockEditorStore, useInnerBlocksProps, __experimentalGetMatchingVariation as getMatchingVariation, + __experimentalBlockPatternSetup as BlockPatternSetup, } from '@wordpress/block-editor'; import { Button, @@ -29,7 +30,7 @@ import QueryToolbar from './query-toolbar'; import QueryInspectorControls from './inspector-controls'; import QueryPlaceholder from './query-placeholder'; import { DEFAULTS_POSTS_PER_PAGE } from '../constants'; -import PatternSelectionModal from './pattern-selection-modal'; +import { getFirstQueryClientIdFromBlocks } from '../utils'; const TEMPLATE = [ [ 'core/post-template' ] ]; export function QueryContent( { @@ -211,17 +212,28 @@ function QueryPatternSetup( { } const QueryEdit = ( props ) => { - const { clientId } = props; + const { clientId, name } = props; const [ isPatternSelectionModalOpen, setIsPatternSelectionModalOpen, ] = useState( false ); + const { replaceBlock, selectBlock } = useDispatch( blockEditorStore ); const hasInnerBlocks = useSelect( ( select ) => !! select( blockEditorStore ).getBlocks( clientId ).length, [ clientId ] ); const Component = hasInnerBlocks ? QueryContent : QueryPatternSetup; + const onBlockPatternSelect = ( blocks ) => { + const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) ); + const firstQueryClientId = getFirstQueryClientIdFromBlocks( + clonedBlocks + ); + replaceBlock( clientId, clonedBlocks ); + if ( firstQueryClientId ) { + selectBlock( firstQueryClientId ); + } + }; return ( <> { /> { isPatternSelectionModalOpen && ( setIsPatternSelectionModalOpen( false ) } > - ) } diff --git a/packages/block-library/src/query/edit/pattern-selection-modal.js b/packages/block-library/src/query/edit/pattern-selection-modal.js deleted file mode 100644 index fb6cc5786687ba..00000000000000 --- a/packages/block-library/src/query/edit/pattern-selection-modal.js +++ /dev/null @@ -1,58 +0,0 @@ -/** - * WordPress dependencies - */ -import { cloneBlock } from '@wordpress/blocks'; -import { useAsyncList } from '@wordpress/compose'; -import { - __experimentalBlockPatternsList as BlockPatternsList, - store as blockEditorStore, -} from '@wordpress/block-editor'; -import { useSelect, useDispatch } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import { getFirstQueryClientIdFromBlocks } from '../utils'; - -export default function PatternSelectionModal( { clientId, name } ) { - const { blockPatterns } = useSelect( - ( select ) => { - const { - getBlockRootClientId, - __experimentalGetPatternsByBlockTypes, - } = select( blockEditorStore ); - const rootClientId = getBlockRootClientId( clientId ); - - return { - blockPatterns: __experimentalGetPatternsByBlockTypes( - name, - rootClientId - ), - }; - }, - [ clientId, name ] - ); - const { replaceBlock, selectBlock } = useDispatch( blockEditorStore ); - - const onBlockPatternSelect = ( _pattern, blocks ) => { - const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) ); - const firstQueryClientId = getFirstQueryClientIdFromBlocks( - clonedBlocks - ); - replaceBlock( clientId, clonedBlocks ); - if ( firstQueryClientId ) { - selectBlock( firstQueryClientId ); - } - }; - const shownBlockPatterns = useAsyncList( blockPatterns, { step: 6 } ); - - return ( -
- -
- ); -} diff --git a/packages/block-library/src/query/editor.scss b/packages/block-library/src/query/editor.scss index 3b3ed11676ac3a..0172b6913884e3 100644 --- a/packages/block-library/src/query/editor.scss +++ b/packages/block-library/src/query/editor.scss @@ -18,3 +18,34 @@ } } } + +.block-editor-query-pattern__selection-modal .components-modal__content { + padding: 0; + &::before { + margin-bottom: 0 + } +} + +.block-editor-query-pattern__selection-modal .block-editor-block-pattern-setup { + &, & .block-editor-block-pattern-setup__toolbar { + box-shadow: none; + } +} + +.block-editor-query-pattern__selection-modal { + .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container { + max-height: unset; + } + // To keep modal dimensions consistent as subsections are navigated, width + // and height are used instead of max-(width/height). + @include break-small() { + width: calc(100% - #{ $grid-unit-20 * 2 }); + height: calc(100% - #{ $header-height * 2 }); + } + @include break-medium() { + width: $break-medium - $grid-unit-20 * 2; + } + @include break-large() { + height: 70%; + } +} From 36d72fc0918fee82fc4e3ed10dec802915bd1a6c Mon Sep 17 00:00:00 2001 From: Jorge Date: Thu, 7 Apr 2022 12:25:04 +0100 Subject: [PATCH 03/12] Update design --- .../components/block-pattern-setup/index.js | 19 ++++++++----------- .../components/block-pattern-setup/style.scss | 14 ++++++-------- packages/block-library/src/query/editor.scss | 11 +---------- 3 files changed, 15 insertions(+), 29 deletions(-) diff --git a/packages/block-editor/src/components/block-pattern-setup/index.js b/packages/block-editor/src/components/block-pattern-setup/index.js index 1ca22ee08d5b3d..4c8208d17dd9a5 100644 --- a/packages/block-editor/src/components/block-pattern-setup/index.js +++ b/packages/block-editor/src/components/block-pattern-setup/index.js @@ -72,7 +72,7 @@ const SetupContent = ( { 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 +94,6 @@ function BlockPattern( { pattern, onSelect, composite } ) { blocks={ blocks } viewportWidth={ viewportWidth } /> -
- { title } -
{ !! description && ( @@ -119,7 +116,7 @@ function BlockPatternSlide( { className, pattern } ) { aria-label={ title } aria-describedby={ description ? descriptionId : undefined } > - + { !! description && ( { description } @@ -161,6 +158,12 @@ const BlockPatternSetup = ( {
+ -
); }; diff --git a/packages/block-editor/src/components/block-pattern-setup/style.scss b/packages/block-editor/src/components/block-pattern-setup/style.scss index 17bcf3b8191d6e..c7799ffc2eecc0 100644 --- a/packages/block-editor/src/components/block-pattern-setup/style.scss +++ b/packages/block-editor/src/components/block-pattern-setup/style.scss @@ -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 { @@ -19,7 +17,6 @@ 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 }); @@ -44,8 +41,10 @@ } .block-editor-block-pattern-setup__toolbar { + height: $header-height; + position: fixed; + bottom: 0; box-sizing: border-box; - position: relative; padding: $grid-unit-20; width: 100%; text-align: left; @@ -54,13 +53,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; @@ -98,7 +96,7 @@ top: 0; width: 100%; margin: auto; - padding: $grid-unit-20; + padding: 0; transition: transform 0.5s, opacity 0.5s, z-index 0.5s; z-index: z-index(".block-editor-block-pattern-setup .pattern-slide"); diff --git a/packages/block-library/src/query/editor.scss b/packages/block-library/src/query/editor.scss index 0172b6913884e3..41e46d7f5b2ba2 100644 --- a/packages/block-library/src/query/editor.scss +++ b/packages/block-library/src/query/editor.scss @@ -22,20 +22,11 @@ .block-editor-query-pattern__selection-modal .components-modal__content { padding: 0; &::before { - margin-bottom: 0 - } -} - -.block-editor-query-pattern__selection-modal .block-editor-block-pattern-setup { - &, & .block-editor-block-pattern-setup__toolbar { - box-shadow: none; + margin-bottom: 0; } } .block-editor-query-pattern__selection-modal { - .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container { - max-height: unset; - } // To keep modal dimensions consistent as subsections are navigated, width // and height are used instead of max-(width/height). @include break-small() { From 535ca607e77bb1bc9dc3ecd0cf7c1e9105a4c229 Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 7 Apr 2022 15:05:40 +0100 Subject: [PATCH 04/12] Adjust modal styling * Increase dimensions * Try a masonry layout in grid view --- .../components/block-pattern-setup/style.scss | 42 ++++++++++++------- packages/block-library/src/query/editor.scss | 4 +- 2 files changed, 29 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/block-pattern-setup/style.scss b/packages/block-editor/src/components/block-pattern-setup/style.scss index c7799ffc2eecc0..f6a31781fb42bd 100644 --- a/packages/block-editor/src/components/block-pattern-setup/style.scss +++ b/packages/block-editor/src/components/block-pattern-setup/style.scss @@ -13,29 +13,39 @@ } .block-editor-block-pattern-setup__container { - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: $grid-unit-20; - padding: $grid-unit-20; - 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; + + @include break-small() { + column-count: 1; + } + @include break-medium() { + 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%; + } } } } diff --git a/packages/block-library/src/query/editor.scss b/packages/block-library/src/query/editor.scss index 41e46d7f5b2ba2..1caebbd6c23188 100644 --- a/packages/block-library/src/query/editor.scss +++ b/packages/block-library/src/query/editor.scss @@ -37,6 +37,8 @@ width: $break-medium - $grid-unit-20 * 2; } @include break-large() { - height: 70%; + height: 80%; + width: 80%; + max-height: none; } } From fd389eaf9df96bbc2deffcaa3aff023ced121240 Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 7 Apr 2022 15:09:14 +0100 Subject: [PATCH 05/12] Maintain a two column layout on small screens --- .../src/components/block-pattern-setup/style.scss | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-pattern-setup/style.scss b/packages/block-editor/src/components/block-pattern-setup/style.scss index f6a31781fb42bd..a6d67226a8b8cc 100644 --- a/packages/block-editor/src/components/block-pattern-setup/style.scss +++ b/packages/block-editor/src/components/block-pattern-setup/style.scss @@ -17,13 +17,8 @@ display: block; width: 100%; padding: $grid-unit-40; + column-count: 2; - @include break-small() { - column-count: 1; - } - @include break-medium() { - column-count: 2; - } @include break-huge() { column-count: 3; } From 84d46f0ab843872447ca85677e99aa51ad50bedd Mon Sep 17 00:00:00 2001 From: Jorge Date: Thu, 7 Apr 2022 23:50:45 +0100 Subject: [PATCH 06/12] Enhance design --- .../components/block-pattern-setup/index.js | 121 ++++++++++++------ .../components/block-pattern-setup/style.scss | 7 +- 2 files changed, 88 insertions(+), 40 deletions(-) diff --git a/packages/block-editor/src/components/block-pattern-setup/index.js b/packages/block-editor/src/components/block-pattern-setup/index.js index 4c8208d17dd9a5..1ae84170adf23f 100644 --- a/packages/block-editor/src/components/block-pattern-setup/index.js +++ b/packages/block-editor/src/components/block-pattern-setup/index.js @@ -10,8 +10,8 @@ import { __unstableCompositeItem as CompositeItem, } from '@wordpress/components'; -import { useState } from '@wordpress/element'; -import { useInstanceId } from '@wordpress/compose'; +import { useState, useCallback } from '@wordpress/element'; +import { useInstanceId, useResizeObserver } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; /** @@ -23,14 +23,43 @@ import SetupToolbar from './setup-toolbar'; import usePatternsSetup from './use-patterns-setup'; import { VIEWMODES } from './constants'; +function useBackgroundColor() { + const [ backgroundColor, setBackgroundColor ] = useState( 'rgba(0,0,0,0)' ); + const ref = useCallback( + ( node ) => { + if ( ! node ) { + return; + } + const { ownerDocument } = node; + const { defaultView } = ownerDocument; + const canvas = ownerDocument.querySelector( + '.editor-styles-wrapper' + ); + if ( ! canvas ) { + return; + } + const computedBackgroundColor = defaultView + .getComputedStyle( canvas, null ) + .getPropertyValue( 'background-color' ); + if ( computedBackgroundColor !== backgroundColor ) { + setBackgroundColor( computedBackgroundColor ); + } + }, + [ backgroundColor, setBackgroundColor ] + ); + return [ backgroundColor, ref ]; +} + const SetupContent = ( { viewMode, activeSlide, patterns, onBlockPatternSelect, + height, } ) => { const composite = useCompositeState(); const containerClass = 'block-editor-block-pattern-setup__container'; + const [ backgroundColor, nodeRef ] = useBackgroundColor(); if ( viewMode === VIEWMODES.carousel ) { const slideClass = new Map( [ [ activeSlide, 'active-slide' ], @@ -38,16 +67,22 @@ const SetupContent = ( { [ activeSlide + 1, 'next-slide' ], ] ); return ( -
-
    - { patterns.map( ( pattern, index ) => ( - - ) ) } -
+
+
+
    + { patterns.map( ( pattern, index ) => ( + + ) ) } +
+
); } @@ -138,6 +173,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; @@ -155,32 +194,38 @@ const BlockPatternSetup = ( { } : undefined; return ( -
- - { - setActiveSlide( ( active ) => active + 1 ); - } } - handlePrevious={ () => { - setActiveSlide( ( active ) => active - 1 ); - } } - onBlockPatternSelect={ () => { - onPatternSelectCallback( patterns[ activeSlide ].blocks ); - } } - onStartBlank={ onStartBlank } - /> -
+ <> + { contentResizeListener } +
+ + { + setActiveSlide( ( active ) => active + 1 ); + } } + handlePrevious={ () => { + setActiveSlide( ( active ) => active - 1 ); + } } + onBlockPatternSelect={ () => { + onPatternSelectCallback( + patterns[ activeSlide ].blocks + ); + } } + onStartBlank={ onStartBlank } + /> +
+ ); }; diff --git a/packages/block-editor/src/components/block-pattern-setup/style.scss b/packages/block-editor/src/components/block-pattern-setup/style.scss index a6d67226a8b8cc..8ad62019e948c5 100644 --- a/packages/block-editor/src/components/block-pattern-setup/style.scss +++ b/packages/block-editor/src/components/block-pattern-setup/style.scss @@ -47,8 +47,6 @@ .block-editor-block-pattern-setup__toolbar { height: $header-height; - position: fixed; - bottom: 0; box-sizing: border-box; padding: $grid-unit-20; width: 100%; @@ -128,3 +126,8 @@ } } } + +.block-editor-block-pattern-setup__carousel { + width: 100%; + overflow-y: auto; +} From 6b41b9c0b72b8a7c617e526458a32204937875d4 Mon Sep 17 00:00:00 2001 From: Jorge Date: Fri, 8 Apr 2022 11:34:06 +0100 Subject: [PATCH 07/12] Fix background on the site editor. --- .../components/block-pattern-setup/index.js | 41 ++++--------------- .../src/components/block-preview/auto.js | 8 +++- .../src/components/block-preview/index.js | 2 + 3 files changed, 17 insertions(+), 34 deletions(-) diff --git a/packages/block-editor/src/components/block-pattern-setup/index.js b/packages/block-editor/src/components/block-pattern-setup/index.js index 1ae84170adf23f..a9e6e23b323183 100644 --- a/packages/block-editor/src/components/block-pattern-setup/index.js +++ b/packages/block-editor/src/components/block-pattern-setup/index.js @@ -10,7 +10,7 @@ import { __unstableCompositeItem as CompositeItem, } from '@wordpress/components'; -import { useState, useCallback } from '@wordpress/element'; +import { useState } from '@wordpress/element'; import { useInstanceId, useResizeObserver } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; @@ -23,33 +23,6 @@ import SetupToolbar from './setup-toolbar'; import usePatternsSetup from './use-patterns-setup'; import { VIEWMODES } from './constants'; -function useBackgroundColor() { - const [ backgroundColor, setBackgroundColor ] = useState( 'rgba(0,0,0,0)' ); - const ref = useCallback( - ( node ) => { - if ( ! node ) { - return; - } - const { ownerDocument } = node; - const { defaultView } = ownerDocument; - const canvas = ownerDocument.querySelector( - '.editor-styles-wrapper' - ); - if ( ! canvas ) { - return; - } - const computedBackgroundColor = defaultView - .getComputedStyle( canvas, null ) - .getPropertyValue( 'background-color' ); - if ( computedBackgroundColor !== backgroundColor ) { - setBackgroundColor( computedBackgroundColor ); - } - }, - [ backgroundColor, setBackgroundColor ] - ); - return [ backgroundColor, ref ]; -} - const SetupContent = ( { viewMode, activeSlide, @@ -59,7 +32,6 @@ const SetupContent = ( { } ) => { const composite = useCompositeState(); const containerClass = 'block-editor-block-pattern-setup__container'; - const [ backgroundColor, nodeRef ] = useBackgroundColor(); if ( viewMode === VIEWMODES.carousel ) { const slideClass = new Map( [ [ activeSlide, 'active-slide' ], @@ -69,8 +41,7 @@ const SetupContent = ( { return (
    @@ -79,6 +50,7 @@ const SetupContent = ( { className={ slideClass.get( index ) || '' } key={ pattern.name } pattern={ pattern } + minHeight={ height } /> ) ) }
@@ -139,7 +111,7 @@ function BlockPattern( { pattern, onSelect, composite } ) { ); } -function BlockPatternSlide( { className, pattern } ) { +function BlockPatternSlide( { className, pattern, minHeight } ) { const { blocks, title, description } = pattern; const descriptionId = useInstanceId( BlockPatternSlide, @@ -151,7 +123,10 @@ function BlockPatternSlide( { className, pattern } ) { aria-label={ title } aria-describedby={ description ? descriptionId : undefined } > - + { !! description && ( { description } diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js index f480b83ce58e26..edd676e80ac631 100644 --- a/packages/block-editor/src/components/block-preview/auto.js +++ b/packages/block-editor/src/components/block-preview/auto.js @@ -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, } } >