Skip to content

Commit

Permalink
fix #460
Browse files Browse the repository at this point in the history
  • Loading branch information
@inc2734
inc2734 committed Dec 27, 2024
1 parent 6a8060b commit ba0dcea
Show file tree
Hide file tree
Showing 8 changed files with 82 additions and 72 deletions.
8 changes: 4 additions & 4 deletions package-lock.json
View file

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

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"node": "20.11.1"
},
"devDependencies": {
"@inc2734/unitone-css": "^0.62.5",
"@inc2734/unitone-css": "^0.62.6",
"@wordpress/env": "^10.14.0",
"@wordpress/icons": "^10.14.0",
"@wordpress/interface": "^8.3.0",
Expand Down
19 changes: 13 additions & 6 deletions src/blocks/cluster-divided/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ import {
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';

import { useRefEffect } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';
import { useRef, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

import metadata from './block.json';
Expand All @@ -28,15 +28,18 @@ import {
export default function ( { attributes, setAttributes, clientId } ) {
const { tagName, templateLock } = attributes;

const hasInnerBlocks = useSelect(
const innerBlocksLength = useSelect(
( select ) =>
!! select( blockEditorStore ).getBlock( clientId )?.innerBlocks
select( blockEditorStore ).getBlock( clientId )?.innerBlocks
?.length,
[ clientId ]
);
const hasInnerBlocks = !! innerBlocksLength;

const ref = useRefEffect( ( target ) => {
dividersResizeObserver( target, {
const ref = useRef( null );

useEffect( () => {
dividersResizeObserver( ref.current, {
ignore: {
className: [
'is-selected',
Expand All @@ -48,10 +51,14 @@ export default function ( { attributes, setAttributes, clientId } ) {
} );

setTimeout( () => {
setDividerLinewrap( target );
setDividerLinewrap( ref.current );
}, 100 );
}, [] );

useEffect( () => {
setDividerLinewrap( ref.current );
}, [ innerBlocksLength ] );

const blockProps = useBlockProps( { ref } );
blockProps[ 'data-unitone-layout' ] = clsx(
'cluster',
Expand Down
20 changes: 13 additions & 7 deletions src/blocks/flex-divided/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,8 @@ import {
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';

import { useRefEffect } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';
import { useEffect } from '@wordpress/element';
import { useRef, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

import { physicalToLogical } from '../../js/helper';
Expand All @@ -29,12 +28,13 @@ import {
export default function ( { attributes, setAttributes, clientId } ) {
const { tagName, layout, templateLock } = attributes;

const hasInnerBlocks = useSelect(
const innerBlocksLength = useSelect(
( select ) =>
!! select( blockEditorStore ).getBlock( clientId )?.innerBlocks
select( blockEditorStore ).getBlock( clientId )?.innerBlocks
?.length,
[ clientId ]
);
const hasInnerBlocks = !! innerBlocksLength;

useEffect( () => {
const newVerticalAlignment =
Expand All @@ -47,8 +47,10 @@ export default function ( { attributes, setAttributes, clientId } ) {
} );
}, [ layout?.verticalAlignment, layout?.orientation ] );

Check warning on line 48 in src/blocks/flex-divided/edit.js

View workflow job for this annotation

GitHub Actions / Test 

React Hook useEffect has a missing dependency: 'setAttributes'. Either include it or remove the dependency array. If 'setAttributes' changes too often, find the parent component that defines it and wrap that definition in useCallback

const ref = useRefEffect( ( target ) => {
dividersResizeObserver( target, {
const ref = useRef( null );

useEffect( () => {
dividersResizeObserver( ref.current, {
ignore: {
className: [
'is-selected',
Expand All @@ -60,10 +62,14 @@ export default function ( { attributes, setAttributes, clientId } ) {
} );

setTimeout( () => {
setDividerLinewrap( target );
setDividerLinewrap( ref.current );
}, 100 );
}, [] );

useEffect( () => {
setDividerLinewrap( ref.current );
}, [ innerBlocksLength ] );

const blockProps = useBlockProps( {
ref,
className: 'unitone-flex',
Expand Down
14 changes: 1 addition & 13 deletions src/blocks/grid-divided-content/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,11 @@ import {
} from '@wordpress/block-editor';

import { useSelect } from '@wordpress/data';
import { useEffect, useLayoutEffect, useRef } from '@wordpress/element';

import { setDividerLinewrap } from '@inc2734/unitone-css/library';
import { useEffect } from '@wordpress/element';

export default function ( { attributes, setAttributes, clientId, context } ) {
const { tagName, templateLock } = attributes;

const ref = useRef();

useEffect( () => {
setAttributes( {
tagName: [ 'ul', 'ol' ].includes(
Expand All @@ -25,13 +21,6 @@ export default function ( { attributes, setAttributes, clientId, context } ) {
} );
}, [ context ] );

useLayoutEffect( () => {
const target = ref?.current?.parentElement;
if ( !! target ) {
setDividerLinewrap( target );
}
}, [ JSON.stringify( attributes?.unitone ) ] );

const hasInnerBlocks = useSelect(
( select ) =>
!! select( blockEditorStore ).getBlock( clientId )?.innerBlocks
Expand All @@ -40,7 +29,6 @@ export default function ( { attributes, setAttributes, clientId, context } ) {
);

const blockProps = useBlockProps( {
ref,
className: 'unitone-grid__content',
} );

Expand Down
25 changes: 14 additions & 11 deletions src/blocks/grid-divided/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,8 @@ import {
__experimentalUnitControl as UnitControl,
} from '@wordpress/components';

import { useRefEffect, useMergeRefs } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';
import { useRef } from '@wordpress/element';
import { useRef, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

import { GridVisualizer } from '../../js/editor/hooks/utils';
Expand Down Expand Up @@ -73,15 +72,18 @@ export default function ( { attributes, setAttributes, clientId } ) {
__unstableUnitoneBlockOutline,
} = attributes;

const hasInnerBlocks = useSelect(
const innerBlocksLength = useSelect(
( select ) =>
!! select( blockEditorStore ).getBlock( clientId )?.innerBlocks
select( blockEditorStore ).getBlock( clientId )?.innerBlocks
?.length,
[ clientId ]
);
const hasInnerBlocks = !! innerBlocksLength;

const effect = useRefEffect( ( target ) => {
dividersResizeObserver( target, {
const ref = useRef( null );

useEffect( () => {
dividersResizeObserver( ref.current, {
ignore: {
className: [
'is-selected',
Expand All @@ -93,10 +95,14 @@ export default function ( { attributes, setAttributes, clientId } ) {
} );

setTimeout( () => {
setDividerLinewrap( target );
setDividerLinewrap( ref.current );
}, 100 );
}, [] );

useEffect( () => {
setDividerLinewrap( ref.current );
}, [ innerBlocksLength ] );

const TagName = tagName;

const styles = {
Expand Down Expand Up @@ -139,11 +145,8 @@ export default function ( { attributes, setAttributes, clientId } ) {
( 'free' === smRowsOption && smGridTemplateRows ) || undefined,
};

const ref = useRef();
const refs = useMergeRefs( [ ref, effect ] );

const blockProps = useBlockProps( {
ref: refs,
ref,
className: 'unitone-grid',
style: styles,
} );
Expand Down
23 changes: 13 additions & 10 deletions src/blocks/responsive-grid-divided/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,8 @@ import {
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';

import { useRefEffect, useMergeRefs } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';
import { useRef } from '@wordpress/element';
import { useRef, useEffect } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';

import { GridVisualizer } from '../../js/editor/hooks/utils';
Expand All @@ -37,15 +36,18 @@ export default function ( { attributes, setAttributes, clientId } ) {
__unstableUnitoneBlockOutline,
} = attributes;

const hasInnerBlocks = useSelect(
const innerBlocksLength = useSelect(
( select ) =>
!! select( blockEditorStore ).getBlock( clientId )?.innerBlocks
select( blockEditorStore ).getBlock( clientId )?.innerBlocks
?.length,
[ clientId ]
);
const hasInnerBlocks = !! innerBlocksLength;

const effect = useRefEffect( ( target ) => {
dividersResizeObserver( target, {
const ref = useRef( null );

useEffect( () => {
dividersResizeObserver( ref.current, {
ignore: {
className: [
'is-selected',
Expand All @@ -57,15 +59,16 @@ export default function ( { attributes, setAttributes, clientId } ) {
} );

setTimeout( () => {
setDividerLinewrap( target );
setDividerLinewrap( ref.current );
}, 100 );
}, [] );

const ref = useRef();
const refs = useMergeRefs( [ ref, effect ] );
useEffect( () => {
setDividerLinewrap( ref.current );
}, [ innerBlocksLength ] );

const blockProps = useBlockProps( {
ref: refs,
ref,
style: {
'--unitone--column-min-width': columnMinWidth || undefined,
},
Expand Down
43 changes: 23 additions & 20 deletions src/blocks/responsive-grid/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,18 @@ import {
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';

import { useRefEffect, useMergeRefs } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';
import { useRef } from '@wordpress/element';
import { useRef, useEffect } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';

import { GridVisualizer } from '../../js/editor/hooks/utils';

import metadata from './block.json';

import { stairsResizeObserver } from '@inc2734/unitone-css/library';
import {
stairsResizeObserver,
setStairsStep,
} from '@inc2734/unitone-css/library';

export default function ( { attributes, setAttributes, clientId } ) {
const {
Expand All @@ -33,31 +35,32 @@ export default function ( { attributes, setAttributes, clientId } ) {
__unstableUnitoneBlockOutline,
} = attributes;

const hasInnerBlocks = useSelect(
const innerBlocksLength = useSelect(
( select ) =>
!! select( blockEditorStore ).getBlock( clientId )?.innerBlocks
select( blockEditorStore ).getBlock( clientId )?.innerBlocks
?.length,
[ clientId ]
);
const hasInnerBlocks = !! innerBlocksLength;

const effect = useRefEffect(
( target ) => {
stairsResizeObserver( target );
},
[
clientId,
columnMinWidth,
unitone?.gap,
unitone?.stairs,
unitone?.stairsUp,
]
);
const ref = useRef( null );

useEffect( () => {
stairsResizeObserver( ref.current );
}, [
clientId,
columnMinWidth,
unitone?.gap,
unitone?.stairs,
unitone?.stairsUp,
] );

const ref = useRef();
const refs = useMergeRefs( [ ref, effect ] );
useEffect( () => {
setStairsStep( ref.current );
}, [ innerBlocksLength ] );

const blockProps = useBlockProps( {
ref: refs,
ref,
style: {
'--unitone--column-min-width': columnMinWidth || undefined,
},
Expand Down

0 comments on commit ba0dcea

Please sign in to comment.