From 25ebfe3040a79cf7bd315de635b82d6fdb4cc229 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 26 Jun 2023 11:08:08 +0100 Subject: [PATCH 1/7] Use button inside title --- .../src/components/page-library/grid-item.js | 188 ++++++++++++++++++ .../src/components/page-patterns/grid-item.js | 18 +- 2 files changed, 205 insertions(+), 1 deletion(-) create mode 100644 packages/edit-site/src/components/page-library/grid-item.js diff --git a/packages/edit-site/src/components/page-library/grid-item.js b/packages/edit-site/src/components/page-library/grid-item.js new file mode 100644 index 00000000000000..6b484cc027ef9c --- /dev/null +++ b/packages/edit-site/src/components/page-library/grid-item.js @@ -0,0 +1,188 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { BlockPreview } from '@wordpress/block-editor'; +import { + __experimentalConfirmDialog as ConfirmDialog, + DropdownMenu, + MenuGroup, + MenuItem, + __experimentalHeading as Heading, + __experimentalHStack as HStack, + __unstableCompositeItem as CompositeItem, + Button, +} from '@wordpress/components'; +import { useInstanceId } from '@wordpress/compose'; +import { useDispatch } from '@wordpress/data'; +import { useState } from '@wordpress/element'; +import { __, sprintf } from '@wordpress/i18n'; +import { Icon, moreHorizontal } from '@wordpress/icons'; +import { store as noticesStore } from '@wordpress/notices'; +import { store as reusableBlocksStore } from '@wordpress/reusable-blocks'; +import { DELETE, BACKSPACE } from '@wordpress/keycodes'; + +/** + * Internal dependencies + */ +import { PATTERNS, USER_PATTERNS } from './utils'; +import { useLink } from '../routes/link'; + +export default function GridItem( { categoryId, composite, icon, item } ) { + const instanceId = useInstanceId( GridItem ); + const descriptionId = `edit-site-library__pattern-description-${ instanceId }`; + const [ isDeleteDialogOpen, setIsDeleteDialogOpen ] = useState( false ); + + const { __experimentalDeleteReusableBlock } = + useDispatch( reusableBlocksStore ); + const { createErrorNotice, createSuccessNotice } = + useDispatch( noticesStore ); + + const { onClick, href } = useLink( { + postType: item.type, + postId: item.type === USER_PATTERNS ? item.id : item.name, + categoryId, + categoryType: item.type, + canvas: 'edit', + } ); + + const onKeyDown = ( event ) => { + if ( DELETE === event.keyCode || BACKSPACE === event.keyCode ) { + setIsDeleteDialogOpen( true ); + } + }; + + const isEmpty = ! item.blocks?.length; + const patternClassNames = classnames( 'edit-site-library__pattern', { + 'is-placeholder': isEmpty, + } ); + const previewClassNames = classnames( 'edit-site-library__preview', { + 'is-inactive': item.type === PATTERNS, + } ); + + const deletePattern = async () => { + try { + await __experimentalDeleteReusableBlock( item.id ); + createSuccessNotice( __( 'Pattern successfully deleted.' ), { + type: 'snackbar', + } ); + } catch ( error ) { + const errorMessage = + error.message && error.code !== 'unknown_error' + ? error.message + : __( 'An error occurred while deleting the pattern.' ); + createErrorNotice( errorMessage, { type: 'snackbar' } ); + } + }; + + const isUserPattern = item.type === USER_PATTERNS; + let ariaDescription; + if ( isUserPattern ) { + // User patterns don't have descriptions, but can be edited and deleted, so include some help text. + ariaDescription = __( + 'Press Enter to edit, or Delete to delete the pattern.' + ); + } else if ( item.description ) { + ariaDescription = item.description; + } + + return ( + <> +
+ + { isEmpty && __( 'Empty pattern' ) } + { ! isEmpty && } + + { ariaDescription && ( + + ) } + +
+ { isDeleteDialogOpen && ( + setIsDeleteDialogOpen( false ) } + > + { __( 'Are you sure you want to delete this pattern?' ) } + + ) } + + ); +} diff --git a/packages/edit-site/src/components/page-patterns/grid-item.js b/packages/edit-site/src/components/page-patterns/grid-item.js index 0b1f6dc1fdf8df..441529e1c0583c 100644 --- a/packages/edit-site/src/components/page-patterns/grid-item.js +++ b/packages/edit-site/src/components/page-patterns/grid-item.js @@ -8,10 +8,12 @@ import classnames from 'classnames'; */ import { BlockPreview } from '@wordpress/block-editor'; import { + Button, __experimentalConfirmDialog as ConfirmDialog, DropdownMenu, MenuGroup, MenuItem, + __experimentalHeading as Heading, __experimentalHStack as HStack, Tooltip, Flex, @@ -188,7 +190,21 @@ function GridItem( { categoryId, item, ...props } ) { ) } - { item.title } + { item.type === PATTERNS ? ( + item.title + ) : ( + + + + ) } { item.type === PATTERNS && ( Date: Tue, 27 Jun 2023 09:04:44 +0100 Subject: [PATCH 2/7] Remove href --- packages/edit-site/src/components/page-library/grid-item.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-site/src/components/page-library/grid-item.js b/packages/edit-site/src/components/page-library/grid-item.js index 6b484cc027ef9c..cbcce957560cd6 100644 --- a/packages/edit-site/src/components/page-library/grid-item.js +++ b/packages/edit-site/src/components/page-library/grid-item.js @@ -131,7 +131,6 @@ export default function GridItem( { categoryId, composite, icon, item } ) { { icon && } From 780fb0cf69a306ee2c8b43db3d4f33dfe79d867e Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 27 Jun 2023 13:03:59 +0100 Subject: [PATCH 4/7] Fix link colors to match trunk $gray-600 --- .../src/components/page-library/style.scss | 115 ++++++++++++++++++ .../src/components/page-patterns/style.scss | 10 ++ 2 files changed, 125 insertions(+) create mode 100644 packages/edit-site/src/components/page-library/style.scss diff --git a/packages/edit-site/src/components/page-library/style.scss b/packages/edit-site/src/components/page-library/style.scss new file mode 100644 index 00000000000000..71807748ba8612 --- /dev/null +++ b/packages/edit-site/src/components/page-library/style.scss @@ -0,0 +1,115 @@ +.edit-site-library { + background: rgba(0, 0, 0, 0.05); + margin: $header-height 0 0; + .components-text { + color: $gray-600; + } + + .components-heading { + color: $gray-200; + } + + @include break-medium { + margin: 0; + } +} + +.edit-site-library__grid { + column-gap: $grid-unit-30; + @include break-large() { + column-count: 2; + } + + // Small top padding required to avoid cutting off the visible outline + // when hovering items. + padding-top: $border-width-focus-fallback; + margin-bottom: $grid-unit-40; + + .edit-site-library__pattern { + break-inside: avoid-column; + display: flex; + flex-direction: column; + margin-bottom: $grid-unit-60; + + .edit-site-library__preview { + border-radius: $radius-block-ui; + cursor: pointer; + overflow: hidden; + + &:focus { + box-shadow: inset 0 0 0 2px $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; + } + + &.is-inactive { + cursor: default; + } + } + + .edit-site-library__footer, + .edit-site-library__button { + color: $gray-600; + } + + &.is-placeholder .edit-site-library__preview { + min-height: $grid-unit-80; + color: $gray-600; + border: 1px dashed $gray-800; + display: flex; + align-items: center; + justify-content: center; + + &:focus { + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + } + } + } + + .edit-site-library__preview { + flex: 1; + margin-bottom: $grid-unit-20; + } +} + +// The increased specificity here is to overcome component styles +// without relying on internal component class names. +.edit-site-library__search { + &#{&} input[type="search"] { + background: $gray-800; + color: $gray-200; + + &:focus { + background: $gray-800; + } + } + + svg { + fill: $gray-600; + } +} + +.edit-site-library__pattern-title { + color: $gray-600; + + .is-link { + text-decoration: none; + color: $gray-600; + + &:hover, + &:focus { + color: $white; + } + } + + svg { + border-radius: $grid-unit-05; + background: var(--wp-block-synced-color); + fill: $white; + } +} + +.edit-site-library__no-results { + color: $gray-600; +} diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss index d6f0b897d0cf2a..79731999f46efa 100644 --- a/packages/edit-site/src/components/page-patterns/style.scss +++ b/packages/edit-site/src/components/page-patterns/style.scss @@ -139,6 +139,16 @@ .edit-site-patterns__pattern-title { color: $gray-200; + .is-link { + text-decoration: none; + color: $gray-200; + + &:hover, + &:focus { + color: $white; + } + } + .edit-site-patterns__pattern-icon { border-radius: $grid-unit-05; background: var(--wp-block-synced-color); From 5d6ff30a7194fea1eec2f7c5f971dbf82aa5c51f Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 27 Jun 2023 15:12:20 +0100 Subject: [PATCH 5/7] Remove redundant var --- packages/edit-site/src/components/page-library/grid-item.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/page-library/grid-item.js b/packages/edit-site/src/components/page-library/grid-item.js index fe2c8106f266ac..46447f74154eef 100644 --- a/packages/edit-site/src/components/page-library/grid-item.js +++ b/packages/edit-site/src/components/page-library/grid-item.js @@ -42,7 +42,7 @@ export default function GridItem( { categoryId, composite, icon, item } ) { const { createErrorNotice, createSuccessNotice } = useDispatch( noticesStore ); - const { onClick, href } = useLink( { + const { onClick } = useLink( { postType: item.type, postId: item.type === USER_PATTERNS ? item.id : item.name, categoryId, From c9edace0635ebee38e8a37b03c3137dc310fe8d2 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 28 Jun 2023 09:02:17 +0100 Subject: [PATCH 6/7] Amend colors as per review --- packages/edit-site/src/components/page-library/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/page-library/style.scss b/packages/edit-site/src/components/page-library/style.scss index 71807748ba8612..2871e40d8de852 100644 --- a/packages/edit-site/src/components/page-library/style.scss +++ b/packages/edit-site/src/components/page-library/style.scss @@ -95,7 +95,7 @@ .is-link { text-decoration: none; - color: $gray-600; + color: $gray-200; &:hover, &:focus { From 1b92dc6bf1b9767194b3bfaabe3d1bc294cd1525 Mon Sep 17 00:00:00 2001 From: scruffian Date: Mon, 10 Jul 2023 16:03:27 +0100 Subject: [PATCH 7/7] remove old files again --- .../src/components/page-library/grid-item.js | 190 ------------------ .../src/components/page-library/style.scss | 115 ----------- 2 files changed, 305 deletions(-) delete mode 100644 packages/edit-site/src/components/page-library/grid-item.js delete mode 100644 packages/edit-site/src/components/page-library/style.scss diff --git a/packages/edit-site/src/components/page-library/grid-item.js b/packages/edit-site/src/components/page-library/grid-item.js deleted file mode 100644 index 46447f74154eef..00000000000000 --- a/packages/edit-site/src/components/page-library/grid-item.js +++ /dev/null @@ -1,190 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - -/** - * WordPress dependencies - */ -import { BlockPreview } from '@wordpress/block-editor'; -import { - __experimentalConfirmDialog as ConfirmDialog, - DropdownMenu, - MenuGroup, - MenuItem, - __experimentalHeading as Heading, - __experimentalHStack as HStack, - __unstableCompositeItem as CompositeItem, - Button, -} from '@wordpress/components'; -import { useInstanceId } from '@wordpress/compose'; -import { useDispatch } from '@wordpress/data'; -import { useState } from '@wordpress/element'; -import { __, sprintf } from '@wordpress/i18n'; -import { Icon, moreHorizontal } from '@wordpress/icons'; -import { store as noticesStore } from '@wordpress/notices'; -import { store as reusableBlocksStore } from '@wordpress/reusable-blocks'; -import { DELETE, BACKSPACE } from '@wordpress/keycodes'; - -/** - * Internal dependencies - */ -import { PATTERNS, USER_PATTERNS } from './utils'; -import { useLink } from '../routes/link'; - -export default function GridItem( { categoryId, composite, icon, item } ) { - const instanceId = useInstanceId( GridItem ); - const descriptionId = `edit-site-library__pattern-description-${ instanceId }`; - const [ isDeleteDialogOpen, setIsDeleteDialogOpen ] = useState( false ); - - const { __experimentalDeleteReusableBlock } = - useDispatch( reusableBlocksStore ); - const { createErrorNotice, createSuccessNotice } = - useDispatch( noticesStore ); - - const { onClick } = useLink( { - postType: item.type, - postId: item.type === USER_PATTERNS ? item.id : item.name, - categoryId, - categoryType: item.type, - canvas: 'edit', - } ); - - const onKeyDown = ( event ) => { - if ( DELETE === event.keyCode || BACKSPACE === event.keyCode ) { - setIsDeleteDialogOpen( true ); - } - }; - - const isEmpty = ! item.blocks?.length; - const patternClassNames = classnames( 'edit-site-library__pattern', { - 'is-placeholder': isEmpty, - } ); - const previewClassNames = classnames( 'edit-site-library__preview', { - 'is-inactive': item.type === PATTERNS, - } ); - - const deletePattern = async () => { - try { - await __experimentalDeleteReusableBlock( item.id ); - createSuccessNotice( __( 'Pattern successfully deleted.' ), { - type: 'snackbar', - } ); - } catch ( error ) { - const errorMessage = - error.message && error.code !== 'unknown_error' - ? error.message - : __( 'An error occurred while deleting the pattern.' ); - createErrorNotice( errorMessage, { type: 'snackbar' } ); - } - }; - - const isUserPattern = item.type === USER_PATTERNS; - let ariaDescription; - if ( isUserPattern ) { - // User patterns don't have descriptions, but can be edited and deleted, so include some help text. - ariaDescription = __( - 'Press Enter to edit, or Delete to delete the pattern.' - ); - } else if ( item.description ) { - ariaDescription = item.description; - } - - return ( - <> -
- - { isEmpty && __( 'Empty pattern' ) } - { ! isEmpty && } - - { ariaDescription && ( - - ) } - -
- { isDeleteDialogOpen && ( - setIsDeleteDialogOpen( false ) } - > - { __( 'Are you sure you want to delete this pattern?' ) } - - ) } - - ); -} diff --git a/packages/edit-site/src/components/page-library/style.scss b/packages/edit-site/src/components/page-library/style.scss deleted file mode 100644 index 2871e40d8de852..00000000000000 --- a/packages/edit-site/src/components/page-library/style.scss +++ /dev/null @@ -1,115 +0,0 @@ -.edit-site-library { - background: rgba(0, 0, 0, 0.05); - margin: $header-height 0 0; - .components-text { - color: $gray-600; - } - - .components-heading { - color: $gray-200; - } - - @include break-medium { - margin: 0; - } -} - -.edit-site-library__grid { - column-gap: $grid-unit-30; - @include break-large() { - column-count: 2; - } - - // Small top padding required to avoid cutting off the visible outline - // when hovering items. - padding-top: $border-width-focus-fallback; - margin-bottom: $grid-unit-40; - - .edit-site-library__pattern { - break-inside: avoid-column; - display: flex; - flex-direction: column; - margin-bottom: $grid-unit-60; - - .edit-site-library__preview { - border-radius: $radius-block-ui; - cursor: pointer; - overflow: hidden; - - &:focus { - box-shadow: inset 0 0 0 2px $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; - } - - &.is-inactive { - cursor: default; - } - } - - .edit-site-library__footer, - .edit-site-library__button { - color: $gray-600; - } - - &.is-placeholder .edit-site-library__preview { - min-height: $grid-unit-80; - color: $gray-600; - border: 1px dashed $gray-800; - display: flex; - align-items: center; - justify-content: center; - - &:focus { - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - } - } - } - - .edit-site-library__preview { - flex: 1; - margin-bottom: $grid-unit-20; - } -} - -// The increased specificity here is to overcome component styles -// without relying on internal component class names. -.edit-site-library__search { - &#{&} input[type="search"] { - background: $gray-800; - color: $gray-200; - - &:focus { - background: $gray-800; - } - } - - svg { - fill: $gray-600; - } -} - -.edit-site-library__pattern-title { - color: $gray-600; - - .is-link { - text-decoration: none; - color: $gray-200; - - &:hover, - &:focus { - color: $white; - } - } - - svg { - border-radius: $grid-unit-05; - background: var(--wp-block-synced-color); - fill: $white; - } -} - -.edit-site-library__no-results { - color: $gray-600; -}