From f13a789618eef71a504440210761603ad39d0e9e Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 5 Mar 2021 18:06:58 +0200 Subject: [PATCH 01/15] temp commit --- .../components/block-pattern-picker/index.js | 195 ++++++++++++++++++ .../layout-setup-toolbar.js | 82 ++++++++ .../block-pattern-picker/style.scss | 88 ++++++++ .../use-patterns-setup.js | 39 ++++ packages/block-editor/src/components/index.js | 1 + packages/block-editor/src/style.scss | 1 + packages/block-library/src/buttons/edit.js | 44 +++- .../block-library/src/buttons/variations.js | 1 - packages/block-library/src/columns/edit.js | 30 ++- 9 files changed, 477 insertions(+), 4 deletions(-) create mode 100644 packages/block-editor/src/components/block-pattern-picker/index.js create mode 100644 packages/block-editor/src/components/block-pattern-picker/layout-setup-toolbar.js create mode 100644 packages/block-editor/src/components/block-pattern-picker/style.scss create mode 100644 packages/block-editor/src/components/block-pattern-picker/use-patterns-setup.js diff --git a/packages/block-editor/src/components/block-pattern-picker/index.js b/packages/block-editor/src/components/block-pattern-picker/index.js new file mode 100644 index 0000000000000..09e01f34d3dcf --- /dev/null +++ b/packages/block-editor/src/components/block-pattern-picker/index.js @@ -0,0 +1,195 @@ +/** + * WordPress dependencies + */ +import { useDispatch } from '@wordpress/data'; +import { parse } from '@wordpress/blocks'; +import { + VisuallyHidden, + __unstableComposite as Composite, + __unstableUseCompositeState as useCompositeState, + __unstableCompositeItem as CompositeItem, +} from '@wordpress/components'; + +import { useState, useMemo } from '@wordpress/element'; +import { useInstanceId } from '@wordpress/compose'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { store as blockEditorStore } from '../../store'; +import BlockPreview from '../block-preview'; +import LayoutSetupToolbar from './layout-setup-toolbar'; +import usePatternsSetup from './use-patterns-setup'; + +const LayoutSetupStep = ( { + viewMode, + activeSlide, + patterns, + onBlockPatternSelect, +} ) => { + const composite = useCompositeState(); + let content; + // Render `carousel` in single viewMode. + if ( viewMode === 'single' ) { + const getSlideClass = ( index ) => { + if ( index === activeSlide ) return 'active-slide'; + if ( index === activeSlide - 1 ) return 'previous-slide'; + if ( index === activeSlide + 1 ) return 'next-slide'; + return ''; + }; + content = ( +
+ +
+ ); + } else { + content = ( + + { patterns.map( ( pattern ) => ( + + ) ) } + + ); + } + return content; +}; + +function BlockPattern( { pattern, onSelect, composite } ) { + // TODO check viewportWidth. From pattern? From resizeObserver to have current width + // and manipulate later?? + const { content } = pattern; + const blocks = useMemo( () => parse( content ), [ content ] ); + const descriptionId = useInstanceId( + BlockPattern, + 'block-setup-block-layout-list__item-description' + ); + return ( +
+ onSelect( blocks ) } + > + + + { !! pattern.description && ( + + { pattern.description } + + ) } +
+ ); +} + +function BlockPatternSlide( { className, pattern } ) { + const { content } = pattern; + const blocks = useMemo( () => parse( content ), [ content ] ); + const descriptionId = useInstanceId( + BlockPatternSlide, + 'block-setup-block-layout-list__item-description' + ); + return ( +
  • + + { !! pattern.description && ( + + { pattern.description } + + ) } +
    • + ); +} + +const BlockPatternPicker = ( { + clientId, + blockName, + filterPatternsFn, + startBlankComponent, + // onBlockPatternSelect = () => {}, // TODO check if needs override support. +} ) => { + const [ viewMode, setViewMode ] = useState( 'single' ); + const [ activeSlide, setActiveSlide ] = useState( 0 ); + const [ showBlank, setShowBlank ] = useState( false ); + const { replaceBlock } = useDispatch( blockEditorStore ); + const patterns = usePatternsSetup( blockName, filterPatternsFn ); + + // Todo render fallback :) + if ( ! patterns?.length || showBlank ) { + return startBlankComponent; + } + + const onBlockPatternSelect = ( blocks ) => { + replaceBlock( clientId, blocks ); + }; + return ( +
    + { + setActiveSlide( ( active ) => active + 1 ); + } } + handlePrevious={ () => { + setActiveSlide( ( active ) => active - 1 ); + } } + onBlockPatternSelect={ () => { + const { content } = patterns[ activeSlide ]; + onBlockPatternSelect( parse( content ) ); + } } + onStartBlank={ () => { + setShowBlank( true ); + } } + /> + +
    + ); +}; + +export default BlockPatternPicker; diff --git a/packages/block-editor/src/components/block-pattern-picker/layout-setup-toolbar.js b/packages/block-editor/src/components/block-pattern-picker/layout-setup-toolbar.js new file mode 100644 index 0000000000000..c55f5cffde4d2 --- /dev/null +++ b/packages/block-editor/src/components/block-pattern-picker/layout-setup-toolbar.js @@ -0,0 +1,82 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Button } from '@wordpress/components'; +import { + chevronRight, + chevronLeft, + grid, + stretchFullWidth, +} from '@wordpress/icons'; + +function LayoutSetupToolbar( { + viewMode, + setViewMode, + handlePrevious, + handleNext, + activeSlide, + totalSlides, + onBlockPatternSelect, + onStartBlank, +} ) { + const isSingleView = viewMode === 'single'; + const navigation = ( +
    + <> +
    + ); + + // TODO check icons change (?). + const displayControls = ( +
    +
    + ); + + // blank: + // 1. if has block variations to show -> go there + // 2. if not show what was shown before.... Probably pass down what component was used intact... + const actions = ( +
    + + +
    + ); + + return ( +
    + { isSingleView && navigation } + { displayControls } + { isSingleView && actions } +
    + ); +} + +export default LayoutSetupToolbar; diff --git a/packages/block-editor/src/components/block-pattern-picker/style.scss b/packages/block-editor/src/components/block-pattern-picker/style.scss new file mode 100644 index 0000000000000..15dddb111cdb5 --- /dev/null +++ b/packages/block-editor/src/components/block-pattern-picker/style.scss @@ -0,0 +1,88 @@ +.layout-placeholder-container { + display: flex; + flex-direction: column; + justify-content: center; + 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 { + .layout-toolbar { + justify-content: center; + } + .block-layout-setup__container { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: $grid-unit-10; + padding: 1px; + } + } + .layout-toolbar { + box-sizing: border-box; + position: relative; + padding: 1em; + width: 100%; + text-align: left; + margin: 0; + color: $gray-900; + // Block UI appearance. + border-radius: $radius-block-ui; + 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: flex-start; + justify-content: space-between; + } + .block-layout-setup__container { + display: flex; + flex-direction: column; + width: 100%; + + .carousel-container { + overflow: hidden; + text-align: center; + position: relative; + padding: 0; + margin: 0; + list-style: none; + transform-style: preserve-3d; + * { + box-sizing: border-box; + } + .pattern-slide { + opacity: 0; + position: absolute; + top: 0; + width: 100%; + margin: auto; + padding: $grid-unit-20; + z-index: 100; + transition: transform 0.5s, opacity 0.5s, z-index 0.5s; + + &.active-slide { + opacity: 1; + position: relative; + z-index: 900; + } + &.previous-slide { + transform: translateX(-100%); + z-index: 800; + } + &.next-slide { + transform: translateX(100%); + z-index: 800; + } + } + } + + .block-list-appender { + display: none; + } + } +} diff --git a/packages/block-editor/src/components/block-pattern-picker/use-patterns-setup.js b/packages/block-editor/src/components/block-pattern-picker/use-patterns-setup.js new file mode 100644 index 0000000000000..e4e95e5efa949 --- /dev/null +++ b/packages/block-editor/src/components/block-pattern-picker/use-patterns-setup.js @@ -0,0 +1,39 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import { store as blockEditorStore } from '../../store'; + +function usePatternsSetup( blockName, filterPatternsFn ) { + const { patterns } = useSelect( + ( select ) => { + const { + __experimentalGetScopedBlockPatterns, + // __experimentalGetAllowedPatterns, + getSettings, + } = select( blockEditorStore ); + let _patterns; + // TODO maybe support combination of scoped and provided function?? + if ( filterPatternsFn ) { + _patterns = getSettings().__experimentalBlockPatterns.filter( + filterPatternsFn + ); + } else { + _patterns = __experimentalGetScopedBlockPatterns( + 'block', + blockName + ); + } + return { patterns: _patterns }; + }, + [ blockName ] + ); + + return patterns; +} + +export default usePatternsSetup; diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index dc88ae5a36deb..242ee7215f74e 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -27,6 +27,7 @@ export { BlockNavigationBlockFill as __experimentalBlockNavigationBlockFill } fr export { default as __experimentalBlockNavigationEditor } from './block-navigation/editor'; export { default as __experimentalBlockNavigationTree } from './block-navigation/tree'; export { default as __experimentalBlockVariationPicker } from './block-variation-picker'; +export { default as __experimentalBlockPatternPicker } from './block-pattern-picker'; export { default as __experimentalBlockVariationTransforms } from './block-variation-transforms'; export { BlockVerticalAlignmentToolbar, diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 745e64a980d2a..192ccc34be734 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -26,6 +26,7 @@ @import "./components/block-switcher/style.scss"; @import "./components/block-types-list/style.scss"; @import "./components/block-variation-picker/style.scss"; +@import "./components/block-pattern-picker/style.scss"; @import "./components/block-variation-transforms/style.scss"; @import "./components/border-style-control/style.scss"; @import "./components/button-block-appender/style.scss"; diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js index 7b1243ccb47da..2cd510143a888 100644 --- a/packages/block-library/src/buttons/edit.js +++ b/packages/block-library/src/buttons/edit.js @@ -6,11 +6,16 @@ import classnames from 'classnames'; /** * WordPress dependencies */ + +import { useSelect } from '@wordpress/data'; +import { useCallback } from '@wordpress/element'; import { BlockControls, useBlockProps, __experimentalUseInnerBlocksProps as useInnerBlocksProps, JustifyContentControl, + __experimentalBlockPatternPicker as BlockPatternPicker, + store as blockEditorStore, } from '@wordpress/block-editor'; /** @@ -21,7 +26,7 @@ import { name as buttonBlockName } from '../button'; const ALLOWED_BLOCKS = [ buttonBlockName ]; const BUTTONS_TEMPLATE = [ [ 'core/button' ] ]; -function ButtonsEdit( { +function ButtonsContent( { attributes: { contentJustification, orientation }, setAttributes, } ) { @@ -67,4 +72,41 @@ function ButtonsEdit( { ); } +function ButtonsLayoutSetup( props ) { + const { clientId, name: blockName } = props; + const blockProps = useBlockProps(); + // Custom block patterns filtering for overriding the default scoped filtering. + const filterPatternsFn = useCallback( + ( pattern ) => + [ 'buttons' ].some( ( category ) => + pattern.categories?.includes( category ) + ) || pattern.scope?.block?.includes( blockName ), + [] + ); + // `startBlankComponent` is what to render when clicking `Start blank` + // or if no matched patterns are found. + return ( +
    + } + /> +
    + ); +} + +function ButtonsEdit( props ) { + const { clientId } = props; + const hasInnerBlocks = useSelect( + ( select ) => + !! select( blockEditorStore ).getBlocks( clientId ).length, + [ clientId ] + ); + // This logic should be handled per `block` basis. + const Component = hasInnerBlocks ? ButtonsContent : ButtonsLayoutSetup; + return ; +} + export default ButtonsEdit; diff --git a/packages/block-library/src/buttons/variations.js b/packages/block-library/src/buttons/variations.js index 438a5fc97b5eb..20a60161ecbb7 100644 --- a/packages/block-library/src/buttons/variations.js +++ b/packages/block-library/src/buttons/variations.js @@ -6,7 +6,6 @@ import { __ } from '@wordpress/i18n'; const variations = [ { name: 'buttons-horizontal', - isDefault: true, title: __( 'Horizontal' ), description: __( 'Buttons shown in a row.' ), attributes: { orientation: 'horizontal' }, diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index 542bd32f3ae9f..e7f3d0027fdeb 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -9,13 +9,14 @@ import { dropRight, get, times } from 'lodash'; */ import { __ } from '@wordpress/i18n'; import { PanelBody, RangeControl, Notice } from '@wordpress/components'; - +import { useCallback } from '@wordpress/element'; import { InspectorControls, __experimentalUseInnerBlocksProps as useInnerBlocksProps, BlockControls, BlockVerticalAlignmentToolbar, __experimentalBlockVariationPicker, + __experimentalBlockPatternPicker as BlockPatternPicker, useBlockProps, store as blockEditorStore, } from '@wordpress/block-editor'; @@ -250,6 +251,31 @@ function Placeholder( { clientId, name, setAttributes } ) { ); } +function ColumnsLayoutSetup( props ) { + const { clientId, name: blockName } = props; + const blockProps = useBlockProps(); + // Custom block patterns filtering for overriding the default scoped filtering. + const filterPatternsFn = useCallback( + ( pattern ) => + [ 'columns' ].some( ( category ) => + pattern.categories?.includes( category ) + ) || pattern.scope?.block?.includes( blockName ), + [] + ); + // `startBlankComponent` is what to render when clicking `Start blank` + // or if no matched patterns are found. + return ( +
    + } + /> +
    + ); +} + const ColumnsEdit = ( props ) => { const { clientId } = props; const hasInnerBlocks = useSelect( @@ -259,7 +285,7 @@ const ColumnsEdit = ( props ) => { ); const Component = hasInnerBlocks ? ColumnsEditContainerWrapper - : Placeholder; + : ColumnsLayoutSetup; return ; }; From 8f28171629c28613814307e47a568305cc5f9879 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 11 Mar 2021 15:00:35 +0200 Subject: [PATCH 02/15] renamings and css classname changes --- .../index.js | 29 ++++++------- .../setup-toolbar.js} | 41 ++++++++----------- .../style.scss | 10 ++--- .../use-patterns-setup.js | 0 packages/block-editor/src/components/index.js | 2 +- packages/block-editor/src/style.scss | 2 +- packages/block-library/src/buttons/edit.js | 4 +- packages/block-library/src/columns/edit.js | 4 +- 8 files changed, 44 insertions(+), 48 deletions(-) rename packages/block-editor/src/components/{block-pattern-picker => block-pattern-setup}/index.js (87%) rename packages/block-editor/src/components/{block-pattern-picker/layout-setup-toolbar.js => block-pattern-setup/setup-toolbar.js} (60%) rename packages/block-editor/src/components/{block-pattern-picker => block-pattern-setup}/style.scss (88%) rename packages/block-editor/src/components/{block-pattern-picker => block-pattern-setup}/use-patterns-setup.js (100%) diff --git a/packages/block-editor/src/components/block-pattern-picker/index.js b/packages/block-editor/src/components/block-pattern-setup/index.js similarity index 87% rename from packages/block-editor/src/components/block-pattern-picker/index.js rename to packages/block-editor/src/components/block-pattern-setup/index.js index 09e01f34d3dcf..4fdf6d08c10a8 100644 --- a/packages/block-editor/src/components/block-pattern-picker/index.js +++ b/packages/block-editor/src/components/block-pattern-setup/index.js @@ -19,16 +19,17 @@ import { __ } from '@wordpress/i18n'; */ import { store as blockEditorStore } from '../../store'; import BlockPreview from '../block-preview'; -import LayoutSetupToolbar from './layout-setup-toolbar'; +import SetupToolbar from './setup-toolbar'; import usePatternsSetup from './use-patterns-setup'; -const LayoutSetupStep = ( { +const SetupContent = ( { viewMode, activeSlide, patterns, onBlockPatternSelect, } ) => { const composite = useCompositeState(); + const containerClass = 'block-editor-block-pattern-setup__container'; let content; // Render `carousel` in single viewMode. if ( viewMode === 'single' ) { @@ -39,7 +40,7 @@ const LayoutSetupStep = ( { return ''; }; content = ( -
    +
      { patterns.map( ( pattern, index ) => { return ( @@ -61,8 +62,8 @@ const LayoutSetupStep = ( { { patterns.map( ( pattern ) => ( parse( content ), [ content ] ); const descriptionId = useInstanceId( BlockPattern, - 'block-setup-block-layout-list__item-description' + 'block-editor-block-pattern-setup-list__item-description' ); return (
      @@ -97,7 +98,7 @@ function BlockPattern( { pattern, onSelect, composite } ) { role="option" as="div" { ...composite } - className="block-setup-block-layout-list__item" + className="block-editor-block-pattern-setup-list__item" onClick={ () => onSelect( blocks ) } > @@ -116,7 +117,7 @@ function BlockPatternSlide( { className, pattern } ) { const blocks = useMemo( () => parse( content ), [ content ] ); const descriptionId = useInstanceId( BlockPatternSlide, - 'block-setup-block-layout-list__item-description' + 'block-editor-block-pattern-setup-list__item-description' ); return (
    • - - - <> -
      • ); // TODO check icons change (?). const displayControls = ( -
      +
      ); @@ -67,9 +71,9 @@ function SetupToolbar( { return (
      - { isSingleView && navigation } + { isCarouselView && navigation } { displayControls } - { isSingleView && actions } + { isCarouselView && actions }
      ); } 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 ed42743b7f6ce..e5475a4de18a3 100644 --- a/packages/block-editor/src/components/block-pattern-setup/style.scss +++ b/packages/block-editor/src/components/block-pattern-setup/style.scss @@ -18,6 +18,11 @@ grid-template-columns: 1fr 1fr; grid-gap: $grid-unit-20; padding: $grid-unit-20; + + .block-editor-block-preview__container, + div[role="button"] { + cursor: pointer; + } } } .block-editor-block-pattern-setup__toolbar { @@ -58,11 +63,6 @@ flex-direction: column; width: 100%; - .block-editor-block-preview__container, - div[role="button"] { - cursor: pointer; - } - .carousel-container { overflow: hidden; text-align: center; diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index 89751244c94b7..5151177fdd16b 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -259,7 +259,7 @@ function ColumnsLayoutSetup( props ) { ( pattern ) => [ 'columns' ].some( ( category ) => pattern.categories?.includes( category ) - ) || pattern.scope?.block?.includes( blockName ), + ), [] ); // `startBlankComponent` is what to render when clicking `Start blank` From b9146f0e0a16d05f923b1385377bfb2b9f866677 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 16 Apr 2021 23:28:26 +0300 Subject: [PATCH 07/15] add to Query and remove from Columns --- .../components/block-pattern-setup/style.scss | 2 + packages/block-library/src/buttons/edit.js | 1 - packages/block-library/src/columns/edit.js | 29 +-- .../src/query/edit/block-setup/index.js | 49 ----- .../src/query/edit/block-setup/layout-step.js | 200 ------------------ .../block-library/src/query/edit/index.js | 21 +- .../src/query/edit/query-block-setup.js | 120 ----------- 7 files changed, 22 insertions(+), 400 deletions(-) delete mode 100644 packages/block-library/src/query/edit/block-setup/index.js delete mode 100644 packages/block-library/src/query/edit/block-setup/layout-step.js delete mode 100644 packages/block-library/src/query/edit/query-block-setup.js 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 e5475a4de18a3..9db2dad7b8610 100644 --- a/packages/block-editor/src/components/block-pattern-setup/style.scss +++ b/packages/block-editor/src/components/block-pattern-setup/style.scss @@ -18,6 +18,8 @@ grid-template-columns: 1fr 1fr; grid-gap: $grid-unit-20; padding: $grid-unit-20; + max-height: 550px; + overflow: auto; .block-editor-block-preview__container, div[role="button"] { diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js index 672e9118b3dde..7b1243ccb47da 100644 --- a/packages/block-library/src/buttons/edit.js +++ b/packages/block-library/src/buttons/edit.js @@ -6,7 +6,6 @@ import classnames from 'classnames'; /** * WordPress dependencies */ - import { BlockControls, useBlockProps, diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index 5151177fdd16b..963120adaef91 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -9,14 +9,12 @@ import { dropRight, get, times } from 'lodash'; */ import { __ } from '@wordpress/i18n'; import { PanelBody, RangeControl, Notice } from '@wordpress/components'; -import { useCallback } from '@wordpress/element'; import { InspectorControls, __experimentalUseInnerBlocksProps as useInnerBlocksProps, BlockControls, BlockVerticalAlignmentToolbar, __experimentalBlockVariationPicker, - __experimentalBlockPatternSetup as BlockPatternSetup, useBlockProps, store as blockEditorStore, } from '@wordpress/block-editor'; @@ -251,31 +249,6 @@ function Placeholder( { clientId, name, setAttributes } ) { ); } -function ColumnsLayoutSetup( props ) { - const { clientId, name: blockName } = props; - const blockProps = useBlockProps(); - // Custom block patterns filtering for overriding the default scoped filtering. - const filterPatternsFn = useCallback( - ( pattern ) => - [ 'columns' ].some( ( category ) => - pattern.categories?.includes( category ) - ), - [] - ); - // `startBlankComponent` is what to render when clicking `Start blank` - // or if no matched patterns are found. - return ( -
      - } - /> -
      - ); -} - const ColumnsEdit = ( props ) => { const { clientId } = props; const hasInnerBlocks = useSelect( @@ -285,7 +258,7 @@ const ColumnsEdit = ( props ) => { ); const Component = hasInnerBlocks ? ColumnsEditContainerWrapper - : ColumnsLayoutSetup; + : Placeholder; return ; }; diff --git a/packages/block-library/src/query/edit/block-setup/index.js b/packages/block-library/src/query/edit/block-setup/index.js deleted file mode 100644 index 37008b6010ff7..0000000000000 --- a/packages/block-library/src/query/edit/block-setup/index.js +++ /dev/null @@ -1,49 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect } from '@wordpress/data'; -import { useBlockProps } from '@wordpress/block-editor'; -import { store as blocksStore } from '@wordpress/blocks'; -import { Placeholder } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import LayoutSetupStep from './layout-step'; - -const BlockSetup = ( { - blockName, - useLayoutSetup, - onVariationSelect = () => {}, - onBlockPatternSelect = () => {}, - children, -} ) => { - const { blockType } = useSelect( - ( select ) => { - const { getBlockType } = select( blocksStore ); - return { blockType: getBlockType( blockName ) }; - }, - [ blockName ] - ); - const blockProps = useBlockProps(); - return ( -
      - - { useLayoutSetup && ( - - ) } - { children } - -
      - ); -}; - -export default BlockSetup; diff --git a/packages/block-library/src/query/edit/block-setup/layout-step.js b/packages/block-library/src/query/edit/block-setup/layout-step.js deleted file mode 100644 index 9df6893856722..0000000000000 --- a/packages/block-library/src/query/edit/block-setup/layout-step.js +++ /dev/null @@ -1,200 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect } from '@wordpress/data'; -import { useState } from '@wordpress/element'; -import { store as blocksStore } from '@wordpress/blocks'; -import { useInstanceId } from '@wordpress/compose'; -import { - BlockPreview, - store as blockEditorStore, -} from '@wordpress/block-editor'; -import { __, isRTL } from '@wordpress/i18n'; -import { - Button, - Icon, - VisuallyHidden, - __unstableComposite as Composite, - __unstableUseCompositeState as useCompositeState, - __unstableCompositeItem as CompositeItem, -} from '@wordpress/components'; -import { chevronRight, chevronLeft } from '@wordpress/icons'; - -const LayoutSetupStep = ( { - blockType, - onVariationSelect, - onBlockPatternSelect, -} ) => { - const [ showBack, setShowBack ] = useState( false ); - const { - defaultVariation, - blockVariations, - patterns, - hasBlockVariations, - } = useSelect( - ( select ) => { - const { getBlockVariations, getDefaultBlockVariation } = select( - blocksStore - ); - const { __experimentalGetPatternsByBlockTypes } = select( - blockEditorStore - ); - const { name } = blockType; - const _patterns = __experimentalGetPatternsByBlockTypes( name ); - const _blockVariations = getBlockVariations( name, 'block' ); - return { - defaultVariation: getDefaultBlockVariation( name, 'block' ), - blockVariations: _blockVariations, - patterns: _patterns, - hasBlockVariations: !! _blockVariations?.length, - }; - }, - [ blockType ] - ); - const [ showBlockVariations, setShowBlockVariations ] = useState( - ! patterns?.length && hasBlockVariations - ); - const composite = useCompositeState(); - // Show nothing if block variations and block pattterns do not exist. - if ( ! hasBlockVariations && ! patterns?.length ) return null; - - const showPatternsList = ! showBlockVariations && !! patterns.length; - return ( - <> - { showBack && ( - - ) } - - { showBlockVariations && ( - <> - { blockVariations.map( ( variation ) => ( - onVariationSelect( nextVariation ) } - composite={ composite } - /> - ) ) } - - ) } - { showPatternsList && ( - <> - { patterns.map( ( pattern ) => ( - - ) ) } - - ) } - { ! showBlockVariations && hasBlockVariations && ( - { - setShowBack( true ); - setShowBlockVariations( true ); - } } - composite={ composite } - /> - ) } - - - ); -}; - -function BlockPattern( { pattern, onSelect, composite } ) { - const { viewportWidth, blocks } = pattern; - const descriptionId = useInstanceId( - BlockPattern, - 'block-setup-block-layout-list__item-description' - ); - return ( -
      - onSelect( blocks ) } - > - - -
      - { pattern.title } -
      - { !! pattern.description && ( - - { pattern.description } - - ) } -
      - ); -} - -function BlockVariation( { variation, onSelect, composite } ) { - const descriptionId = useInstanceId( - BlockVariation, - 'block-setup-block-layout-list__item-description' - ); - return ( -
      - onSelect( variation ) } - label={ variation.description || variation.title } - > - { variation.icon && ( -
      - -
      - ) } -       -
      - { variation.title } -
      - { !! variation.description && ( - - { variation.description } - - ) } -
      - ); -} - -export default LayoutSetupStep; diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js index ce83e54e6c97a..c64acc48b2f41 100644 --- a/packages/block-library/src/query/edit/index.js +++ b/packages/block-library/src/query/edit/index.js @@ -9,6 +9,7 @@ import { useBlockProps, store as blockEditorStore, __experimentalUseInnerBlocksProps as useInnerBlocksProps, + __experimentalBlockPatternSetup as BlockPatternSetup, } from '@wordpress/block-editor'; /** @@ -16,7 +17,7 @@ import { */ import QueryToolbar from './query-toolbar'; import QueryInspectorControls from './query-inspector-controls'; -import QueryBlockSetup from './query-block-setup'; +import QueryPlaceholder from './query-placeholder'; import { DEFAULTS_POSTS_PER_PAGE } from '../constants'; const TEMPLATE = [ [ 'core/query-loop' ] ]; @@ -87,6 +88,22 @@ export function QueryContent( { attributes, setAttributes } ) { ); } +function QueryPatternSetup( props ) { + const { clientId, name: blockName } = props; + const blockProps = useBlockProps(); + // `startBlankComponent` is what to render when clicking `Start blank` + // or if no matched patterns are found. + return ( +
      + } + /> +
      + ); +} + const QueryEdit = ( props ) => { const { clientId } = props; const hasInnerBlocks = useSelect( @@ -94,7 +111,7 @@ const QueryEdit = ( props ) => { !! select( blockEditorStore ).getBlocks( clientId ).length, [ clientId ] ); - const Component = hasInnerBlocks ? QueryContent : QueryBlockSetup; + const Component = hasInnerBlocks ? QueryContent : QueryPatternSetup; return ; }; diff --git a/packages/block-library/src/query/edit/query-block-setup.js b/packages/block-library/src/query/edit/query-block-setup.js deleted file mode 100644 index f7837da313fc3..0000000000000 --- a/packages/block-library/src/query/edit/query-block-setup.js +++ /dev/null @@ -1,120 +0,0 @@ -/** - * External dependencies - */ -import { cloneDeep } from 'lodash'; -/** - * WordPress dependencies - */ -import { useDispatch } from '@wordpress/data'; -import { __, _x } from '@wordpress/i18n'; -import { SelectControl, ToggleControl } from '@wordpress/components'; -import { - cloneBlock, - createBlocksFromInnerBlocksTemplate, -} from '@wordpress/blocks'; -import { store as blockEditorStore } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import BlockSetup from './block-setup'; -import { usePostTypes } from '../utils'; - -const QueryBlockSetup = ( { - clientId, - attributes: { query }, - setAttributes, - name: blockName, -} ) => { - const { postType, inherit } = query; - const { replaceBlocks, replaceInnerBlocks } = useDispatch( - blockEditorStore - ); - const { postTypesSelectOptions } = usePostTypes(); - const updateQuery = ( newQuery ) => - setAttributes( { query: { ...query, ...newQuery } } ); - const onVariationSelect = ( nextVariation ) => { - if ( nextVariation.attributes ) { - setAttributes( nextVariation.attributes ); - } - if ( nextVariation.innerBlocks ) { - replaceInnerBlocks( - clientId, - createBlocksFromInnerBlocksTemplate( - nextVariation.innerBlocks - ), - false - ); - } - }; - const onBlockPatternSelect = ( blocks ) => { - const clonedBlocks = blocks.map( ( block ) => { - const clone = cloneBlock( block ); - /** - * TODO: this check will be revised with the ongoing work on block patterns. - * For now we keep the value of posts per page (`query.perPage`) from Query patterns - * so as to preview the pattern as intended, without possible big previews. - * During insertion, we need to override the Query's attributes that can be set in - * the Placeholder and we unset the `perPage` value to be set appropriately by Query block. - */ - if ( block.name === 'core/query' ) { - /** - * We need to `cloneDeep` the Query's attributes, as `cloneBlock` does a swallow - * copy of the block. - */ - const queryAttributes = cloneDeep( clone.attributes ); - Object.assign( queryAttributes.query, { - inherit: query.inherit, - postType: query.postType, - perPage: null, - } ); - return { - ...clone, - attributes: queryAttributes, - }; - } - return clone; - } ); - replaceBlocks( clientId, clonedBlocks ); - }; - const inheritToggleHelp = !! inherit - ? _x( - 'Inherit the global query depending on the URL.', - 'Query block `inherit` option helping text' - ) - : _x( - 'Customize the query arguments.', - 'Query block `inherit` option helping text' - ); - return ( - -
      - - updateQuery( { inherit: !! value } ) - } - help={ inheritToggleHelp } - /> - { ! inherit && ( - - updateQuery( { postType: newValue } ) - } - /> - ) } -
      -       - ); -}; - -export default QueryBlockSetup; From ec086a2e9ccd237d6dc1cc237971f241ba7454bc Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 16 Apr 2021 23:38:11 +0300 Subject: [PATCH 08/15] remove query styles from previous integration --- packages/block-library/src/columns/edit.js | 1 + packages/block-library/src/query/editor.scss | 120 ------------------- 2 files changed, 1 insertion(+), 120 deletions(-) diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index 963120adaef91..542bd32f3ae9f 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -9,6 +9,7 @@ import { dropRight, get, times } from 'lodash'; */ import { __ } from '@wordpress/i18n'; import { PanelBody, RangeControl, Notice } from '@wordpress/components'; + import { InspectorControls, __experimentalUseInnerBlocksProps as useInnerBlocksProps, diff --git a/packages/block-library/src/query/editor.scss b/packages/block-library/src/query/editor.scss index 164d1f6f00bbc..27d4ce00c4939 100644 --- a/packages/block-library/src/query/editor.scss +++ b/packages/block-library/src/query/editor.scss @@ -5,123 +5,3 @@ .wp-block-query__create-new-link { padding: 0 $grid-unit-20 $grid-unit-20 56px; } - -.wp-block-query { - .components-placeholder { - .block-setup-navigation { - padding: $grid-unit-15 0 0; - } - - .block-attributes-setup-container { - padding-top: $grid-unit-30; - - .components-base-control__help { - margin: $grid-unit-15 auto; - } - } - } -} - -.block-setup-block-layout-list__container { - display: flex; - flex-direction: row; - flex-wrap: wrap; - - .block-setup-block-layout-list__list-item { - cursor: pointer; - margin: 0 $grid-unit-15 $grid-unit-15 0; - width: 200px; - text-align: center; - display: flex; - flex-direction: column; - - &.is-block-variation { - width: 90px; - - button { - display: inline-flex; - margin-right: 0; - height: auto; - } - } - - .block-setup-block-layout-list__item-title { - padding: $grid-unit-05 0; - font-size: $helptext-font-size; - } - - .block-setup-block-layout-list__item { - height: 100%; - max-height: 140px; - display: flex; - flex-direction: column; - padding: 2px; - transition: all 0.05s ease-in-out; - @include reduce-motion("transition"); - border-radius: $radius-block-ui; - border: $border-width solid $gray-300; - - &:hover { - border: $border-width solid var(--wp-admin-theme-color); - } - - &:focus { - box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - // Windows High Contrast mode will show this outline, but not the box-shadow. - outline: 2px solid transparent; - } - - .block-editor-block-preview__container { - margin: auto 0; - cursor: pointer; // This is for the BlockPreview. - } - - .block-setup-block-layout-list__item-variation-icon { - color: var(--wp-admin-theme-color); - padding: $grid-unit-05 * 1.5; - border-radius: $radius-block-ui; - box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color); - display: inline-flex; - margin: $grid-unit-15 auto auto auto; - - svg { - fill: currentColor; - outline: none; - } - } - } - } - - // Size consecutive block variation icons the same. - .block-setup-block-layout-list__list-item.is-block-variation .block-setup-block-layout-list__item { - height: 90px; - min-height: 90px; - } - - // Size the block variation icon same as the thumbnail on step 1. - .block-setup-block-layout-list__list-item:not(.is-block-variation) + .block-setup-block-layout-list__list-item.is-block-variation .block-setup-block-layout-list__item { - height: 100%; - } -} - -.components-button.block-setup-block-layout-back-button.is-tertiary.has-icon { - color: inherit; - padding-left: 0; - display: inline-flex; - margin-right: auto; - margin-top: -$grid-unit-15; - - &:hover:not(:disabled) { - box-shadow: none; - color: var(--wp-admin-theme-color); - } - - &:active:not(:disabled) { - background: transparent; - color: $gray-300; - } - - svg { - margin-right: 0; - } -} From c58efb6be9426eea0bdc3de7c088db4fd5c3df10 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Sat, 17 Apr 2021 00:08:34 +0300 Subject: [PATCH 09/15] add title to grid patterns --- .../src/components/block-pattern-setup/index.js | 16 ++++++++++------ .../components/block-pattern-setup/style.scss | 5 +++++ 2 files changed, 15 insertions(+), 6 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 9ea6c836f1edf..b1fd46ade2eef 100644 --- a/packages/block-editor/src/components/block-pattern-setup/index.js +++ b/packages/block-editor/src/components/block-pattern-setup/index.js @@ -74,14 +74,15 @@ const SetupContent = ( { }; function BlockPattern( { pattern, onSelect, composite } ) { - const { blocks, viewportWidth = 700 } = pattern; + const baseClassName = 'block-editor-block-pattern-setup-list'; + const { blocks, title, description, viewportWidth = 700 } = pattern; const descriptionId = useInstanceId( BlockPattern, - 'block-editor-block-pattern-setup-list__item-description' + `${ baseClassName }__item-description` ); return (
      @@ -89,17 +90,20 @@ function BlockPattern( { pattern, onSelect, composite } ) { role="option" as="div" { ...composite } - className="block-editor-block-pattern-setup-list__item" + className={ `${ baseClassName }__item` } onClick={ () => onSelect( blocks ) } > +
      + { title } +
      - { !! pattern.description && ( + { !! description && ( - { pattern.description } + { description } ) }
      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 9db2dad7b8610..a9cc10bf7a91f 100644 --- a/packages/block-editor/src/components/block-pattern-setup/style.scss +++ b/packages/block-editor/src/components/block-pattern-setup/style.scss @@ -25,6 +25,11 @@ 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__toolbar { From 4c476cdfe58d97785b2c67ce152edf9624c0082b Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Sat, 17 Apr 2021 00:28:52 +0300 Subject: [PATCH 10/15] provide rootClientId for pattern fetching --- .../components/block-pattern-setup/index.js | 2 +- .../block-pattern-setup/use-patterns-setup.js | 19 +++++++++++-------- 2 files changed, 12 insertions(+), 9 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 b1fd46ade2eef..ad6c94166c047 100644 --- a/packages/block-editor/src/components/block-pattern-setup/index.js +++ b/packages/block-editor/src/components/block-pattern-setup/index.js @@ -142,7 +142,7 @@ const BlockPatternSetup = ( { const [ activeSlide, setActiveSlide ] = useState( 0 ); const [ showBlank, setShowBlank ] = useState( false ); const { replaceBlock } = useDispatch( blockEditorStore ); - const patterns = usePatternsSetup( blockName, filterPatternsFn ); + const patterns = usePatternsSetup( clientId, blockName, filterPatternsFn ); if ( ! patterns?.length || showBlank ) { return startBlankComponent; diff --git a/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js b/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js index 3172da940ea1c..90c4ea16756a3 100644 --- a/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js +++ b/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js @@ -8,27 +8,30 @@ import { useSelect } from '@wordpress/data'; */ import { store as blockEditorStore } from '../../store'; -function usePatternsSetup( blockName, filterPatternsFn ) { +function usePatternsSetup( clientId, blockName, filterPatternsFn ) { const { patterns } = useSelect( ( select ) => { const { + getBlockRootClientId, __experimentalGetPatternsByBlockTypes, __experimentalGetAllowedPatterns, } = select( blockEditorStore ); + const rootClientId = getBlockRootClientId( clientId ); let _patterns; // TODO maybe support combination of scoped and provided function?? if ( filterPatternsFn ) { - // TODO check rootClientId - _patterns = __experimentalGetAllowedPatterns().filter( - filterPatternsFn - ); + _patterns = __experimentalGetAllowedPatterns( + rootClientId + ).filter( filterPatternsFn ); } else { - // TODO check and rootClientId - _patterns = __experimentalGetPatternsByBlockTypes( blockName ); + _patterns = __experimentalGetPatternsByBlockTypes( + blockName, + rootClientId + ); } return { patterns: _patterns }; }, - [ blockName ] + [ clientId, blockName, filterPatternsFn ] ); return patterns; From 7d682c3ecbc0a8dea209d9371b36e95db74d1c64 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 21 Apr 2021 12:38:27 +0200 Subject: [PATCH 11/15] Polish. --- .../src/components/block-pattern-setup/style.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) 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 a9cc10bf7a91f..c3e2cb82d66a5 100644 --- a/packages/block-editor/src/components/block-pattern-setup/style.scss +++ b/packages/block-editor/src/components/block-pattern-setup/style.scss @@ -13,6 +13,7 @@ .block-editor-block-pattern-setup__toolbar { justify-content: center; } + .block-editor-block-pattern-setup__container { display: grid; grid-template-columns: 1fr 1fr; @@ -20,18 +21,27 @@ 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; .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-preview__container { + border-radius: $radius-block-ui; + } } } + .block-editor-block-pattern-setup__toolbar { box-sizing: border-box; position: relative; From 4f8169768cd10b23734b45aee430392aa09996f5 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 22 Apr 2021 09:08:14 +0200 Subject: [PATCH 12/15] Add border, fix box sizing. --- .../block-editor/src/components/block-pattern-setup/style.scss | 2 ++ 1 file changed, 2 insertions(+) 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 c3e2cb82d66a5..da362df93a7e5 100644 --- a/packages/block-editor/src/components/block-pattern-setup/style.scss +++ b/packages/block-editor/src/components/block-pattern-setup/style.scss @@ -38,6 +38,7 @@ .block-editor-block-preview__container { border-radius: $radius-block-ui; + border: $border-width solid $gray-300; } } } @@ -79,6 +80,7 @@ display: flex; flex-direction: column; width: 100%; + box-sizing: border-box; .carousel-container { overflow: hidden; From 3dfbb7bb593a34f31c60c7744abe5c3f7d442d82 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 22 Apr 2021 11:50:57 +0300 Subject: [PATCH 13/15] adress feedback --- .../components/block-pattern-setup/index.js | 41 +++++----- .../block-pattern-setup/setup-toolbar.js | 80 +++++++++++-------- .../block-pattern-setup/use-patterns-setup.js | 20 ++--- 3 files changed, 74 insertions(+), 67 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 ad6c94166c047..26c5533be8c84 100644 --- a/packages/block-editor/src/components/block-pattern-setup/index.js +++ b/packages/block-editor/src/components/block-pattern-setup/index.js @@ -31,14 +31,13 @@ const SetupContent = ( { } ) => { const composite = useCompositeState(); const containerClass = 'block-editor-block-pattern-setup__container'; - let content; if ( viewMode === VIEWMODES.carousel ) { const slideClass = new Map( [ [ activeSlide, 'active-slide' ], [ activeSlide - 1, 'previous-slide' ], [ activeSlide + 1, 'next-slide' ], ] ); - content = ( + return (
        { patterns.map( ( pattern, index ) => ( @@ -51,26 +50,24 @@ const SetupContent = ( {
      ); - } else if ( viewMode === VIEWMODES.grid ) { - content = ( - - { patterns.map( ( pattern ) => ( - - ) ) } - - ); } - return content; + return ( + + { patterns.map( ( pattern ) => ( + + ) ) } + + ); }; function BlockPattern( { pattern, onSelect, composite } ) { @@ -160,7 +157,7 @@ const BlockPatternSetup = ( { viewMode={ viewMode } setViewMode={ setViewMode } activeSlide={ activeSlide } - totalSlides={ +patterns?.length } + totalSlides={ patterns.length } handleNext={ () => { setActiveSlide( ( active ) => active + 1 ); } } diff --git a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js index fe69f962bb338..7eba89edb2579 100644 --- a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js +++ b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js @@ -15,7 +15,38 @@ import { */ import { VIEWMODES } from './constants'; -function SetupToolbar( { +const Actions = ( { onStartBlank, onBlockPatternSelect } ) => ( +
      + + +
      +); + +const CarouselNavigation = ( { + handlePrevious, + handleNext, + activeSlide, + totalSlides, +} ) => ( +
      +
      +); + +const SetupToolbar = ( { viewMode, setViewMode, handlePrevious, @@ -24,25 +55,8 @@ function SetupToolbar( { totalSlides, onBlockPatternSelect, onStartBlank, -} ) { +} ) => { const isCarouselView = viewMode === VIEWMODES.carousel; - const navigation = ( -
      -
      - ); - const displayControls = (
      ); - - const actions = ( -
      - - -
      - ); - return (
      - { isCarouselView && navigation } + { isCarouselView && ( + + ) } { displayControls } - { isCarouselView && actions } + { isCarouselView && ( + + ) }
      ); -} +}; export default SetupToolbar; diff --git a/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js b/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js index 90c4ea16756a3..1b6a90b87457a 100644 --- a/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js +++ b/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js @@ -9,7 +9,7 @@ import { useSelect } from '@wordpress/data'; import { store as blockEditorStore } from '../../store'; function usePatternsSetup( clientId, blockName, filterPatternsFn ) { - const { patterns } = useSelect( + return useSelect( ( select ) => { const { getBlockRootClientId, @@ -17,24 +17,18 @@ function usePatternsSetup( clientId, blockName, filterPatternsFn ) { __experimentalGetAllowedPatterns, } = select( blockEditorStore ); const rootClientId = getBlockRootClientId( clientId ); - let _patterns; - // TODO maybe support combination of scoped and provided function?? if ( filterPatternsFn ) { - _patterns = __experimentalGetAllowedPatterns( - rootClientId - ).filter( filterPatternsFn ); - } else { - _patterns = __experimentalGetPatternsByBlockTypes( - blockName, - rootClientId + return __experimentalGetAllowedPatterns( rootClientId ).filter( + filterPatternsFn ); } - return { patterns: _patterns }; + return __experimentalGetPatternsByBlockTypes( + blockName, + rootClientId + ); }, [ clientId, blockName, filterPatternsFn ] ); - - return patterns; } export default usePatternsSetup; From ce6e532caaa2ab010e393568fb7f80912e947538 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 22 Apr 2021 11:08:50 +0200 Subject: [PATCH 14/15] Fix z-index. --- packages/base-styles/_z-index.scss | 5 +++++ .../src/components/block-pattern-setup/style.scss | 10 ++++++---- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index b028f3d3023b5..8baf03c3fa61b 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -76,6 +76,11 @@ $z-layers: ( // should overlap most block content. ".block-editor-block-list__block.is-{selected,hovered} .block-editor-block-mover": 61, + // Query block setup state. + ".block-editor-block-pattern-setup .pattern-slide": 100, + ".block-editor-block-pattern-setup .{next,previous}-slide": 101, + ".block-editor-block-pattern-setup .active-slide": 102, + // Show sidebar above wp-admin navigation bar for mobile viewports: // #wpadminbar { z-index: 99999 } ".interface-interface-skeleton__sidebar": 100000, 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 da362df93a7e5..a1876fd5c6022 100644 --- a/packages/block-editor/src/components/block-pattern-setup/style.scss +++ b/packages/block-editor/src/components/block-pattern-setup/style.scss @@ -100,21 +100,23 @@ width: 100%; margin: auto; padding: $grid-unit-20; - z-index: 100; transition: transform 0.5s, opacity 0.5s, z-index 0.5s; + z-index: z-index(".block-editor-block-pattern-setup .pattern-slide"); &.active-slide { opacity: 1; position: relative; - z-index: 900; + z-index: z-index(".block-editor-block-pattern-setup .active-slide"); } + &.previous-slide { transform: translateX(-100%); - z-index: 800; + z-index: z-index(".block-editor-block-pattern-setup .{next,previous}-slide"); } + &.next-slide { transform: translateX(100%); - z-index: 800; + z-index: z-index(".block-editor-block-pattern-setup .{next,previous}-slide"); } } } From b9c30f3f42975b6db90049df43e24813f3ce4ad2 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 22 Apr 2021 14:26:07 +0300 Subject: [PATCH 15/15] add e2e tests --- packages/e2e-tests/plugins/query-block.php | 38 +++++++ .../specs/experiments/blocks/query.test.js | 103 ++++++++++++++++++ 2 files changed, 141 insertions(+) create mode 100644 packages/e2e-tests/plugins/query-block.php create mode 100644 packages/e2e-tests/specs/experiments/blocks/query.test.js diff --git a/packages/e2e-tests/plugins/query-block.php b/packages/e2e-tests/plugins/query-block.php new file mode 100644 index 0000000000000..f985c0d772224 --- /dev/null +++ b/packages/e2e-tests/plugins/query-block.php @@ -0,0 +1,38 @@ + __( 'Query Test 1', 'gutenberg' ), + 'blockTypes' => array( 'core/query' ), + 'content' => ' + + + + ', + ) +); +register_block_pattern( + 'query/test-2', + array( + 'title' => __( 'Query Test 2', 'gutenberg' ), + 'blockTypes' => array( 'core/query' ), + 'content' => ' + + + + + ', + ) +); diff --git a/packages/e2e-tests/specs/experiments/blocks/query.test.js b/packages/e2e-tests/specs/experiments/blocks/query.test.js new file mode 100644 index 0000000000000..254acdd009b2d --- /dev/null +++ b/packages/e2e-tests/specs/experiments/blocks/query.test.js @@ -0,0 +1,103 @@ +/** + * WordPress dependencies + */ +import { + activatePlugin, + deactivatePlugin, + activateTheme, + createNewPost, + insertBlock, + publishPost, + trashAllPosts, +} from '@wordpress/e2e-test-utils'; + +const createDemoPosts = async () => { + await createNewPost( { postType: 'post', title: `Post 1` } ); + await publishPost(); +}; + +describe( 'Query block', () => { + beforeAll( async () => { + await activatePlugin( 'gutenberg-test-query-block' ); + await activateTheme( 'tt1-blocks' ); + await createDemoPosts(); + } ); + afterAll( async () => { + await activateTheme( 'twentytwentyone' ); + await trashAllPosts(); + await deactivatePlugin( 'gutenberg-test-query-block' ); + } ); + beforeEach( async () => { + await createNewPost( { postType: 'page', title: `Query Page` } ); + } ); + afterEach( async () => { + await trashAllPosts( 'page' ); + } ); + describe( 'Query block insertion', () => { + it( 'Carousel', async () => { + await insertBlock( 'Query' ); + // Wait for pattern blocks to be loaded. + await page.waitForSelector( + '.block-editor-block-pattern-setup__container .wp-block-post-title' + ); + /** + * Ensure that carousel is working by checking slider css classes + * and navigating to the next pattern. + */ + await page.waitForSelector( + 'li.pattern-slide.active-slide[aria-label="Query Test 1"]' + ); + const nextPatternButton = await page.waitForSelector( + '.block-editor-block-pattern-setup__navigation button[aria-label="Next pattern"]' + ); + await nextPatternButton.click(); + await page.waitForSelector( + 'li.pattern-slide.active-slide[aria-label="Query Test 2"]' + ); + // Choose the selected pattern. + const chooseButton = await page.waitForXPath( + '//div[contains(@class, "block-editor-block-pattern-setup__actions")]//button[text()="Choose"]' + ); + chooseButton.click(); + // Wait for pattern setup to go away. + await page.waitForSelector( '.block-editor-block-pattern-setup', { + hidden: true, + } ); + /** + * We can't use `getEditedPostContent` easily for now because + * `query` makes used of `instanceId` so it's not very reliable. + * This should be revisited. + */ + await page.waitForSelector( '.wp-block-post-date' ); + await page.waitForSelector( '.wp-block-post-title' ); + } ); + it( 'Grid view', async () => { + await insertBlock( 'Query' ); + // Wait for patterns setup to be loaded. + await page.waitForSelector( + '.block-editor-block-pattern-setup__display-controls' + ); + // Click the Grid view button. + const gridViewButton = await page.waitForSelector( + '.block-editor-block-pattern-setup__display-controls button[aria-label="Grid view"]' + ); + await gridViewButton.click(); + // Wait for patterns to be loaded and click the wanted pattern. + const gridPattern = await page.waitForXPath( + '//div[@class="block-editor-block-pattern-setup-list__item-title" and contains(text(), "Query Test 2")]' + ); + await gridPattern.click(); + // Wait for pattern setup to go away. + await page.waitForSelector( '.block-editor-block-pattern-setup', { + hidden: true, + } ); + /** + * We can't use `getEditedPostContent` easily for now because + * `query` makes used of `instanceId` so it's not very reliable. + * This should be revisited. + */ + await page.waitForSelector( '.wp-block-post-date' ); + await page.waitForSelector( '.wp-block-post-title' ); + } ); + } ); +} );