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

Template Parts & Reusable Blocks - try overlay element for clickthrough to edit pattern. #31109

Merged
merged 51 commits into from
Jun 25, 2021
Merged
Changes from 1 commit
Commits
Show all changes
51 commits
Select commit Hold shift + click to select a range
8da3a6a
clickthrough for template part
Addison-Stavlo Mar 23, 2021
6cbfb21
make store names more consistent and accurate
Addison-Stavlo Mar 23, 2021
89f6cb8
remove unnecessary selector change
Addison-Stavlo Mar 23, 2021
9b685c0
move color from hover to selected, add opacity value
Addison-Stavlo Mar 24, 2021
5d363d7
Merge branch 'trunk' into try/template-part-clickthrough-selection
jameskoster Apr 8, 2021
51b0a9f
Add hover overlay
jameskoster Apr 8, 2021
562a393
rebase master
Addison-Stavlo Apr 22, 2021
e16a091
bleh resizing issues
Addison-Stavlo Apr 22, 2021
f27bcb2
kind of working...
Addison-Stavlo Apr 22, 2021
6eb82de
remove unnecessary popover goo
Addison-Stavlo Apr 22, 2021
e5d4f3f
fix for nested template parts and selection bleeding out of boundary
Addison-Stavlo Apr 23, 2021
621dcd9
remove unnecessary effect/state
Addison-Stavlo Apr 23, 2021
bcbabf9
fix resizing issue
Addison-Stavlo Apr 28, 2021
0d45917
try only selected color when focused
Addison-Stavlo Apr 28, 2021
a3e35e6
cleanup css
Addison-Stavlo Apr 28, 2021
a1ae072
try overlay for initial selection only
Addison-Stavlo Apr 28, 2021
7d74900
enable drag and drop
Addison-Stavlo Apr 30, 2021
0550d76
only show borders on drag and drop
Addison-Stavlo Apr 30, 2021
5272c12
ensure background color not on drag and drop
Addison-Stavlo Apr 30, 2021
8085ce9
apply to reusable blocks
Addison-Stavlo Apr 30, 2021
fd702eb
rebase trunk
Addison-Stavlo May 4, 2021
5351165
fix e2e tests
Addison-Stavlo May 4, 2021
8ff4b94
try add basic test
Addison-Stavlo May 4, 2021
b760a07
try fix test
Addison-Stavlo May 4, 2021
8639351
only use the afterEach where needed
Addison-Stavlo May 4, 2021
08ecb26
use css vars
Addison-Stavlo May 4, 2021
1d0d27b
rebase trunk
Addison-Stavlo May 4, 2021
cf2b380
merge trunk
Addison-Stavlo May 5, 2021
00218e0
fix border color
Addison-Stavlo May 6, 2021
35d61f4
fix block toolbar issue
Addison-Stavlo May 6, 2021
882fbf8
fix width on classic themes
Addison-Stavlo May 7, 2021
15157e9
fix width by moving overlay inside block wrapper
Addison-Stavlo May 7, 2021
f4b6f43
fix bug with selection from list view
Addison-Stavlo May 7, 2021
84c686f
add condition to dismissing
Addison-Stavlo May 7, 2021
b00bb3f
show overlay when highlighting list view
Addison-Stavlo May 7, 2021
d52dc45
use selector for highlight style
Addison-Stavlo May 10, 2021
ff04eb3
refactor and comments
Addison-Stavlo May 10, 2021
57e6a8d
position overlay above resize containers
Addison-Stavlo May 10, 2021
6a6ad3a
fix nested entity test
Addison-Stavlo May 10, 2021
2fe7645
fix template part test
Addison-Stavlo May 10, 2021
5344a22
fix intermittent errors on conversion tests
Addison-Stavlo May 10, 2021
3114fdf
handle conflict/rebase trunk
Addison-Stavlo May 11, 2021
3a3f398
remove box shadow on hover - block hover style will already be present
Addison-Stavlo May 11, 2021
ba5decc
add border back to overlay
Addison-Stavlo May 19, 2021
6055b49
use blockProps in innerBlockProps as well
Addison-Stavlo May 19, 2021
a471f05
cleanup which blockProps are passed to innerBlockProps
Addison-Stavlo May 20, 2021
bdd3ad3
rebase trunk
Addison-Stavlo Jun 16, 2021
8f7d8be
use component as wrapper
Addison-Stavlo Jun 16, 2021
2bf4aca
remove unnecessary layout selectors on TP e2es
Addison-Stavlo Jun 16, 2021
a7ea5e4
fix reusable blocks test xpath
Addison-Stavlo Jun 16, 2021
58cdcf5
rebase trunk
Addison-Stavlo Jun 25, 2021
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
Prev Previous commit
Next Next commit
remove unnecessary effect/state
  • Loading branch information
Addison-Stavlo committed Apr 23, 2021
commit 621dcd956a1cc61e3fb03530dca61c3a367fc5ac
45 changes: 23 additions & 22 deletions packages/block-library/src/template-part/edit/content-lock.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@
*/
import { useSelect, useDispatch } from '@wordpress/data';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { useRef, useEffect, useState } from '@wordpress/element';
import { useRef } from '@wordpress/element';
/**
* External dependencies
*/
import classnames from 'classnames';

const baseClassName = 'wp-block-template-part__content-lock';

export default function ContentLock( { clientId, children } ) {
const wrapperRef = useRef();
const baseClassName = 'wp-block-template-part__content-lock';

const [ overlaySizes, setOverlaySizes ] = useState( {} );
const { isSelected, hasChildSelected } = useSelect(
( select ) => {
const { isBlockSelected, hasSelectedInnerBlock } = select(
Expand All @@ -29,22 +29,6 @@ export default function ContentLock( { clientId, children } ) {

const selectBlock = useDispatch( blockEditorStore ).selectBlock;

useEffect( () => {
if ( wrapperRef.current?.clientHeight && ! hasChildSelected ) {
setOverlaySizes( {
height: wrapperRef.current?.clientHeight + 'px',
width: wrapperRef.current?.clientWidth + 'px',
} );
} else {
setOverlaySizes( {} );
}
}, [
wrapperRef.current,
wrapperRef.current?.clientHeight,
wrapperRef.current?.clientWidth,
hasChildSelected,
] );

const classes = classnames( baseClassName, {
'overlay-selected': isSelected,
'child-selected': hasChildSelected,
Expand All @@ -55,10 +39,10 @@ export default function ContentLock( { clientId, children } ) {

return (
<div className={ classes }>
<button
className={ `${ baseClassName }-overlay` }
style={ overlaySizes }
<ContentOverlay
onClick={ onClick }
height={ wrapperRef.current?.clientHeight }
width={ wrapperRef.current?.clientWidth }
/>
<div
className={ `${ baseClassName }-content-wrapper` }
Expand All @@ -69,3 +53,20 @@ export default function ContentLock( { clientId, children } ) {
</div>
);
}

function ContentOverlay( { onClick, height, width } ) {
const overlayDimensions =
height && width
? {
height: height + 'px',
width: width + 'px',
}
: {};
return (
<button
className={ `${ baseClassName }-overlay` }
style={ overlayDimensions }
onClick={ onClick }
/>
);
}