Skip to content

Allow dropping an image on an empty paragraph block to create an image block #42722

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

Merged
kevin940726 merged 14 commits into from
Sep 26, 2022
Merged

Allow dropping an image on an empty paragraph block to create an image block #42722

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
2a3a168
Allow dropping an image on an empty paragraph block
kevin940726 Jul 27, 2022
a7cf8e5
Update popover props for best practice
kevin940726 Sep 13, 2022
18f1b0f
Refactor
kevin940726 Sep 15, 2022
b9d7afa
Take reduced motion into account
kevin940726 Sep 15, 2022
b9cc502
Update animation to scaleY only
kevin940726 Sep 16, 2022
fa4c81b
Address code reviews
kevin940726 Sep 20, 2022
64188e0
Minimize the refactor so that test coverage is still intact
kevin940726 Sep 20, 2022
7c0b869
Address code reviews
kevin940726 Sep 20, 2022
76eb403
Fix the tests and refactor dragFiles util
kevin940726 Sep 21, 2022
86946e2
Add more e2e tests
kevin940726 Sep 21, 2022
ea314b8
Fix dropzone memory leak
kevin940726 Sep 21, 2022
49387fc
Try to fix stalled listeners issue in useDropZone
kevin940726 Sep 22, 2022
4980a3d
Address code reviews
kevin940726 Sep 22, 2022
db6be43
Remove null check for targetIndex
kevin940726 Sep 22, 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
43 changes: 29 additions & 14 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@
"@types/highlight-words-core": "1.2.1",
"@types/istanbul-lib-report": "3.0.0",
"@types/lodash": "4.14.172",
"@types/mime": "2.0.3",
"@types/npm-package-arg": "6.1.1",
"@types/prettier": "2.4.4",
"@types/qs": "6.9.7",
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,7 @@ export {
export { default as __experimentalBlockPatternsList } from './block-patterns-list';
export { default as __experimentalPublishDateTimePicker } from './publish-date-time-picker';
export { default as __experimentalInspectorPopoverHeader } from './inspector-popover-header';
export { default as __experimentalUseOnBlockDrop } from './use-on-block-drop';

@ellatrix ellatrix Sep 28, 2022 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Should we mark this unstable/internal? I don't think this is an API that we want to expose in this shape.

@kevin940726 kevin940726 Sep 28, 2022

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Sure. I don't mind changing it to __internal or any other naming. I only use __experimental here because that's a more established pattern.


/*
* State Related Components
Expand Down
27 changes: 26 additions & 1 deletion packages/block-editor/src/components/use-block-drop-zone/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,20 @@ export function getNearestBlockIndex( elements, position, orientation ) {
return candidateIndex;
}

/**
* Determine if the element is an empty paragraph block.
*
* @param {?HTMLElement} element The element being tested.
* @return {boolean} True or False.
*/
function isEmptyParagraph( element ) {
return (
!! element &&
element.dataset.type === 'core/paragraph' &&
element.dataset.empty === 'true'
);
}

/**
* @typedef {Object} WPBlockDropZoneConfig
* @property {string} rootClientId The root client id for the block list.
Expand Down Expand Up @@ -130,7 +144,18 @@ export default function useBlockDropZone( {

setTargetBlockIndex( targetIndex === undefined ? 0 : targetIndex );

if ( targetIndex !== null ) {
if ( targetIndex !== undefined ) {
const nextBlock = blockElements[ targetIndex ];
const previousBlock = blockElements[ targetIndex - 1 ];

// Don't show the insertion point when it's near an empty paragraph block.
if (
isEmptyParagraph( nextBlock ) ||
isEmptyParagraph( previousBlock )
) {
return;
}

showInsertionPoint( targetRootClientId, targetIndex );
}
}, [] ),
Expand Down
Loading