@wordpress/block-editor 15.5.0 → 15.5.1-next.47f435fc9.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.5.0",
+	"version": "15.5.1-next.47f435fc9.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -25,50 +25,70 @@
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"exports": {
+		".": {
+			"types": "./build-types/index.d.ts",
+			"import": "./build-module/index.js",
+			"require": "./build/index.js"
+		},
+		"./package.json": "./package.json",
+		"./build-style/": "./build-style/"
+	},
 	"react-native": "src/index",
 	"wpScript": true,
+	"wpScriptModuleExports": {
+		"./utils/fit-text-frontend": "./build-module/utils/fit-text-frontend.js"
+	},
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss",
-		"{src,build,build-module}/{index.js,store/index.js,hooks/**}"
+		"src/index.js",
+		"src/store/index.js",
+		"src/hooks/**",
+		"build/index.js",
+		"build/store/index.js",
+		"build/hooks/**",
+		"build-module/index.js",
+		"build-module/store/index.js",
+		"build-module/hooks/**"
 	],
 	"dependencies": {
-		"@babel/runtime": "7.25.7",
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.32.0",
-		"@wordpress/api-fetch": "^7.32.0",
-		"@wordpress/blob": "^4.32.0",
-		"@wordpress/block-serialization-default-parser": "^5.32.0",
-		"@wordpress/blocks": "^15.5.0",
-		"@wordpress/commands": "^1.32.0",
-		"@wordpress/components": "^30.5.0",
-		"@wordpress/compose": "^7.32.0",
-		"@wordpress/data": "^10.32.0",
-		"@wordpress/date": "^5.32.0",
-		"@wordpress/deprecated": "^4.32.0",
-		"@wordpress/dom": "^4.32.0",
-		"@wordpress/element": "^6.32.0",
-		"@wordpress/escape-html": "^3.32.0",
-		"@wordpress/hooks": "^4.32.0",
-		"@wordpress/html-entities": "^4.32.0",
-		"@wordpress/i18n": "^6.5.0",
-		"@wordpress/icons": "^10.32.0",
-		"@wordpress/is-shallow-equal": "^5.32.0",
-		"@wordpress/keyboard-shortcuts": "^5.32.0",
-		"@wordpress/keycodes": "^4.32.0",
-		"@wordpress/notices": "^5.32.0",
-		"@wordpress/preferences": "^4.32.0",
-		"@wordpress/priority-queue": "^3.32.0",
-		"@wordpress/private-apis": "^1.32.0",
-		"@wordpress/rich-text": "^7.32.0",
-		"@wordpress/style-engine": "^2.32.0",
-		"@wordpress/token-list": "^3.32.0",
-		"@wordpress/upload-media": "^0.17.0",
-		"@wordpress/url": "^4.32.0",
-		"@wordpress/warning": "^3.32.0",
-		"@wordpress/wordcount": "^4.32.0",
+		"@wordpress/a11y": "^4.32.1-next.47f435fc9.0",
+		"@wordpress/api-fetch": "^7.32.1-next.47f435fc9.0",
+		"@wordpress/base-styles": "^6.8.1-next.47f435fc9.0",
+		"@wordpress/blob": "^4.32.1-next.47f435fc9.0",
+		"@wordpress/block-serialization-default-parser": "^5.32.1-next.47f435fc9.0",
+		"@wordpress/blocks": "^15.5.1-next.47f435fc9.0",
+		"@wordpress/commands": "^1.32.1-next.47f435fc9.0",
+		"@wordpress/components": "^30.6.1-next.47f435fc9.0",
+		"@wordpress/compose": "^7.32.1-next.47f435fc9.0",
+		"@wordpress/data": "^10.32.1-next.47f435fc9.0",
+		"@wordpress/date": "^5.32.1-next.47f435fc9.0",
+		"@wordpress/deprecated": "^4.32.1-next.47f435fc9.0",
+		"@wordpress/dom": "^4.32.1-next.47f435fc9.0",
+		"@wordpress/element": "^6.32.1-next.47f435fc9.0",
+		"@wordpress/escape-html": "^3.32.1-next.47f435fc9.0",
+		"@wordpress/hooks": "^4.32.1-next.47f435fc9.0",
+		"@wordpress/html-entities": "^4.32.1-next.47f435fc9.0",
+		"@wordpress/i18n": "^6.5.1-next.47f435fc9.0",
+		"@wordpress/icons": "^11.0.1-next.47f435fc9.0",
+		"@wordpress/is-shallow-equal": "^5.32.1-next.47f435fc9.0",
+		"@wordpress/keyboard-shortcuts": "^5.32.1-next.47f435fc9.0",
+		"@wordpress/keycodes": "^4.32.1-next.47f435fc9.0",
+		"@wordpress/notices": "^5.32.1-next.47f435fc9.0",
+		"@wordpress/preferences": "^4.32.1-next.47f435fc9.0",
+		"@wordpress/priority-queue": "^3.32.1-next.47f435fc9.0",
+		"@wordpress/private-apis": "^1.32.1-next.47f435fc9.0",
+		"@wordpress/rich-text": "^7.32.1-next.47f435fc9.0",
+		"@wordpress/style-engine": "^2.32.1-next.47f435fc9.0",
+		"@wordpress/token-list": "^3.32.1-next.47f435fc9.0",
+		"@wordpress/upload-media": "^0.17.1-next.47f435fc9.0",
+		"@wordpress/url": "^4.32.1-next.47f435fc9.0",
+		"@wordpress/warning": "^3.32.1-next.47f435fc9.0",
+		"@wordpress/wordcount": "^4.32.1-next.47f435fc9.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +111,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a030b4c0e0695239b942c7dc18511782b64f10ed"
+	"gitHead": "9720f22c138771d2ed1a0522725c3cdf1c242953"
 }

