Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Redesign the main pattern inserter #44028

Merged
merged 34 commits into from
Oct 18, 2022
Merged

Redesign the main pattern inserter #44028

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
ed3374c
Redesign the main pattern inserter
youknowriad Sep 9, 2022
cbd9e97
Use navigation pattern on mobile
youknowriad Sep 9, 2022
d025a99
Keyboard navigation improvements
youknowriad Sep 9, 2022
3685539
Add a shadow and a subtle animation to the patterns panel
youknowriad Sep 12, 2022
e735049
Polish
jasmussen Sep 12, 2022
cb1d14a
Restore gray bg.
jasmussen Sep 13, 2022
879a12b
Add right border.
jasmussen Sep 13, 2022
f7474db
Add width animation
youknowriad Sep 13, 2022
d8a2f1e
Fix site editor patterns category selection
youknowriad Sep 13, 2022
67c1012
Fix inserter width on mobile
youknowriad Sep 13, 2022
dde8af0
Move the explore patterns button to the bottom
youknowriad Sep 13, 2022
6cdc47f
Reduce the transition duration
youknowriad Sep 13, 2022
52c3964
Enhance keyboard navigation
youknowriad Sep 13, 2022
dc0edfa
Better nested constrained tabbing support
youknowriad Sep 13, 2022
fd3b86b
Add shadow to pattern items and remove title from structure.
mtias Sep 14, 2022
274540e
Make drag chip read "Pattern" when dragging a pattern.
mtias Sep 14, 2022
d9bb800
Fix uncategorized patterns
youknowriad Sep 15, 2022
670bd2c
Add scrollbar gutter
youknowriad Sep 15, 2022
1c969fb
Try a stronger border outline for selecting patterns.
mtias Sep 16, 2022
197cad0
Apply the new pattern preview style to the main inserter only
youknowriad Sep 20, 2022
c714960
Simplify border shape and use dark gray.
mtias Sep 20, 2022
165d3f6
Use Heading component for category label.
mtias Sep 20, 2022
3caa59a
Restrict hover effects to main inserter.
mtias Sep 20, 2022
cd4a7a5
Avoid animations and width changes for now
youknowriad Sep 22, 2022
480fa44
Add label for the category patterns tab
youknowriad Sep 28, 2022
7958119
Move the aria label for the list items to the correct element
youknowriad Oct 3, 2022
0e845db
Try a different style for active navigation element.
mtias Oct 6, 2022
45a295c
Implement roving tab order for the pattern categories and remove dialog
youknowriad Oct 7, 2022
46b3936
Use nav + list
youknowriad Oct 12, 2022
79908fa
Remove composite items
youknowriad Oct 14, 2022
22bc21d
Add aria-current
youknowriad Oct 14, 2022
321467a
Remove the heading component
youknowriad Oct 17, 2022
ae39524
Remove useless styles
youknowriad Oct 17, 2022
1a702d6
revert unnecessary change
youknowriad Oct 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions packages/block-editor/src/components/block-draggable/draggable-chip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
import { _n, sprintf } from '@wordpress/i18n';
import { __, _n, sprintf } from '@wordpress/i18n';
import { Flex, FlexItem } from '@wordpress/components';
import { dragHandle } from '@wordpress/icons';

Expand All @@ -10,7 +10,8 @@ import { dragHandle } from '@wordpress/icons';
*/
import BlockIcon from '../block-icon';

export default function BlockDraggableChip( { count, icon } ) {
export default function BlockDraggableChip( { count, icon, isPattern } ) {
const patternLabel = isPattern && __( 'Pattern' );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we pass the label as a param here instead of isPattern. We will probably need it for the media tab too.

return (
<div className="block-editor-block-draggable-chip-wrapper">
<div
Expand All @@ -25,6 +26,7 @@ export default function BlockDraggableChip( { count, icon } ) {
{ icon ? (
<BlockIcon icon={ icon } />
) : (
patternLabel ||
sprintf(
/* translators: %d: Number of blocks. */
_n( '%d block', '%d blocks', count ),
Expand Down
14 changes: 9 additions & 5 deletions packages/block-editor/src/components/block-patterns-list/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@ function BlockPattern( { isDraggable, pattern, onClick, composite } ) {
const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;

return (
<InserterDraggableBlocks isEnabled={ isDraggable } blocks={ blocks }>
<InserterDraggableBlocks
isEnabled={ isDraggable }
blocks={ blocks }
isPattern={ !! pattern }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When would !! pattern not be true?

>
{ ( { draggable, onDragStart, onDragEnd } ) => (
<div
className="block-editor-block-patterns-list__list-item"
aria-label={ pattern.title }
aria-describedby={
pattern.description ? descriptionId : undefined
}
draggable={ draggable }
onDragStart={ onDragStart }
onDragEnd={ onDragEnd }
Expand All @@ -40,6 +40,10 @@ function BlockPattern( { isDraggable, pattern, onClick, composite } ) {
{ ...composite }
className="block-editor-block-patterns-list__item"
onClick={ () => onClick( pattern, blocks ) }
aria-label={ pattern.title }
aria-describedby={
pattern.description ? descriptionId : undefined
}
>
<BlockPreview
blocks={ blocks }
Expand Down
5 changes: 2 additions & 3 deletions packages/block-editor/src/components/block-patterns-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@
display: flex;
align-items: center;
overflow: hidden;
border-radius: $radius-block-ui;
border: $border-width solid $gray-100;
border-radius: 4px;
}

.block-editor-block-patterns-list__item-title {
Expand All @@ -29,7 +28,7 @@
}

&:hover .block-editor-block-preview__container {
border: $border-width solid var(--wp-admin-theme-color);
box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
}

&:focus .block-editor-block-preview__container {
Expand Down
14 changes: 12 additions & 2 deletions packages/block-editor/src/components/inserter-draggable-blocks/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,13 @@ import { Draggable } from '@wordpress/components';
*/
import BlockDraggableChip from '../block-draggable/draggable-chip';

const InserterDraggableBlocks = ( { isEnabled, blocks, icon, children } ) => {
const InserterDraggableBlocks = ( {
isEnabled,
blocks,
icon,
children,
isPattern,
} ) => {
const transferData = {
type: 'inserter',
blocks,
Expand All @@ -18,7 +24,11 @@ const InserterDraggableBlocks = ( { isEnabled, blocks, icon, children } ) => {
__experimentalTransferDataType="wp-blocks"
transferData={ transferData }
__experimentalDragComponent={
<BlockDraggableChip count={ blocks.length } icon={ icon } />
<BlockDraggableChip
count={ blocks.length }
icon={ icon }
isPattern={ isPattern }
/>
}
>
{ ( { onDraggableStart, onDraggableEnd } ) => {
Expand Down
Loading