diff --git a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx index 5ba1accbdda..d3ee67fcc4a 100644 --- a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx +++ b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx @@ -84,6 +84,7 @@ export function DescriptionBlockEdit( { const blockProps = useWooBlockProps( attributes, { className: classNames( { 'has-blocks': !! description.length } ), + tabIndex: 0, } ); const innerBlockProps = useInnerBlocksProps( @@ -107,10 +108,7 @@ export function DescriptionBlockEdit( { { ! description.length &&
} { !! description.length && ( - + ) } { !! description.length && ( diff --git a/packages/js/product-editor/src/blocks/product-fields/description/editor.scss b/packages/js/product-editor/src/blocks/product-fields/description/editor.scss index fcc44d1658c..7a6cf72cafb 100644 --- a/packages/js/product-editor/src/blocks/product-fields/description/editor.scss +++ b/packages/js/product-editor/src/blocks/product-fields/description/editor.scss @@ -1,5 +1,10 @@ .wp-block-woocommerce-product-description-field { + &:focus { + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); + outline: 3px solid transparent; + } + &.has-blocks { min-height: 320px; .wp-block-woocommerce-product-description-field__cover,