package/src/autocompleters/style.scss

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/variables" as *;
+
 .block-editor-autocompleters__block {
 	white-space: nowrap;
 

package/src/components/background-image-control/style.scss

@@ -1,3 +1,7 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/z-index" as *;
+
 .block-editor-global-styles-background-panel__inspector-media-replace-container {
 	border: $border-width solid $gray-300;
 	border-radius: $radius-small;

package/src/components/block-allowed-blocks/allowed-blocks-control.js

@@ -0,0 +1,80 @@
+/**
+ * WordPress dependencies
+ */
+import { BaseControl, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import BlockAllowedBlocksModal from './modal';
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockAllowedBlocksControl( { clientId } ) {
+	const [ isBlockControlOpened, setIsBlockControlOpened ] = useState( false );
+	const { blockTypes, selectedBlockNames } = useSelect(
+		( select ) => {
+			const { getBlockAttributes } = select( blockEditorStore );
+			return {
+				blockTypes: select( blocksStore ).getBlockTypes(),
+				selectedBlockNames:
+					getBlockAttributes( clientId )?.allowedBlocks,
+			};
+		},
+		[ clientId ]
+	);
+
+	const filteredBlockTypes = blockTypes.filter(
+		( blockType ) =>
+			hasBlockSupport( blockType, 'inserter', true ) &&
+			( ! blockType.parent ||
+				blockType.parent.includes( 'core/post-content' ) )
+	);
+
+	if ( ! filteredBlockTypes ) {
+		return null;
+	}
+
+	const selectedBlockTypes =
+		selectedBlockNames === undefined
+			? filteredBlockTypes
+			: filteredBlockTypes.filter( ( blockType ) =>
+					selectedBlockNames.includes( blockType.name )
+			  );
+
+	return (
+		<div className="block-editor-block-allowed-blocks-control">
+			<BaseControl
+				help={ __(
+					'Specify which blocks are allowed inside this container.'
+				) }
+				__nextHasNoMarginBottom
+			>
+				<BaseControl.VisualLabel>
+					{ __( 'Allowed Blocks' ) }
+				</BaseControl.VisualLabel>
+				<Button
+					__next40pxDefaultSize
+					variant="secondary"
+					onClick={ () => {
+						setIsBlockControlOpened( true );
+					} }
+					className="block-editor-block-allowed-blocks-control__button"
+				>
+					{ __( 'Manage allowed blocks' ) }
+				</Button>
+			</BaseControl>
+			{ isBlockControlOpened && (
+				<BlockAllowedBlocksModal
+					clientId={ clientId }
+					blockTypes={ filteredBlockTypes }
+					selectedBlockTypes={ selectedBlockTypes }
+					onClose={ () => setIsBlockControlOpened( false ) }
+				/>
+			) }
+		</div>
+	);
+}

package/src/components/block-allowed-blocks/index.js

@@ -0,0 +1,2 @@
+export { default as BlockAllowedBlocksControl } from './allowed-blocks-control';
+export { default as BlockAllowedBlocksModal } from './modal';

package/src/components/block-allowed-blocks/modal.js

@@ -0,0 +1,100 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Flex,
+	FlexItem,
+	Modal,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import BlockManager from '../block-manager';
+
+export default function BlockAllowedBlocksModal( {
+	clientId,
+	blockTypes,
+	selectedBlockTypes,
+	onClose,
+} ) {
+	const [ currentSelectedBlockTypes, setCurrentSelectedBlockTypes ] =
+		useState( selectedBlockTypes );
+
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const handleSubmit = () => {
+		const isFullySelected =
+			currentSelectedBlockTypes.length === blockTypes.length;
+		const newBlockNames = currentSelectedBlockTypes.map(
+			( { name } ) => name
+		);
+		updateBlockAttributes( clientId, {
+			allowedBlocks: isFullySelected ? undefined : newBlockNames,
+		} );
+		onClose();
+	};
+
+	return (
+		<Modal
+			title={ __( 'Manage allowed blocks' ) }
+			onRequestClose={ onClose }
+			overlayClassName="block-editor-block-allowed-blocks-modal"
+			focusOnMount="firstContentElement"
+			size="medium"
+		>
+			<VStack
+				as="form"
+				onSubmit={ ( e ) => {
+					e.preventDefault();
+					handleSubmit();
+				} }
+				spacing="4"
+			>
+				<Text>
+					{ __(
+						'Select which blocks can be added inside this container.'
+					) }
+				</Text>
+				<BlockManager
+					blockTypes={ blockTypes }
+					selectedBlockTypes={ currentSelectedBlockTypes }
+					onChange={ ( newSelectedBlockTypes ) => {
+						setCurrentSelectedBlockTypes( newSelectedBlockTypes );
+					} }
+				/>
+				<Flex
+					className="block-editor-block-allowed-blocks-modal__actions"
+					justify="flex-end"
+					expanded={ false }
+				>
+					<FlexItem>
+						<Button
+							variant="tertiary"
+							onClick={ onClose }
+							__next40pxDefaultSize
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+					</FlexItem>
+					<FlexItem>
+						<Button
+							variant="primary"
+							type="submit"
+							__next40pxDefaultSize
+						>
+							{ __( 'Apply' ) }
+						</Button>
+					</FlexItem>
+				</Flex>
+			</VStack>
+		</Modal>
+	);
+}

package/src/components/block-allowed-blocks/style.scss

@@ -0,0 +1,27 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/z-index" as *;
+
+.block-editor-block-allowed-blocks-control:not(:only-child) {
+	margin-top: $grid-unit-20;
+}
+
+.block-editor-block-allowed-blocks-control__button {
+	width: 100%;
+	justify-content: center;
+}
+
+.block-editor-block-allowed-blocks-modal {
+	z-index: z-index(".block-editor-block-allowed-blocks-modal");
+}
+
+.block-editor-block-allowed-blocks-modal__actions {
+	background-color: $white;
+	border-top: $border-width solid $gray-300;
+	bottom: -1 * $grid-unit-40;
+	left: 0;
+	margin: 0 (-1 * $grid-unit-40) (-1 * $grid-unit-40);
+	padding: $grid-unit-20 $grid-unit-40;
+	position: sticky;
+	z-index: 1;
+}

package/src/components/block-breadcrumb/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
 .block-editor-block-breadcrumb {
 	list-style: none;
 	padding: 0;

package/src/components/block-canvas/style.scss

@@ -1,3 +1,10 @@
+@use "sass:math";
+@use "@wordpress/base-styles/animations" as *;
+@use "@wordpress/base-styles/breakpoints" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
 iframe[name="editor-canvas"] {
 	box-sizing: border-box;
 	width: 100%;
@@ -7,5 +14,5 @@ iframe[name="editor-canvas"] {
 	@media not ( prefers-reduced-motion ) {
 		transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
 	}
-	background-color: $gray-300;
+	background-color: var(--wp-editor-canvas-background);
 }

package/src/components/block-card/index.js

@@ -46,14 +46,15 @@ const { Badge } = unlock( componentsPrivateApis );
  * }
  * ```
  *
- * @param {Object}        props             Component props.
- * @param {string}        props.title       The title of the block.
- * @param {string|Object} props.icon        The icon of the block. This can be any of [WordPress' Dashicons](https://developer.wordpress.org/resource/dashicons/), or a custom `svg` element.
- * @param {string}        props.description The description of the block.
- * @param {Object}        [props.blockType] Deprecated: Object containing block type data.
- * @param {string}        [props.className] Additional classes to apply to the card.
- * @param {string}        [props.name]      Custom block name to display before the title.
- * @param {Element}       [props.children]  Children.
+ * @param {Object}        props                         Component props.
+ * @param {string}        props.title                   The title of the block.
+ * @param {string|Object} props.icon                    The icon of the block. This can be any of [WordPress' Dashicons](https://developer.wordpress.org/resource/dashicons/), or a custom `svg` element.
+ * @param {string}        props.description             The description of the block.
+ * @param {Object}        [props.blockType]             Deprecated: Object containing block type data.
+ * @param {string}        [props.className]             Additional classes to apply to the card.
+ * @param {string}        [props.name]                  Custom block name to display before the title.
+ * @param {string}        [props.allowParentNavigation] Show a back arrow to the parent block in some situations.
+ * @param {Element}       [props.children]              Children.
  * @return {Element}                        Block card component.
  */
 function BlockCard( {
@@ -63,6 +64,7 @@ function BlockCard( {
 	blockType,
 	className,
 	name,
+	allowParentNavigation,
 	children,
 } ) {
 	if ( blockType ) {
@@ -73,38 +75,43 @@ function BlockCard( {
 		( { title, icon, description } = blockType );
 	}
 
-	const { parentNavBlockClientId } = useSelect( ( select ) => {
-		const { getSelectedBlockClientId, getBlockParentsByBlockName } =
-			select( blockEditorStore );
+	const parentNavBlockClientId = useSelect(
+		( select ) => {
+			if ( ! allowParentNavigation ) {
+				return;
+			}
+			const { getSelectedBlockClientId, getBlockParentsByBlockName } =
+				select( blockEditorStore );
 
-		const _selectedBlockClientId = getSelectedBlockClientId();
+			const _selectedBlockClientId = getSelectedBlockClientId();
 
-		return {
-			parentNavBlockClientId: getBlockParentsByBlockName(
+			return getBlockParentsByBlockName(
 				_selectedBlockClientId,
 				'core/navigation',
 				true
-			)[ 0 ],
-		};
-	}, [] );
+			)[ 0 ];
+		},
+		[ allowParentNavigation ]
+	);
 
 	const { selectBlock } = useDispatch( blockEditorStore );
 
 	return (
 		<div className={ clsx( 'block-editor-block-card', className ) }>
-			{ parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.
-				<Button
-					onClick={ () => selectBlock( parentNavBlockClientId ) }
-					label={ __( 'Go to parent Navigation block' ) }
-					style={
-						// TODO: This style override is also used in ToolsPanelHeader.
-						// It should be supported out-of-the-box by Button.
-						{ minWidth: 24, padding: 0 }
-					}
-					icon={ isRTL() ? chevronRight : chevronLeft }
-					size="small"
-				/>
-			) }
+			{ allowParentNavigation &&
+				parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.
+					<Button
+						onClick={ () => selectBlock( parentNavBlockClientId ) }
+						label={ __( 'Go to parent Navigation block' ) }
+						style={
+							// TODO: This style override is also used in ToolsPanelHeader.
+							// It should be supported out-of-the-box by Button.
+							{ minWidth: 24, padding: 0 }
+						}
+						icon={ isRTL() ? chevronRight : chevronLeft }
+						size="small"
+					/>
+				) }
 			<BlockIcon icon={ icon } showColors />
 			<VStack spacing={ 1 }>
 				<h2 className="block-editor-block-card__title">

package/src/components/block-card/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
 .block-editor-block-card {
 	align-items: flex-start;
 	color: $gray-900;

package/src/components/block-compare/style.scss

@@ -1,3 +1,7 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/breakpoints" as *;
+
 /**
  * Invalid block comparison
  */

package/src/components/block-draggable/content.scss

@@ -1,8 +1,9 @@
+@use "@wordpress/base-styles/variables" as *;
+
 // This creates a "slot" where the block you're dragging appeared.
 // We use !important as one of the rules are meant to be overridden.
 .block-editor-block-list__layout .is-dragging {
-	opacity: 0.1 !important;
-	border-radius: $radius-small !important;
+	opacity: 0.1;
 
 	iframe {
 		pointer-events: none;

package/src/components/block-draggable/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
 .block-editor-block-draggable-chip-wrapper {
 	position: absolute;
 	// Offset position so that cursor is centered over the drag handle.

package/src/components/block-icon/content.scss

@@ -1,3 +1,10 @@
+@use "sass:math";
+@use "@wordpress/base-styles/animations" as *;
+@use "@wordpress/base-styles/breakpoints" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
 .block-editor-block-icon {
 	display: flex;
 	align-items: center;

package/src/components/block-icon/style.scss

@@ -1,3 +1,10 @@
+@use "sass:math";
+@use "@wordpress/base-styles/animations" as *;
+@use "@wordpress/base-styles/breakpoints" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
 .block-editor-block-icon {
 	display: flex;
 	align-items: center;

package/src/components/block-inspector/index.js

@@ -147,11 +147,34 @@ function BlockInspector() {
 			const descendants = getClientIdsOfDescendants(
 				selectedBlockClientId
 			);
-			return descendants.filter(
-				( current ) =>
+
+			// Temporary workaround for issue #71991
+			// Exclude Navigation block children from Content sidebar until proper
+			// drill-down experience is implemented (see #65699)
+			// This prevents a poor UX where all Nav block sub-items are shown
+			// when the parent block is in contentOnly mode.
+			// Build a Set of all navigation block descendants for efficient lookup
+			const navigationDescendants = new Set();
+			descendants.forEach( ( clientId ) => {
+				if ( getBlockName( clientId ) === 'core/navigation' ) {
+					const navChildren = getClientIdsOfDescendants( clientId );
+					navChildren.forEach( ( childId ) =>
+						navigationDescendants.add( childId )
+					);
+				}
+			} );
+
+			return descendants.filter( ( current ) => {
+				// Exclude navigation block children
+				if ( navigationDescendants.has( current ) ) {
+					return false;
+				}
+
+				return (
 					getBlockName( current ) !== 'core/list-item' &&
 					getBlockEditingMode( current ) === 'contentOnly'
-			);
+				);
+			} );
 		},
 		[ isSectionBlock, selectedBlockClientId ]
 	);
@@ -301,6 +324,7 @@ const BlockInspectorSingleBlock = ( {
 			<BlockCard
 				{ ...blockInformation }
 				className={ isBlockSynced && 'is-synced' }
+				allowParentNavigation
 			>
 				{ window?.__experimentalContentOnlyPatternInsertion && (
 					<EditContentsButton clientId={ clientId } />

package/src/components/block-inspector/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
 .block-editor-block-inspector {
 	p:not(.components-base-control__help) {
 		margin-top: 0;

package/src/components/block-list/content.scss

@@ -1,3 +1,8 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/z-index" as *;
+
 // This remove the margins set here: https://github.com/WordPress/gutenberg/blob/17e5c2d870d84fb6de48dcd5bc3c38cd0c0fb0d0/packages/block-library/src/editor.scss#L56
 // It removes the margins around blocks when a BlockPreview is rendered in the block style selector
 .block-editor-block-styles .block-editor-block-list__block {
@@ -206,20 +211,24 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	&[data-clear="true"] {
 		float: none;
 	}
-}
-
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
 
-	&.is-selected,
-	&.is-hovered {
+	&:not([draggable="true"]),
+	&:not([data-draggable="true"]) {
 		cursor: default;
+	}
 
-		&.rich-text,
-		.rich-text {
-			cursor: auto;
-		}
+	&[draggable="true"],
+	&[data-draggable="true"] {
+		cursor: grab;
+	}
+
+	&[contenteditable],
+	[contenteditable] {
+		cursor: text;
 	}
+}
 
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
 	&.is-hovered:not(.is-selected),
 	&:not(.rich-text):not([contenteditable="true"]).is-selected {
 
@@ -460,3 +469,4 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 .is-dragging {
 	cursor: grabbing;
 }
+