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.

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

Try clickthrough to edit template part children. #30156

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -273,13 +273,15 @@ export default function useInsertionPoint( ref ) {
selectedClientId,
selectedRootClientId,
getBlockListSettings,
isPopoverHidden,
} = useSelect( ( select ) => {
const {
isMultiSelecting: _isMultiSelecting,
isBlockInsertionPointVisible,
getBlockInsertionPoint,
getBlockOrder,
getBlockListSettings: _getBlockListSettings,
isInsertionPointPopoverHidden,
} = select( blockEditorStore );

const insertionPoint = getBlockInsertionPoint();
Expand All @@ -291,6 +293,7 @@ export default function useInsertionPoint( ref ) {
isInserterVisible: isBlockInsertionPointVisible(),
selectedClientId: order[ insertionPoint.index - 1 ],
selectedRootClientId: insertionPoint.rootClientId,
isPopoverHidden: isInsertionPointPopoverHidden(),
};
}, [] );

Expand Down Expand Up @@ -399,7 +402,8 @@ export default function useInsertionPoint( ref ) {

return (
! isMultiSelecting &&
isVisible && (
isVisible &&
! isPopoverHidden && (
<InsertionPointPopover
clientId={
isInserterVisible ? selectedClientId : inserterClientId
Expand Down
12 changes: 12 additions & 0 deletions packages/block-editor/src/store/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -1391,3 +1391,15 @@ export function setHasControlledInnerBlocks(
clientId,
};
}

export function hideInsertionPointPopover() {
return {
type: 'HIDE_INSERTION_POINT_POPOVER',
};
}

export function showInsertionPointPopover() {
return {
type: 'SHOW_INSERTION_POINT_POPOVER',
};
}
11 changes: 11 additions & 0 deletions packages/block-editor/src/store/reducer.js
Original file line number Diff line number Diff line change
Expand Up @@ -1727,6 +1727,16 @@ export function highlightedBlock( state, action ) {
return state;
}

export function insertionPointPopoverHiddenStatus( state = false, action ) {
if ( action.type === 'HIDE_INSERTION_POINT_POPOVER' ) {
return true;
}
if ( action.type === 'SHOW_INSERTION_POINT_POPOVER' ) {
return false;
}
return state;
}

/**
* Reducer returning the block insertion event list state.
*
Expand Down Expand Up @@ -1773,5 +1783,6 @@ export default combineReducers( {
hasBlockMovingClientId,
automaticChangeStatus,
highlightedBlock,
insertionPointPopoverHiddenStatus,
lastBlockInserted,
} );
4 changes: 4 additions & 0 deletions packages/block-editor/src/store/selectors.js
Original file line number Diff line number Diff line change
Expand Up @@ -2194,6 +2194,10 @@ export const __experimentalGetActiveBlockIdByBlockNames = createSelector(
]
);

export function isInsertionPointPopoverHidden( state ) {
return state.insertionPointPopoverHiddenStatus;
}

/**
* Tells if the block with the passed clientId was just inserted.
*
Expand Down
12 changes: 10 additions & 2 deletions packages/block-library/src/template-part/edit/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,16 @@ export default function TemplatePartEdit( {
// Set the postId block attribute if it did not exist,
// but wait until the inner blocks have loaded to allow
// new edits to trigger this.
const { isResolved, innerBlocks, isMissing, area } = useSelect(
const { isResolved, innerBlocks, isMissing, area, isSelected } = useSelect(
( select ) => {
const { getEditedEntityRecord, hasFinishedResolution } = select(
coreStore
);
const { getBlocks } = select( blockEditorStore );
const {
getBlocks,
isBlockSelected,
hasSelectedInnerBlock,
} = select( blockEditorStore );

const getEntityArgs = [
'postType',
Expand All @@ -69,6 +73,9 @@ export default function TemplatePartEdit( {
isResolved: hasResolvedEntity,
isMissing: hasResolvedEntity && ! entityRecord,
area: entityRecord?.area,
isSelected:
isBlockSelected( clientId ) ||
hasSelectedInnerBlock( clientId, true ),
};
},
[ templatePartId, clientId ]
Expand Down Expand Up @@ -157,6 +164,7 @@ export default function TemplatePartEdit( {
) }
{ isEntityAvailable && (
<TemplatePartInnerBlocks
isSelected={ isSelected }
tagName={ TagName }
blockProps={ blockProps }
postId={ templatePartId }
Expand Down
28 changes: 26 additions & 2 deletions packages/block-library/src/template-part/edit/inner-blocks.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,16 @@ import {
__experimentalUseEditorFeature as useEditorFeature,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { useSelect, useDispatch } from '@wordpress/data';
import { useState, useEffect } from '@wordpress/element';

export default function TemplatePartInnerBlocks( {
postId: id,
hasInnerBlocks,
layout,
tagName: TagName,
blockProps,
isSelected,
} ) {
const themeSupportsLayout = useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
Expand Down Expand Up @@ -46,5 +48,27 @@ export default function TemplatePartInnerBlocks( {
alignments: themeSupportsLayout ? alignments : undefined,
},
} );
return <TagName { ...innerBlocksProps } />;

const [ isHovered, setIsHovered ] = useState( false );
const {
hideInsertionPointPopover,
showInsertionPointPopover,
} = useDispatch( blockEditorStore );

useEffect( () => {
if ( isHovered && ! isSelected ) {
hideInsertionPointPopover();
} else {
showInsertionPointPopover();
}
}, [ isSelected, isHovered ] );

return (
<div
onMouseEnter={ () => setIsHovered( true ) }
onMouseLeave={ () => setIsHovered( false ) }
>
<TagName { ...innerBlocksProps } />
</div>
);
}
15 changes: 15 additions & 0 deletions packages/block-library/src/template-part/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -76,4 +76,19 @@
}
}
}

&:not(.has-child-selected):not(.is-selected):not(.is-placeholder) {
* {
pointer-events: none;
user-select: none; // Stops text being inadvertently highlighted when selecting a template part
}
}

&.is-selected:not(.is-placeholder) {
background: rgba(#007cba, 0.1); // todo: use var
}

&.is-hovered:not(.is-selected) {
background: rgba($gray-900, 0.05);
}
}