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.

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

Jump to bottom

[Block Library - Social Links]: Use the new flex layout #34493

Merged
merged 12 commits into from
Sep 7, 2021
+427 −94
Merged

[Block Library - Social Links]: Use the new flex layout #34493

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
72f9f52
[Block Library - Social Links]: Use the new `flex` layout
ntsekouras Sep 2, 2021
63cf506
don't check for theme support in social links edit fn
ntsekouras Sep 3, 2021
afafacf
associate `themeSupportsLayout` with `default/flow` layout
ntsekouras Sep 3, 2021
124007d
handle deprecations
ntsekouras Sep 3, 2021
06a2c84
add fixture and fix deprecation handling for default value
ntsekouras Sep 3, 2021
5c732bb
Remove link margin.
jasmussen Sep 3, 2021
3f06877
remove help from control
ntsekouras Sep 3, 2021
482ebe1
make justification work properly with JustifyContentControl - temp co…
ntsekouras Sep 3, 2021
cea7307
add `toolBarControls` to layouts
ntsekouras Sep 5, 2021
0bb0f11
fix import
ntsekouras Sep 5, 2021
df4f7b4
rename layout.edit to layout.inspectorControls
ntsekouras Sep 6, 2021
5e150d7
pass layoutBlockSupport to edit functions
ntsekouras Sep 7, 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
17 changes: 16 additions & 1 deletion lib/block-supports/layout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ function gutenberg_register_layout_support( $block_type ) {
* Generates the CSS corresponding to the provided layout.
*
* @param string $selector CSS selector.
* @param array $layout Layout object.
* @param array $layout Layout object. The one that is passed has already checked the existance of default block layout.
* @param boolean $has_block_gap_support Whether the theme has support for the block gap.
*
* @return string CSS style.
Expand Down Expand Up @@ -68,6 +68,13 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
$style .= "$selector > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }";
}
} elseif ( 'flex' === $layout_type ) {
$justify_content_options = array(
'left' => 'flex-start',
'right' => 'flex-end',
'center' => 'center',
'space-between' => 'space-between',
);

$style = "$selector {";
$style .= 'display: flex;';
if ( $has_block_gap_support ) {
Expand All @@ -77,6 +84,14 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
}
$style .= 'flex-wrap: wrap;';
$style .= 'align-items: center;';
/**
* Add this style only if is not empty for backwards compatibility,
* since we intend to convert blocks that had flex layout implemented
* by custom css.
*/
if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
$style .= "justify-content: {$justify_content_options[ $layout['justifyContent'] ]};";
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@youknowriad 's comment:

I was expecting more changes here to retrieve the "default layout" from the block support config and apply it when the "layout" attribute is empty.

The passed layout has already checked the existence of default block layout.

$style .= '}';

$style .= "$selector > * { margin: 0; }";
Expand Down
89 changes: 55 additions & 34 deletions packages/block-editor/src/hooks/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,23 +40,32 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
return getSettings().supportsLayout;
}, [] );

if ( ! themeSupportsLayout ) {
return null;
}

const layoutBlockSupport = getBlockSupport(
blockName,
layoutBlockSupportKey,
{}
);
const {
allowSwitching: canBlockSwitchLayout,
allowSwitching,
allowEditing = true,
allowInheriting = true,
default: defaultBlockLayout,
} = getBlockSupport( blockName, layoutBlockSupportKey ) || {};
} = layoutBlockSupport;

if ( ! allowEditing ) {
return null;
}

const usedLayout = layout ? layout : defaultBlockLayout || {};
const usedLayout = layout || defaultBlockLayout || {};
const { inherit = false, type = 'default' } = usedLayout;
/**
* `themeSupportsLayout` is only relevant to the `default/flow`
* layout and it should not be taken into account when other
* `layout` types are used.
*/
if ( type === 'default' && ! themeSupportsLayout ) {
return null;
}
const layoutType = getLayoutType( type );

const onChangeType = ( newType ) =>
Expand All @@ -65,33 +74,45 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
setAttributes( { layout: newLayout } );

return (
<InspectorControls>
<PanelBody title={ __( 'Layout' ) }>
{ allowInheriting && !! defaultThemeLayout && (
<ToggleControl
label={ __( 'Inherit default layout' ) }
checked={ !! inherit }
onChange={ () =>
setAttributes( { layout: { inherit: ! inherit } } )
}
/>
) }

{ ! inherit && canBlockSwitchLayout && (
<LayoutTypeSwitcher
type={ type }
onChange={ onChangeType }
/>
) }

{ ! inherit && layoutType && (
<layoutType.edit
layout={ usedLayout }
onChange={ onChangeLayout }
/>
) }
</PanelBody>
</InspectorControls>
<>
<InspectorControls>
<PanelBody title={ __( 'Layout' ) }>
{ allowInheriting && !! defaultThemeLayout && (
<ToggleControl
label={ __( 'Inherit default layout' ) }
checked={ !! inherit }
onChange={ () =>
setAttributes( {
layout: { inherit: ! inherit },
} )
}
/>
) }

{ ! inherit && allowSwitching && (
<LayoutTypeSwitcher
type={ type }
onChange={ onChangeType }
/>
) }

{ ! inherit && layoutType && (
<layoutType.inspectorControls
layout={ usedLayout }
onChange={ onChangeLayout }
layoutBlockSupport={ layoutBlockSupport }
/>
) }
</PanelBody>
</InspectorControls>
{ ! inherit && layoutType && (
<layoutType.toolBarControls
layout={ usedLayout }
onChange={ onChangeLayout }
layoutBlockSupport={ layoutBlockSupport }
/>
) }
</>
);
}

