Skip to content

Commit

Permalink
Get orientation for Spacer block from parent layout (#49322)
Browse files Browse the repository at this point in the history 
* Get orientation for Spacer block from parent layout

* Remove orientation context hack from Nav block
  • Loading branch information
@tellthemachines
tellthemachines authored Mar 27, 2023
1 parent 57f0bb8 commit f4f22a8
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 19 deletions.
1 change: 0 additions & 1 deletion packages/block-library/src/navigation/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,6 @@
"showSubmenuIcon": "showSubmenuIcon",
"openSubmenusOnClick": "openSubmenusOnClick",
"style": "style",
"orientation": "orientation",
"maxNestingLevel": "maxNestingLevel"
},
"supports": {
Expand Down
13 changes: 0 additions & 13 deletions packages/block-library/src/navigation/edit/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -477,19 +477,6 @@ function Navigation( {
showClassicMenuConversionNotice,
] );

// Spacer block needs orientation from context. This is a patch until
// https://github.com/WordPress/gutenberg/issues/36197 is addressed.
useEffect( () => {
if ( orientation ) {
__unstableMarkNextChangeAsNotPersistent();
setAttributes( { orientation } );
}
}, [
orientation,
__unstableMarkNextChangeAsNotPersistent,
setAttributes,
] );

useEffect( () => {
if ( ! enableContrastChecking ) {
return;
Expand Down
23 changes: 18 additions & 5 deletions packages/block-library/src/spacer/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,16 @@ const SpacerEdit = ( {
setAttributes,
toggleSelection,
context,
__unstableParentLayout: parentLayout,
} ) => {
const { orientation } = context;
const { orientation: parentOrientation, type } = parentLayout || {};
// If the spacer is inside a flex container, it should either inherit the orientation
// of the parent or use the flex default orientation.
const inheritedOrientation =
! parentOrientation && type === 'flex'
? 'horizontal'
: parentOrientation || orientation;
const { height, width } = attributes;

const [ isResizing, setIsResizing ] = useState( false );
Expand All @@ -104,13 +112,18 @@ const SpacerEdit = ( {

const style = {
height:
orientation === 'horizontal'
inheritedOrientation === 'horizontal'
? 24
: temporaryHeight || height || undefined,
width:
orientation === 'horizontal'
inheritedOrientation === 'horizontal'
? temporaryWidth || width || undefined
: undefined,
// In vertical flex containers, the spacer shrinks to nothing without a minimum width.
minWidth:
inheritedOrientation === 'vertical' && type === 'flex'
? 48
: undefined,
};

const resizableBoxWithOrientation = ( blockOrientation ) => {
Expand Down Expand Up @@ -166,7 +179,7 @@ const SpacerEdit = ( {
};

useEffect( () => {
if ( orientation === 'horizontal' && ! width ) {
if ( inheritedOrientation === 'horizontal' && ! width ) {
setAttributes( {
height: '0px',
width: '72px',
Expand All @@ -177,13 +190,13 @@ const SpacerEdit = ( {
return (
<>
<View { ...useBlockProps( { style } ) }>
{ resizableBoxWithOrientation( orientation ) }
{ resizableBoxWithOrientation( inheritedOrientation ) }
</View>
<SpacerControls
setAttributes={ setAttributes }
height={ temporaryHeight || height }
width={ temporaryWidth || width }
orientation={ orientation }
orientation={ inheritedOrientation }
isResizing={ isResizing }
/>
</>
Expand Down

1 comment on commit f4f22a8

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in f4f22a8.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4528374974
📝 Reported issues:

Please sign in to comment.