-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Block Library: Update Columns block to use Patterns API (#18283)
* Block library: Refactor Columns block to use Patterns API * Blocks: Add support for the default block pattern * Components: Add size prop to the IconButton component * Change the behavior of the selector which returns the default block pattern * Block editor: Extract BLockPatternPicker component * Abstract columns picker selection with __experimentalBlockPatternPicker * Use Icon component to unify the way icons are handled
- Loading branch information
Showing
20 changed files
with
419 additions
and
400 deletions.
There are no files selected for viewing
67 changes: 67 additions & 0 deletions
67
packages/block-editor/src/components/block-pattern-picker/index.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,67 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import classnames from 'classnames'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { Button, IconButton, Placeholder } from '@wordpress/components'; | ||
|
|
||
| function BlockPatternPicker( { | ||
| icon = 'layout', | ||
| label = __( 'Choose pattern' ), | ||
| instructions = __( 'Select a pattern to start with.' ), | ||
| patterns, | ||
| onSelect, | ||
| allowSkip, | ||
| } ) { | ||
| const classes = classnames( 'block-editor-block-pattern-picker', { | ||
| 'has-many-patterns': patterns.length > 4, | ||
| } ); | ||
|
|
||
| return ( | ||
| <Placeholder | ||
| icon={ icon } | ||
| label={ label } | ||
| instructions={ instructions } | ||
| className={ classes } | ||
| > | ||
| { | ||
| /* | ||
| * Disable reason: The `list` ARIA role is redundant but | ||
| * Safari+VoiceOver won't announce the list otherwise. | ||
| */ | ||
| /* eslint-disable jsx-a11y/no-redundant-roles */ | ||
| } | ||
| <ul className="block-editor-block-pattern-picker__patterns" role="list"> | ||
| { patterns.map( ( pattern ) => ( | ||
| <li key={ pattern.name }> | ||
| <IconButton | ||
| isLarge | ||
| icon={ pattern.icon } | ||
| size={ 48 } | ||
| onClick={ () => onSelect( pattern ) } | ||
| className="block-editor-block-pattern-picker__pattern" | ||
| label={ pattern.label } | ||
| /> | ||
| </li> | ||
| ) ) } | ||
| </ul> | ||
| { /* eslint-enable jsx-a11y/no-redundant-roles */ } | ||
| { allowSkip && ( | ||
| <div className="block-editor-block-pattern-picker__skip"> | ||
| <Button | ||
| isLink | ||
| onClick={ () => onSelect() } | ||
| > | ||
| { __( 'Skip' ) } | ||
| </Button> | ||
| </div> | ||
| ) } | ||
| </Placeholder> | ||
| ); | ||
| } | ||
|
|
||
| export default BlockPatternPicker; |
74 changes: 74 additions & 0 deletions
74
packages/block-editor/src/components/block-pattern-picker/style.scss
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,74 @@ | ||
| .block-editor-block-pattern-picker { | ||
| .components-placeholder__instructions { | ||
| // Defer to vertical margins applied by template picker options. | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .components-placeholder__fieldset { | ||
| // Options will render horizontally, but the immediate children of the | ||
| // fieldset are the options and the skip button, oriented vertically. | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| &.has-many-patterns .components-placeholder__fieldset { | ||
| // Allow options to occupy a greater amount of the available space if | ||
| // many options exist. | ||
| max-width: 90%; | ||
| } | ||
| } | ||
|
|
||
| .block-editor-block-pattern-picker__patterns.block-editor-block-pattern-picker__patterns { | ||
| display: flex; | ||
| justify-content: center; | ||
| flex-direction: row; | ||
| flex-wrap: wrap; | ||
| width: 100%; | ||
| margin: $grid-size-small 0; | ||
| list-style: none; | ||
|
|
||
| > li { | ||
| list-style: none; | ||
| margin: $grid-size; | ||
| flex-shrink: 1; | ||
| max-width: 100px; | ||
| } | ||
|
|
||
| .block-editor-block-pattern-picker__pattern { | ||
| padding: $grid-size; | ||
| } | ||
| } | ||
|
|
||
| .block-editor-block-pattern-picker__pattern { | ||
| width: 100%; | ||
|
|
||
| &.components-icon-button { | ||
| // Override default styles inherited from <IconButton /> to center | ||
| // icon horizontally. | ||
| justify-content: center; | ||
|
|
||
| &.is-default { | ||
| background-color: $white; | ||
| } | ||
| } | ||
|
|
||
| &.components-button { | ||
| // Override default styles inherited from <Button /> to allow button | ||
| // to grow vertically. | ||
| height: auto; | ||
| padding: 0; | ||
| } | ||
|
|
||
| &::before { | ||
| // Use `padding-bottom` trick to style element as perfect square. | ||
| content: ""; | ||
| padding-bottom: 100%; | ||
| } | ||
|
|
||
| &:first-child { | ||
| margin-left: 0; | ||
| } | ||
|
|
||
| &:last-child { | ||
| margin-right: 0; | ||
| } | ||
| } |
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
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
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.