-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Layout controls to children of Flex layout blocks (#45364)
* Add Layout controls to children of Flex layout blocks * Child layout styles on the editor * Try to get it working on server * Fix style generation * Fix classname logic * Add hug option and change names to accommodate vertical orientation * Don't trash existing styles * Merge layout panels * Move controls to dimensions panel * Use VStack for margins. * Change "hug" label and add help text. * Wipe fixed width when other setting is chosen. * Update doc comment. * Try parent layout logic in native BlockEdit * Add sizing controls to transformed Rows and Stacks * Failsafe if parent layout doesn't exist * Fixed controls not rendering for certain block types * Actual 40px size * Make opt-in a default property of layout support * Fix error when block doesn't exist * Update lib/block-supports/layout.php string content ftw Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
- Loading branch information
1 parent
0b9bf24
commit 220e945
Showing
8 changed files
with
372 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,172 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| __experimentalToggleGroupControl as ToggleGroupControl, | ||
| __experimentalToggleGroupControlOption as ToggleGroupControlOption, | ||
| __experimentalUnitControl as UnitControl, | ||
| } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import useSetting from '../components/use-setting'; | ||
|
|
||
| function helpText( selfStretch ) { | ||
| switch ( selfStretch ) { | ||
| case 'fill': | ||
| return __( 'Stretch to fill available space.' ); | ||
| case 'fixed': | ||
| return __( 'Specify a fixed width.' ); | ||
| default: | ||
| return __( 'Fit contents.' ); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Inspector controls containing the child layout related configuration. | ||
| * | ||
| * @param {Object} props Block props. | ||
| * @param {Object} props.attributes Block attributes. | ||
| * @param {Object} props.setAttributes Function to set block attributes. | ||
| * @param {Object} props.__unstableParentLayout | ||
| * | ||
| * @return {WPElement} child layout edit element. | ||
| */ | ||
| export function ChildLayoutEdit( { | ||
| attributes, | ||
| setAttributes, | ||
| __unstableParentLayout: parentLayout, | ||
| } ) { | ||
| const { style = {} } = attributes; | ||
| const { layout: childLayout = {} } = style; | ||
| const { selfStretch, flexSize } = childLayout; | ||
|
|
||
| return ( | ||
| <> | ||
| <ToggleGroupControl | ||
| size={ '__unstable-large' } | ||
| label={ childLayoutOrientation( parentLayout ) } | ||
| value={ selfStretch || 'fit' } | ||
| help={ helpText( selfStretch ) } | ||
| onChange={ ( value ) => { | ||
| const newFlexSize = value !== 'fixed' ? null : flexSize; | ||
| setAttributes( { | ||
| style: { | ||
| ...style, | ||
| layout: { | ||
| ...childLayout, | ||
| selfStretch: value, | ||
| flexSize: newFlexSize, | ||
| }, | ||
| }, | ||
| } ); | ||
| } } | ||
| isBlock={ true } | ||
| > | ||
| <ToggleGroupControlOption | ||
| key={ 'fit' } | ||
| value={ 'fit' } | ||
| label={ __( 'Fit' ) } | ||
| /> | ||
| <ToggleGroupControlOption | ||
| key={ 'fill' } | ||
| value={ 'fill' } | ||
| label={ __( 'Fill' ) } | ||
| /> | ||
| <ToggleGroupControlOption | ||
| key={ 'fixed' } | ||
| value={ 'fixed' } | ||
| label={ __( 'Fixed' ) } | ||
| /> | ||
| </ToggleGroupControl> | ||
| { selfStretch === 'fixed' && ( | ||
| <UnitControl | ||
| size={ '__unstable-large' } | ||
| style={ { height: 'auto' } } | ||
| onChange={ ( value ) => { | ||
| setAttributes( { | ||
| style: { | ||
| ...style, | ||
| layout: { | ||
| ...childLayout, | ||
| flexSize: value, | ||
| }, | ||
| }, | ||
| } ); | ||
| } } | ||
| value={ flexSize } | ||
| /> | ||
| ) } | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * Determines if there is child layout support. | ||
| * | ||
| * @param {Object} props Block Props object. | ||
| * @param {Object} props.__unstableParentLayout Parent layout. | ||
| * | ||
| * @return {boolean} Whether there is support. | ||
| */ | ||
| export function hasChildLayoutSupport( { | ||
| __unstableParentLayout: parentLayout = {}, | ||
| } ) { | ||
| const { | ||
| type: parentLayoutType = 'default', | ||
| allowSizingOnChildren = false, | ||
| } = parentLayout; | ||
| const support = parentLayoutType === 'flex' && allowSizingOnChildren; | ||
|
|
||
| return support; | ||
| } | ||
|
|
||
| /** | ||
| * Checks if there is a current value in the child layout attributes. | ||
| * | ||
| * @param {Object} props Block props. | ||
| * @return {boolean} Whether or not the block has a child layout value set. | ||
| */ | ||
| export function hasChildLayoutValue( props ) { | ||
| return props.attributes.style?.layout !== undefined; | ||
| } | ||
|
|
||
| /** | ||
| * Resets the child layout attribute. This can be used when disabling | ||
| * child layout controls for a block via a progressive discovery panel. | ||
| * | ||
| * @param {Object} props Block props. | ||
| * @param {Object} props.attributes Block attributes. | ||
| * @param {Object} props.setAttributes Function to set block attributes. | ||
| */ | ||
| export function resetChildLayout( { attributes = {}, setAttributes } ) { | ||
| const { style } = attributes; | ||
|
|
||
| setAttributes( { | ||
| style: { | ||
| ...style, | ||
| layout: undefined, | ||
| }, | ||
| } ); | ||
| } | ||
|
|
||
| /** | ||
| * Custom hook that checks if child layout settings have been disabled. | ||
| * | ||
| * @param {Object} props Block props. | ||
| * | ||
| * @return {boolean} Whether the child layout setting is disabled. | ||
| */ | ||
| export function useIsChildLayoutDisabled( props ) { | ||
| const isDisabled = ! useSetting( 'layout' ); | ||
|
|
||
| return ! hasChildLayoutSupport( props ) || isDisabled; | ||
| } | ||
|
|
||
| export function childLayoutOrientation( parentLayout ) { | ||
| const { orientation = 'horizontal' } = parentLayout; | ||
|
|
||
| return orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' ); | ||
| } |
Oops, something went wrong.