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

Sticky Position: Hide controls if the block is non-root (has parents) #47334

Merged
merged 1 commit into from
Jan 23, 2023
Merged

Sticky Position: Hide controls if the block is non-root (has parents) #47334

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
93 changes: 55 additions & 38 deletions packages/block-editor/src/hooks/position.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { __, sprintf } from '@wordpress/i18n';
import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
import { BaseControl, CustomSelectControl } from '@wordpress/components';
import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';
import {
useContext,
useMemo,
Expand All @@ -25,6 +26,7 @@ import BlockList from '../components/block-list';
import useSetting from '../components/use-setting';
import InspectorControls from '../components/inspector-controls';
import { cleanEmptyObject } from './utils';
import { store as blockEditorStore } from '../store';

const POSITION_SUPPORT_KEY = 'position';

Expand Down Expand Up @@ -196,15 +198,16 @@ export function useIsPositionDisabled( { name: blockName } = {} ) {
}

/*
* Position controls to be rendered in an inspector control panel.
* Position controls rendered in an inspector control panel.
*
* @param {Object} props
*
* @return {WPElement} Padding edit element.
* @return {WPElement} Position panel.
*/
export function PositionEdit( props ) {
export function PositionPanel( props ) {
const {
attributes: { style = {} },
clientId,
name: blockName,
setAttributes,
} = props;
Expand All @@ -213,16 +216,32 @@ export function PositionEdit( props ) {
const allowSticky = hasStickyPositionSupport( blockName );
const value = style?.position?.type;

const { hasParents } = useSelect(
( select ) => {
const { getBlockParents } = select( blockEditorStore );
const parents = getBlockParents( clientId );
return {
hasParents: parents.length,
};
},
[ clientId ]
);

const options = useMemo( () => {
const availableOptions = [ DEFAULT_OPTION ];
if ( allowSticky || value === STICKY_OPTION.value ) {
// Only display sticky option if the block has no parents (is at the root of the document),
// or if the block already has a sticky position value set.
if (
( allowSticky && ! hasParents ) ||
value === STICKY_OPTION.value
) {
availableOptions.push( STICKY_OPTION );
}
if ( allowFixed || value === FIXED_OPTION.value ) {
availableOptions.push( FIXED_OPTION );
}
return availableOptions;
}, [ allowFixed, allowSticky, value ] );
}, [ allowFixed, allowSticky, hasParents, value ] );

const onChangeType = ( next ) => {
// For now, use a hard-coded `0px` value for the position.
Expand Down Expand Up @@ -251,32 +270,37 @@ export function PositionEdit( props ) {
? options.find( ( option ) => option.value === value ) || DEFAULT_OPTION
: DEFAULT_OPTION;

// Only display position controls if there is at least one option to choose from.
return Platform.select( {
web: (
<>
<BaseControl className="block-editor-hooks__position-selection">
<CustomSelectControl
__nextUnconstrainedWidth
__next36pxDefaultSize
className="block-editor-hooks__position-selection__select-control"
label={ __( 'Position' ) }
hideLabelFromVision
describedBy={ sprintf(
// translators: %s: Currently selected font size.
__( 'Currently selected position: %s' ),
selectedOption.name
) }
options={ options }
value={ selectedOption }
__experimentalShowSelectedHint
onChange={ ( { selectedItem } ) => {
onChangeType( selectedItem.value );
} }
size={ '__unstable-large' }
/>
</BaseControl>
</>
),
web:
options.length > 1 ? (
<InspectorControls
key="position"
__experimentalGroup="position"
>
<BaseControl className="block-editor-hooks__position-selection">
<CustomSelectControl
__nextUnconstrainedWidth
__next36pxDefaultSize
className="block-editor-hooks__position-selection__select-control"
label={ __( 'Position' ) }
hideLabelFromVision
describedBy={ sprintf(
// translators: %s: Currently selected position.
__( 'Currently selected position: %s' ),
selectedOption.name
) }
options={ options }
value={ selectedOption }
__experimentalShowSelectedHint
onChange={ ( { selectedItem } ) => {
onChangeType( selectedItem.value );
} }
size={ '__unstable-large' }
/>
</BaseControl>
</InspectorControls>
) : null,
native: null,
} );
}
Expand All @@ -299,14 +323,7 @@ export const withInspectorControls = createHigherOrderComponent(
positionSupport && ! useIsPositionDisabled( props );

return [
showPositionControls && (
<InspectorControls
key="position"
__experimentalGroup="position"
>
<PositionEdit { ...props } />
</InspectorControls>
),
showPositionControls && <PositionPanel { ...props } />,
<BlockEdit key="edit" { ...props } />,
];
},
Expand Down