Expand Down
117 changes: 107 additions & 10 deletions packages/block-editor/src/layouts/flex.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,63 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { __, _x } from '@wordpress/i18n';
import {
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from '@wordpress/components';

/**
* Internal dependencies
*/
import { appendSelectors } from './utils';
import useSetting from '../components/use-setting';
import { BlockControls, JustifyContentControl } from '../components';

const justifyContentMap = {
left: 'flex-start',
right: 'flex-end',
center: 'center',
'space-between': 'space-between',
};

export default {
name: 'flex',

label: __( 'Flex' ),

edit() {
return null;
inspectorControls: function FlexLayoutInspectorControls( {
layout = {},
onChange,
} ) {
return (
<FlexLayoutJustifyContentControl
layout={ layout }
onChange={ onChange }
/>
);
},

save: function FlexLayoutStyle( { selector } ) {
toolBarControls: function FlexLayoutToolbarControls( {
layout = {},
onChange,
layoutBlockSupport,
} ) {
if ( layoutBlockSupport?.allowSwitching ) {
return null;
}
return (
<BlockControls group="block" __experimentalExposeToChildren>
<FlexLayoutJustifyContentControl
layout={ layout }
onChange={ onChange }
isToolbar
/>
</BlockControls>
);
},
save: function FlexLayoutStyle( { selector, layout } ) {
const blockGapSupport = useSetting( 'spacing.blockGap' );
const hasBlockGapStylesSupport = blockGapSupport !== null;

const justifyContent =
justifyContentMap[ layout.justifyContent ] || 'flex-start';
return (
<style>{ `
${ appendSelectors( selector ) } {
Expand All @@ -33,6 +69,8 @@ export default {
};
flex-wrap: wrap;
align-items: center;
flex-direction: row;
justify-content: ${ justifyContent };
}

${ appendSelectors( selector, '> *' ) } {
Expand All @@ -41,12 +79,71 @@ export default {
` }</style>
);
},

getOrientation() {
return 'horizontal';
},

getAlignments() {
return [];
},
};

function FlexLayoutJustifyContentControl( {
layout,
onChange,
isToolbar = false,
} ) {
const { justifyContent = 'left' } = layout;
if ( isToolbar ) {
return (
<JustifyContentControl
allowedControls={ [
'left',
'center',
'right',
'space-between',
] }
value={ justifyContent }
onChange={ ( value ) => {
onChange( {
...layout,
justifyContent: value,
} );
} }
popoverProps={ {
position: 'bottom right',
isAlternate: true,
} }
/>
);
}
return (
<ToggleGroupControl
label={ __( 'Justify content' ) }
Copy link
Contributor

Choose a reason for hiding this comment

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

The label seems too close to the buttons in this case,
Also clicking the label doesn't seem to focus the buttons like labels do in general in controls.

I believe these are probably independent of this PR but could use some improvements separately.

value={ justifyContent }
onChange={ ( value ) => {
onChange( {
...layout,
justifyContent: value,
} );
} }
isBlock
>
<ToggleGroupControlOption
value="left"
label={ _x( 'Left', 'Justify content option' ) }
/>
<ToggleGroupControlOption
value="center"
label={ _x( 'Center', 'Justify content option' ) }
/>
<ToggleGroupControlOption
value="right"
label={ _x( 'Right', 'Justify content option' ) }
/>
<ToggleGroupControlOption
value="space-between"
label={ _x( 'Space between', 'Justify content option' ) }
/>
</ToggleGroupControl>
);
}
19 changes: 10 additions & 9 deletions packages/block-editor/src/layouts/flow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,11 @@ import { appendSelectors } from './utils';

export default {
name: 'default',

label: __( 'Flow' ),

edit: function LayoutDefaultEdit( { layout, onChange } ) {
inspectorControls: function DefaultLayoutInspectorControls( {
layout,
onChange,
} ) {
const { wideSize, contentSize } = layout;
const units = useCustomUnits( {
availableUnits: useSetting( 'spacing.units' ) || [
Expand Down Expand Up @@ -101,7 +102,9 @@ export default {
</>
);
},

toolBarControls: function DefaultLayoutToolbarControls() {
return null;
},
save: function DefaultLayoutStyle( { selector, layout = {} } ) {
const { contentSize, wideSize } = layout;
const blockGapSupport = useSetting( 'spacing.blockGap' );
Expand All @@ -115,11 +118,11 @@ export default {
margin-left: auto !important;
margin-right: auto !important;
}

${ appendSelectors( selector, '> [data-align="wide"]' ) } {
max-width: ${ wideSize ?? contentSize };
}

${ appendSelectors( selector, '> [data-align="full"]' ) } {
max-width: none;
}
Expand All @@ -131,7 +134,7 @@ export default {
float: left;
margin-right: 2em;
}

${ appendSelectors( selector, '> [data-align="right"]' ) } {
float: right;
margin-left: 2em;
Expand All @@ -150,11 +153,9 @@ export default {

return <style>{ style }</style>;
},

getOrientation() {
return 'vertical';
},

getAlignments( layout ) {
if ( layout.alignments !== undefined ) {
return layout.alignments;
Expand Down
9 changes: 8 additions & 1 deletion packages/block-library/src/social-links/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,14 @@
"supports": {
"align": [ "left", "center", "right" ],
"anchor": true,
"__experimentalExposeControlsToChildren": true
"__experimentalExposeControlsToChildren": true,
"__experimentalLayout": {
"allowSwitching": false,
"allowInheriting": false,
"default": {
"type": "flex"
}
}
},
"styles": [
{ "name": "default", "label": "Default", "isDefault": true },
Expand Down
Loading