-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Suggest block pattern transformations that are contextual to the curr…
…ently selected 'simple' blocks (no InnerBlocks) (#30469) * spin off from #29890 for simple blocks without InnerBlocks * __experimentalGetBlockAttributesNamesByRole tests * update patterns * useTransformedPatterns and refactoring part 1 * getMatchingBlockByName tests + and other jsdoc * getPatternTransformedBlocks + transformMatchingBlock tests * add role:content to more blocks + a couple test patterns * pattern list padding * rename role to __experimentalRole * Update docs suggestion Co-authored-by: Miguel Fonseca <miguelcsf@gmail.com> * fix tests + docs * change patterns * update social pattern Co-authored-by: James Koster <james@jameskoster.co.uk> Co-authored-by: Miguel Fonseca <miguelcsf@gmail.com>
- Loading branch information
3 people
authored
Apr 13, 2021
1 parent
3e8ac5a
commit 5c1e913
Showing
20 changed files
with
1,113 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
137 changes: 137 additions & 0 deletions
137
packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { useState } from '@wordpress/element'; | ||
| import { useInstanceId } from '@wordpress/compose'; | ||
| import { chevronRight } from '@wordpress/icons'; | ||
|
|
||
| import { | ||
| MenuGroup, | ||
| MenuItem, | ||
| Popover, | ||
| VisuallyHidden, | ||
| __unstableComposite as Composite, | ||
| __unstableUseCompositeState as useCompositeState, | ||
| __unstableCompositeItem as CompositeItem, | ||
| } from '@wordpress/components'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import BlockPreview from '../block-preview'; | ||
| import useTransformedPatterns from './use-transformed-patterns'; | ||
|
|
||
| function PatternTransformationsMenu( { | ||
| blocks, | ||
| patterns: statePatterns, | ||
| onSelect, | ||
| } ) { | ||
| const [ showTransforms, setShowTransforms ] = useState( false ); | ||
| const patterns = useTransformedPatterns( statePatterns, blocks ); | ||
| if ( ! patterns.length ) return null; | ||
|
|
||
| return ( | ||
| <MenuGroup className="block-editor-block-switcher__pattern__transforms__menugroup"> | ||
| { showTransforms && ( | ||
| <PreviewPatternsPopover | ||
| patterns={ patterns } | ||
| onSelect={ onSelect } | ||
| /> | ||
| ) } | ||
| <MenuItem | ||
| onClick={ ( event ) => { | ||
| event.preventDefault(); | ||
| setShowTransforms( ! showTransforms ); | ||
| } } | ||
| icon={ chevronRight } | ||
| > | ||
| { __( 'Patterns' ) } | ||
| </MenuItem> | ||
| </MenuGroup> | ||
| ); | ||
| } | ||
|
|
||
| function PreviewPatternsPopover( { patterns, onSelect } ) { | ||
| return ( | ||
| <div className="block-editor-block-switcher__popover__preview__parent"> | ||
| <div className="block-editor-block-switcher__popover__preview__container"> | ||
| <Popover | ||
| className="block-editor-block-switcher__preview__popover" | ||
| position="bottom right" | ||
| > | ||
| <div className="block-editor-block-switcher__preview"> | ||
| <div className="block-editor-block-switcher__preview-title"> | ||
| { __( 'Preview' ) } | ||
| </div> | ||
| <BlockPatternsList | ||
| patterns={ patterns } | ||
| onSelect={ onSelect } | ||
| /> | ||
| </div> | ||
| </Popover> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function BlockPatternsList( { patterns, onSelect } ) { | ||
| const composite = useCompositeState(); | ||
| return ( | ||
| <Composite | ||
| { ...composite } | ||
| role="listbox" | ||
| className="block-editor-block-switcher__preview-patterns-container" | ||
| aria-label={ __( 'Patterns list' ) } | ||
| > | ||
| { patterns.map( ( pattern ) => ( | ||
| <BlockPattern | ||
| key={ pattern.name } | ||
| pattern={ pattern } | ||
| onSelect={ onSelect } | ||
| composite={ composite } | ||
| /> | ||
| ) ) } | ||
| </Composite> | ||
| ); | ||
| } | ||
|
|
||
| function BlockPattern( { pattern, onSelect, composite } ) { | ||
| // TODO check pattern/preview width... | ||
| const baseClassName = | ||
| 'block-editor-block-switcher__preview-patterns-container'; | ||
| const descriptionId = useInstanceId( | ||
| BlockPattern, | ||
| `${ baseClassName }-list__item-description` | ||
| ); | ||
| return ( | ||
| <div | ||
| className={ `${ baseClassName }-list__list-item` } | ||
| aria-label={ pattern.title } | ||
| aria-describedby={ pattern.description ? descriptionId : undefined } | ||
| > | ||
| <CompositeItem | ||
| role="option" | ||
| as="div" | ||
| { ...composite } | ||
| className={ `${ baseClassName }-list__item` } | ||
| onClick={ () => onSelect( pattern.transformedBlocks ) } | ||
| > | ||
| <BlockPreview | ||
| blocks={ pattern.transformedBlocks } | ||
| viewportWidth={ pattern.viewportWidth || 500 } | ||
| /> | ||
| <div className={ `${ baseClassName }-list__item-title` }> | ||
| { pattern.title } | ||
| </div> | ||
| </CompositeItem> | ||
| { !! pattern.description && ( | ||
| <VisuallyHidden id={ descriptionId }> | ||
| { pattern.description } | ||
| </VisuallyHidden> | ||
| ) } | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default PatternTransformationsMenu; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.