diff --git a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
index fbe072fab11c58..bf7f61de4c8cb7 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
@@ -43,6 +43,7 @@ export default function useInspectorControlsTabs( blockName ) {
default: defaultGroup,
dimensions: dimensionsGroup,
list: listGroup,
+ position: positionGroup,
typography: typographyGroup,
} = InspectorControlsGroups;
@@ -71,6 +72,7 @@ export default function useInspectorControlsTabs( blockName ) {
// or Advanced Controls slot, then add this tab.
const settingsFills = [
...( useSlotFills( defaultGroup.Slot.__unstableName ) || [] ),
+ ...( useSlotFills( positionGroup.Slot.__unstableName ) || [] ),
...( useSlotFills( InspectorAdvancedControls.slotName ) || [] ),
];
diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js
index cb03c1ff13fa57..46fca564925aa6 100644
--- a/packages/block-editor/src/components/inspector-controls/groups.js
+++ b/packages/block-editor/src/components/inspector-controls/groups.js
@@ -10,6 +10,7 @@ const InspectorControlsColor = createSlotFill( 'InspectorControlsColor' );
const InspectorControlsDimensions = createSlotFill(
'InspectorControlsDimensions'
);
+const InspectorControlsPosition = createSlotFill( 'InspectorControlsPosition' );
const InspectorControlsTypography = createSlotFill(
'InspectorControlsTypography'
);
@@ -23,6 +24,7 @@ const groups = {
dimensions: InspectorControlsDimensions,
list: InspectorControlsListView,
typography: InspectorControlsTypography,
+ position: InspectorControlsPosition,
};
export default groups;
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index f6fa73a053ac58..84b3ba3a95a33b 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -14,6 +14,7 @@ import './color';
import './duotone';
import './font-size';
import './border';
+import './position';
import './layout';
import './content-lock-ui';
import './metadata';
diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js
new file mode 100644
index 00000000000000..1e50c35bfd0e6f
--- /dev/null
+++ b/packages/block-editor/src/hooks/position.js
@@ -0,0 +1,375 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
+import { BaseControl, CustomSelectControl } from '@wordpress/components';
+import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
+import {
+ useContext,
+ useMemo,
+ createPortal,
+ Platform,
+} from '@wordpress/element';
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import BlockList from '../components/block-list';
+import useSetting from '../components/use-setting';
+import InspectorControls from '../components/inspector-controls';
+import { cleanEmptyObject } from './utils';
+
+const POSITION_SUPPORT_KEY = 'position';
+
+const OPTION_CLASSNAME =
+ 'block-editor-hooks__position-selection__select-control__option';
+
+const DEFAULT_OPTION = {
+ key: 'default',
+ value: '',
+ name: __( 'Default' ),
+ className: OPTION_CLASSNAME,
+};
+
+const STICKY_OPTION = {
+ key: 'sticky',
+ value: 'sticky',
+ name: __( 'Sticky' ),
+ className: OPTION_CLASSNAME,
+ __experimentalHint: __(
+ 'The block will stick to the top of the window instead of scrolling.'
+ ),
+};
+
+const FIXED_OPTION = {
+ key: 'fixed',
+ value: 'fixed',
+ name: __( 'Fixed' ),
+ className: OPTION_CLASSNAME,
+ __experimentalHint: __(
+ 'The block will not move when the page is scrolled.'
+ ),
+};
+
+const POSITION_SIDES = [ 'top', 'right', 'bottom', 'left' ];
+const VALID_POSITION_TYPES = [ 'sticky', 'fixed' ];
+
+/**
+ * Get calculated position CSS.
+ *
+ * @param {Object} props Component props.
+ * @param {string} props.selector Selector to use.
+ * @param {Object} props.style Style object.
+ * @return {string} The generated CSS rules.
+ */
+export function getPositionCSS( { selector, style } ) {
+ let output = '';
+
+ const { type: positionType } = style?.position || {};
+
+ if ( ! VALID_POSITION_TYPES.includes( positionType ) ) {
+ return output;
+ }
+
+ output += `${ selector } {`;
+ output += `position: ${ positionType };`;
+
+ POSITION_SIDES.forEach( ( side ) => {
+ if ( style?.position?.[ side ] !== undefined ) {
+ output += `${ side }: ${ style.position[ side ] };`;
+ }
+ } );
+
+ if ( positionType === 'sticky' || positionType === 'fixed' ) {
+ // TODO: Replace hard-coded z-index value with a z-index preset approach in theme.json.
+ output += `z-index: 10`;
+ }
+ output += `}`;
+
+ return output;
+}
+
+/**
+ * Determines if there is sticky position support.
+ *
+ * @param {string|Object} blockType Block name or Block Type object.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasStickyPositionSupport( blockType ) {
+ const support = getBlockSupport( blockType, POSITION_SUPPORT_KEY );
+ return !! ( true === support || support?.sticky );
+}
+
+/**
+ * Determines if there is fixed position support.
+ *
+ * @param {string|Object} blockType Block name or Block Type object.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasFixedPositionSupport( blockType ) {
+ const support = getBlockSupport( blockType, POSITION_SUPPORT_KEY );
+ return !! ( true === support || support?.fixed );
+}
+
+/**
+ * Determines if there is position support.
+ *
+ * @param {string|Object} blockType Block name or Block Type object.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasPositionSupport( blockType ) {
+ const support = getBlockSupport( blockType, POSITION_SUPPORT_KEY );
+ return !! support;
+}
+
+/**
+ * Checks if there is a current value in the position block support attributes.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean} Whether or not the block has a position value set.
+ */
+export function hasPositionValue( props ) {
+ return props.attributes.style?.position?.type !== undefined;
+}
+
+/**
+ * Checks if the block is currently set to a sticky or fixed position.
+ * This check is helpful for determining how to position block toolbars or other elements.
+ *
+ * @param {Object} attributes Block attributes.
+ * @return {boolean} Whether or not the block is set to a sticky or fixed position.
+ */
+export function hasStickyOrFixedPositionValue( attributes ) {
+ const positionType = attributes.style?.position?.type;
+ return positionType === 'sticky' || positionType === 'fixed';
+}
+
+/**
+ * Resets the position block support attributes. This can be used when disabling
+ * the position support controls for a block via a `ToolsPanel`.
+ *
+ * @param {Object} props Block props.
+ * @param {Object} props.attributes Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+export function resetPosition( { attributes = {}, setAttributes } ) {
+ const { style = {} } = attributes;
+
+ setAttributes( {
+ style: cleanEmptyObject( {
+ ...style,
+ position: {
+ ...style?.position,
+ type: undefined,
+ top: undefined,
+ right: undefined,
+ bottom: undefined,
+ left: undefined,
+ },
+ } ),
+ } );
+}
+
+/**
+ * Custom hook that checks if position settings have been disabled.
+ *
+ * @param {string} name The name of the block.
+ *
+ * @return {boolean} Whether padding setting is disabled.
+ */
+export function useIsPositionDisabled( { name: blockName } = {} ) {
+ const allowFixed = useSetting( 'position.fixed' );
+ const allowSticky = useSetting( 'position.sticky' );
+ const isDisabled = ! allowFixed && ! allowSticky;
+
+ return ! hasPositionSupport( blockName ) || isDisabled;
+}
+
+/*
+ * Position controls to be rendered in an inspector control panel.
+ *
+ * @param {Object} props
+ *
+ * @return {WPElement} Padding edit element.
+ */
+export function PositionEdit( props ) {
+ const {
+ attributes: { style = {} },
+ name: blockName,
+ setAttributes,
+ } = props;
+
+ const allowFixed = hasFixedPositionSupport( blockName );
+ const allowSticky = hasStickyPositionSupport( blockName );
+ const value = style?.position?.type;
+
+ const options = useMemo( () => {
+ const availableOptions = [ DEFAULT_OPTION ];
+ if ( allowSticky || value === STICKY_OPTION.value ) {
+ availableOptions.push( STICKY_OPTION );
+ }
+ if ( allowFixed || value === FIXED_OPTION.value ) {
+ availableOptions.push( FIXED_OPTION );
+ }
+ return availableOptions;
+ }, [ allowFixed, allowSticky, value ] );
+
+ const onChangeType = ( next ) => {
+ // For now, use a hard-coded `0px` value for the position.
+ // `0px` is preferred over `0` as it can be used in `calc()` functions.
+ // In the future, it could be useful to allow for an offset value.
+ const placementValue = '0px';
+
+ const newStyle = {
+ ...style,
+ position: {
+ ...style?.position,
+ type: next,
+ top:
+ next === 'sticky' || next === 'fixed'
+ ? placementValue
+ : undefined,
+ },
+ };
+
+ setAttributes( {
+ style: cleanEmptyObject( newStyle ),
+ } );
+ };
+
+ const selectedOption = value
+ ? options.find( ( option ) => option.value === value ) || DEFAULT_OPTION
+ : DEFAULT_OPTION;
+
+ return Platform.select( {
+ web: (
+ <>
+
+ {
+ onChangeType( selectedItem.value );
+ } }
+ size={ '__unstable-large' }
+ />
+
+
+ ),
+ native: null,
+ } );
+}
+
+/**
+ * Override the default edit UI to include position controls.
+ *
+ * @param {Function} BlockEdit Original component.
+ *
+ * @return {Function} Wrapped component.
+ */
+export const withInspectorControls = createHigherOrderComponent(
+ ( BlockEdit ) => ( props ) => {
+ const { name: blockName } = props;
+ const positionSupport = hasBlockSupport(
+ blockName,
+ POSITION_SUPPORT_KEY
+ );
+ const showPositionControls =
+ positionSupport && ! useIsPositionDisabled( props );
+
+ return [
+ showPositionControls && (
+
+
+
+ ),
+
,
+ ];
+ },
+ 'withInspectorControls'
+);
+
+/**
+ * Override the default block element to add the position styles.
+ *
+ * @param {Function} BlockListBlock Original component.
+ *
+ * @return {Function} Wrapped component.
+ */
+export const withPositionStyles = createHigherOrderComponent(
+ ( BlockListBlock ) => ( props ) => {
+ const { name, attributes } = props;
+ const hasPositionBlockSupport = hasBlockSupport(
+ name,
+ POSITION_SUPPORT_KEY
+ );
+ const allowPositionStyles =
+ hasPositionBlockSupport && ! useIsPositionDisabled( props );
+
+ const id = useInstanceId( BlockListBlock );
+ const element = useContext( BlockList.__unstableElementContext );
+
+ // Higher specificity to override defaults in editor UI.
+ const positionSelector = `.wp-container-${ id }.wp-container-${ id }`;
+
+ // Get CSS string for the current position values.
+ let css;
+ if ( allowPositionStyles ) {
+ css =
+ getPositionCSS( {
+ selector: positionSelector,
+ style: attributes?.style,
+ } ) || '';
+ }
+
+ // Attach a `wp-container-` id-based class name.
+ const className = classnames( props?.className, {
+ [ `wp-container-${ id }` ]: allowPositionStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
+ } );
+
+ return (
+ <>
+ { allowPositionStyles &&
+ element &&
+ !! css &&
+ createPortal( , element ) }
+
+
+ );
+ }
+);
+
+addFilter(
+ 'editor.BlockListBlock',
+ 'core/editor/position/with-position-styles',
+ withPositionStyles
+);
+addFilter(
+ 'editor.BlockEdit',
+ 'core/editor/position/with-inspector-controls',
+ withInspectorControls
+);
diff --git a/packages/block-editor/src/hooks/position.scss b/packages/block-editor/src/hooks/position.scss
new file mode 100644
index 00000000000000..b3bd6b1b9ef041
--- /dev/null
+++ b/packages/block-editor/src/hooks/position.scss
@@ -0,0 +1,18 @@
+.block-editor-hooks__position-selection__select-control {
+ .components-custom-select-control__hint {
+ display: none;
+ }
+}
+
+.block-editor-hooks__position-selection__select-control__option {
+ &.has-hint {
+ grid-template-columns: auto 30px;
+ line-height: $default-line-height;
+ margin-bottom: 0;
+ }
+
+ .components-custom-select-control__item-hint {
+ grid-row: 2;
+ text-align: left;
+ }
+}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 76da3c16325db9..3c2f60388e0df0 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -50,6 +50,7 @@
@import "./hooks/layout.scss";
@import "./hooks/border.scss";
@import "./hooks/dimensions.scss";
+@import "./hooks/position.scss";
@import "./hooks/typography.scss";
@import "./hooks/color.scss";
@import "./hooks/padding.scss";
diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json
index a3997db0621c54..2b227a15847a27 100644
--- a/packages/block-library/src/group/block.json
+++ b/packages/block-library/src/group/block.json
@@ -56,6 +56,9 @@
"width": true
}
},
+ "position": {
+ "sticky": true
+ },
"typography": {
"fontSize": true,
"lineHeight": true,