Skip to content

Commit

Permalink
#366 Refactoring for createHigherOrderComponent and useSelect
Browse files Browse the repository at this point in the history
  • Loading branch information
@inc2734
inc2734 committed Aug 29, 2024
1 parent ef86933 commit edcda4c
Show file tree
Hide file tree
Showing 16 changed files with 367 additions and 401 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.60.4",
"@inc2734/unitone-css": "^0.60.5",
"@wordpress/env": "^10.6.0",
"@wordpress/icons": "^10.6.0",
"@wordpress/interface": "^6.6.0",
Expand Down
69 changes: 34 additions & 35 deletions src/blocks/both-sides/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,47 +26,46 @@ registerBlockType( 'unitone/both-sides', {
const withChildBlockAttributes = createHigherOrderComponent(
( BlockListBlock ) => {
return ( props ) => {
const { getBlockParents, getBlock } = useSelect(
( select ) => {
return select( blockEditorStore );
},
[ props.clientId ]
);

const newProps = { ...props };
const { getBlockParents, getBlock } = useSelect( blockEditorStore );

const blockParents = getBlockParents( props.clientId );
if ( 0 < blockParents.length ) {
const parentClientId = blockParents[ blockParents.length - 1 ];
if ( !! parentClientId ) {
const parentBlock = getBlock( parentClientId );
if ( 1 > blockParents.length ) {
return <BlockListBlock { ...props } />;
}

if ( 'unitone/both-sides' === parentBlock?.name ) {
const DEFAULT_VALUES = {
flexBasis: 'fit-content',
};
const parentClientId = blockParents[ blockParents.length - 1 ];
if ( ! parentClientId ) {
return <BlockListBlock { ...props } />;
}

newProps.attributes = {
...newProps.attributes,
unitone: {
...newProps.attributes?.unitone,
flexBasis:
null !=
newProps.attributes?.unitone?.flexBasis
? newProps.attributes?.unitone
?.flexBasis
: DEFAULT_VALUES.flexBasis,
},
__unstableUnitoneSupports: {
flexBasis: {
default: DEFAULT_VALUES.flexBasis,
},
},
};
}
}
const parentBlock = getBlock( parentClientId );
if ( 'unitone/both-sides' !== parentBlock?.name ) {
return <BlockListBlock { ...props } />;
}

const DEFAULT_VALUES = {
flexBasis: 'fit-content',
};

const newProps = {
...props,
attributes: {
...props?.attributes,
unitone: {
...props?.attributes?.unitone,
flexBasis:
null != props?.attributes?.unitone?.flexBasis
? props?.attributes?.unitone?.flexBasis
: DEFAULT_VALUES.flexBasis,
},
__unstableUnitoneSupports: {
flexBasis: {
default: DEFAULT_VALUES.flexBasis,
},
},
},
};

return <BlockListBlock { ...newProps } />;
};
},
Expand Down
104 changes: 50 additions & 54 deletions src/blocks/flex-divided/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,66 +26,62 @@ registerBlockType( 'unitone/flex-divided', {
const withChildBlockAttributes = createHigherOrderComponent(
( BlockListBlock ) => {
return ( props ) => {
const { getBlockParents, getBlock } = useSelect(
( select ) => {
return select( blockEditorStore );
},
[ props.clientId ]
);

const newProps = { ...props };
const { getBlockParents, getBlock } = useSelect( blockEditorStore );

const blockParents = getBlockParents( props.clientId );
if ( 0 < blockParents.length ) {
const parentClientId = blockParents[ blockParents.length - 1 ];
if ( !! parentClientId ) {
const parentBlock = getBlock( parentClientId );
if ( 1 > blockParents.length ) {
return <BlockListBlock { ...props } />;
}

if ( 'unitone/flex-divided' === parentBlock?.name ) {
const DEFAULT_VALUES = {
flexGrow: '0',
flexShrink: '1',
flexBasis: 'auto',
};
const parentClientId = blockParents[ blockParents.length - 1 ];
if ( ! parentClientId ) {
return <BlockListBlock { ...props } />;
}

newProps.attributes = {
...newProps.attributes,
unitone: {
...newProps.attributes?.unitone,
flexGrow:
null !=
newProps.attributes?.unitone?.flexGrow
? newProps.attributes?.unitone?.flexGrow
: DEFAULT_VALUES.flexGrow,
flexShrink:
null !=
newProps.attributes?.unitone?.flexShrink
? newProps.attributes?.unitone
?.flexShrink
: DEFAULT_VALUES.flexShrink,
flexBasis:
null !=
newProps.attributes?.unitone?.flexBasis
? newProps.attributes?.unitone
?.flexBasis
: DEFAULT_VALUES.flexBasis,
},
__unstableUnitoneSupports: {
flexGrow: {
default: DEFAULT_VALUES.flexGrow,
},
flexShrink: {
default: DEFAULT_VALUES.flexShrink,
},
flexBasis: {
default: DEFAULT_VALUES.flexBasis,
},
},
};
}
}
const parentBlock = getBlock( parentClientId );
if ( 'unitone/flex-divided' !== parentBlock?.name ) {
return <BlockListBlock { ...props } />;
}

const DEFAULT_VALUES = {
flexGrow: '0',
flexShrink: '1',
flexBasis: 'auto',
};

const newProps = {
...props,
attributes: {
...props?.attributes,
unitone: {
...props?.attributes?.unitone,
flexGrow:
null != props?.attributes?.unitone?.flexGrow
? props?.attributes?.unitone?.flexGrow
: DEFAULT_VALUES.flexGrow,
flexShrink:
null != props?.attributes?.unitone?.flexShrink
? props?.attributes?.unitone?.flexShrink
: DEFAULT_VALUES.flexShrink,
flexBasis:
null != props?.attributes?.unitone?.flexBasis
? props?.attributes?.unitone?.flexBasis
: DEFAULT_VALUES.flexBasis,
},
__unstableUnitoneSupports: {
flexGrow: {
default: DEFAULT_VALUES.flexGrow,
},
flexShrink: {
default: DEFAULT_VALUES.flexShrink,
},
flexBasis: {
default: DEFAULT_VALUES.flexBasis,
},
},
},
};

return <BlockListBlock { ...newProps } />;
};
},
Expand Down
2 changes: 1 addition & 1 deletion src/blocks/flex-divided/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
}

.unitone-flex__content {
--unitone--align-items: 'stretch';
--unitone--align-items: center;

position: relative;
display: flex;
Expand Down
104 changes: 50 additions & 54 deletions src/blocks/flex/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,66 +24,62 @@ registerBlockType( 'unitone/flex', {
const withChildBlockAttributes = createHigherOrderComponent(
( BlockListBlock ) => {
return ( props ) => {
const { getBlockParents, getBlock } = useSelect(
( select ) => {
return select( blockEditorStore );
},
[ props.clientId ]
);

const newProps = { ...props };
const { getBlockParents, getBlock } = useSelect( blockEditorStore );

const blockParents = getBlockParents( props.clientId );
if ( 0 < blockParents.length ) {
const parentClientId = blockParents[ blockParents.length - 1 ];
if ( !! parentClientId ) {
const parentBlock = getBlock( parentClientId );
if ( 1 > blockParents.length ) {
return <BlockListBlock { ...props } />;
}

if ( 'unitone/flex' === parentBlock?.name ) {
const DEFAULT_VALUES = {
flexGrow: '0',
flexShrink: '1',
flexBasis: 'auto',
};
const parentClientId = blockParents[ blockParents.length - 1 ];
if ( ! parentClientId ) {
return <BlockListBlock { ...props } />;
}

newProps.attributes = {
...newProps.attributes,
unitone: {
...newProps.attributes?.unitone,
flexGrow:
null !=
newProps.attributes?.unitone?.flexGrow
? newProps.attributes?.unitone?.flexGrow
: DEFAULT_VALUES.flexGrow,
flexShrink:
null !=
newProps.attributes?.unitone?.flexShrink
? newProps.attributes?.unitone
?.flexShrink
: DEFAULT_VALUES.flexShrink,
flexBasis:
null !=
newProps.attributes?.unitone?.flexBasis
? newProps.attributes?.unitone
?.flexBasis
: DEFAULT_VALUES.flexBasis,
},
__unstableUnitoneSupports: {
flexGrow: {
default: DEFAULT_VALUES.flexGrow,
},
flexShrink: {
default: DEFAULT_VALUES.flexShrink,
},
flexBasis: {
default: DEFAULT_VALUES.flexBasis,
},
},
};
}
}
const parentBlock = getBlock( parentClientId );
if ( 'unitone/flex' !== parentBlock?.name ) {
return <BlockListBlock { ...props } />;
}

const DEFAULT_VALUES = {
flexGrow: '0',
flexShrink: '1',
flexBasis: 'auto',
};

const newProps = {
...props,
attributes: {
...props?.attributes,
unitone: {
...props?.attributes?.unitone,
flexGrow:
null != props?.attributes?.unitone?.flexGrow
? props?.attributes?.unitone?.flexGrow
: DEFAULT_VALUES.flexGrow,
flexShrink:
null != props?.attributes?.unitone?.flexShrink
? props?.attributes?.unitone?.flexShrink
: DEFAULT_VALUES.flexShrink,
flexBasis:
null != props?.attributes?.unitone?.flexBasis
? props?.attributes?.unitone?.flexBasis
: DEFAULT_VALUES.flexBasis,
},
__unstableUnitoneSupports: {
flexGrow: {
default: DEFAULT_VALUES.flexGrow,
},
flexShrink: {
default: DEFAULT_VALUES.flexShrink,
},
flexBasis: {
default: DEFAULT_VALUES.flexBasis,
},
},
},
};

return <BlockListBlock { ...newProps } />;
};
},
Expand Down
Loading

0 comments on commit edcda4c

Please sign in to comment.