Skip to content

Commit

Permalink
try adding a class to block when typing
Browse files Browse the repository at this point in the history
  • Loading branch information
gwwar committed Jun 10, 2021
1 parent b62f8b4 commit a005470
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 3 deletions.
20 changes: 18 additions & 2 deletions packages/block-editor/src/components/block-list/block.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,12 @@ import {
hasBlockSupport,
} from '@wordpress/blocks';
import { withFilters } from '@wordpress/components';
import { withDispatch, withSelect, useDispatch } from '@wordpress/data';
import {
withDispatch,
withSelect,
useDispatch,
useSelect,
} from '@wordpress/data';
import { compose, pure, ifCondition } from '@wordpress/compose';

/**
Expand Down Expand Up @@ -83,6 +88,15 @@ function BlockListBlock( {
const { removeBlock } = useDispatch( blockEditorStore );
const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );

const removeBlockOutline = useSelect(
( select ) => {
const { isTyping, getSettings } = select( blockEditorStore );
const isOutlineMode = getSettings().outlineMode;
return isOutlineMode && isSelected && isTyping();
},
[ clientId, isSelected ]
);

// We wrap the BlockEdit component in a div that hides it when editing in
// HTML mode. This allows us to render all of the ancillary pieces
// (InspectorControls, etc.) which are inside `BlockEdit` but not
Expand Down Expand Up @@ -159,7 +173,9 @@ function BlockListBlock( {

const value = {
clientId,
className,
className: removeBlockOutline
? classnames( className, 'remove-outline' )
: className,
wrapperProps: omit( wrapperProps, [ 'data-align' ] ),
isAligned,
};
Expand Down
8 changes: 7 additions & 1 deletion packages/block-editor/src/components/block-list/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,7 @@
}
}

.is-outline-mode .block-editor-block-list__block:not(:focus-within) {
.is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
&.is-hovered {
cursor: default;

Expand All @@ -286,6 +286,12 @@
bottom: $border-width;
border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
}

&:focus {
&::after {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
}
}
}
}

Expand Down

0 comments on commit a005470

Please sign in to comment.