@wordpress/block-editor 15.10.1-next.ba3aee3a2.0 → 15.11.0

package/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js

@@ -84,26 +84,29 @@ export default function useInspectorControlsTabs(
 		...( hasListFills && hasStyleFills > 1 ? advancedFills : [] ),
 	];
 
+	// When the block fields experiment is active, only rely on `hasContentFills`
+	// to determine whether the content tab to be shown. The tab purely uses slot
+	// fills in this situation.
+	const shouldShowBlockFields =
+		window?.__experimentalContentOnlyInspectorFields;
 	const hasContentTab =
 		hasContentFills ||
-		!! ( contentClientIds && contentClientIds.length > 0 );
+		( ! shouldShowBlockFields && contentClientIds?.length );
 
-	const hasListTab = hasListFills && ! isSectionBlock;
+	if ( hasContentTab ) {
+		tabs.push( TAB_CONTENT );
+	}
 
 	// Add the tabs in the order that they will default to if available.
 	// List View > Content > Settings > Styles.
-	if ( hasListTab ) {
+	if ( hasListFills ) {
 		tabs.push( TAB_LIST_VIEW );
 	}
 
-	if ( hasContentTab ) {
-		tabs.push( TAB_CONTENT );
-	}
-
 	if (
 		( settingsFills.length ||
 			// Advanded fills who up in settings tab if available or they blend into the default tab, if there's only one tab.
-			( advancedFills.length && ( hasContentTab || hasListTab ) ) ) &&
+			( advancedFills.length && ( hasContentTab || hasListFills ) ) ) &&
 		! isSectionBlock
 	) {
 		tabs.push( TAB_SETTINGS );

package/src/components/list-view/block-select-button.js

@@ -66,7 +66,7 @@ function ListViewBlockSelectButton(
 			( select ) => {
 				const { getBlockName, getBlockAttributes } =
 					select( blockEditorStore );
-				const { isBlockHidden: _isBlockHidden } = unlock(
+				const { areBlocksHiddenAnywhere } = unlock(
 					select( blockEditorStore )
 				);
 				const blockAttributes = getBlockAttributes( clientId );
@@ -76,7 +76,7 @@ function ListViewBlockSelectButton(
 						'visibility',
 						true
 					),
-					isBlockHidden: _isBlockHidden( clientId ),
+					isBlockHidden: areBlocksHiddenAnywhere( [ clientId ] ),
 					hasPatternName: !! blockAttributes?.metadata?.patternName,
 				};
 			},

package/src/components/list-view/block.js

@@ -54,6 +54,7 @@ import AriaReferencedText from './aria-referenced-text';
 import { unlock } from '../../lock-unlock';
 import usePasteStyles from '../use-paste-styles';
 import { cleanEmptyObject } from '../../hooks/utils';
+import { BlockVisibilityModal } from '../block-visibility';
 
 function ListViewBlock( {
 	block: { clientId },
@@ -79,7 +80,8 @@ function ListViewBlock( {
 	const settingsRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
 	const [ settingsAnchorRect, setSettingsAnchorRect ] = useState();
-
+	const [ visibilityModalClientIds, setVisibilityModalClientIds ] =
+		useState( null );
 	const { isLocked } = useBlockLock( clientId );
 
 	const isFirstSelectedBlock =
@@ -98,6 +100,7 @@ function ListViewBlock( {
 		insertBeforeBlock,
 		updateBlockAttributes,
 	} = unlock( useDispatch( blockEditorStore ) );
+
 	const debouncedToggleBlockHighlight = useDebounce(
 		toggleBlockHighlight,
 		50
@@ -125,15 +128,18 @@ function ListViewBlock( {
 	const { block, blockName, allowRightClickOverrides, isBlockHidden } =
 		useSelect(
 			( select ) => {
-				const { getBlock, getBlockName, getSettings } =
-					select( blockEditorStore );
+				const {
+					getBlock,
+					getBlockName: _getBlockName,
+					getSettings,
+				} = select( blockEditorStore );
 				const { isBlockHidden: _isBlockHidden } = unlock(
 					select( blockEditorStore )
 				);
 
 				return {
 					block: getBlock( clientId ),
-					blockName: getBlockName( clientId ),
+					blockName: _getBlockName( clientId ),
 					allowRightClickOverrides:
 						getSettings().allowRightClickOverrides,
 					isBlockHidden: _isBlockHidden( clientId ),
@@ -373,30 +379,40 @@ function ListViewBlock( {
 			event.preventDefault();
 			const { blocksToUpdate } = getBlocksToUpdate();
 			const blocks = getBlocksByClientId( blocksToUpdate );
-			const canToggleVisibility = blocks.every( ( blockToUpdate ) =>
-				hasBlockSupport( blockToUpdate.name, 'visibility', true )
+			const supportsBlockVisibility = blocks.every( ( _block ) =>
+				hasBlockSupport( _block.name, 'visibility', true )
 			);
-			if ( ! canToggleVisibility ) {
+
+			if ( ! supportsBlockVisibility ) {
 				return;
 			}
-			const hasHiddenBlock = blocks.some(
-				( blockToUpdate ) =>
-					blockToUpdate.attributes.metadata?.blockVisibility === false
-			);
-			const attributesByClientId = Object.fromEntries(
-				blocks.map( ( { clientId: mapClientId, attributes } ) => [
-					mapClientId,
-					{
-						metadata: cleanEmptyObject( {
-							...attributes?.metadata,
-							blockVisibility: hasHiddenBlock ? undefined : false,
-						} ),
-					},
-				] )
-			);
-			updateBlockAttributes( blocksToUpdate, attributesByClientId, {
-				uniqueByBlock: true,
-			} );
+
+			if ( window.__experimentalHideBlocksBasedOnScreenSize ) {
+				// Open the visibility breakpoints modal.
+				setVisibilityModalClientIds( blocksToUpdate );
+			} else {
+				const hasHiddenBlock = blocks.some(
+					( blockToUpdate ) =>
+						blockToUpdate.attributes.metadata?.blockVisibility ===
+						false
+				);
+				const attributesByClientId = Object.fromEntries(
+					blocks.map( ( { clientId: mapClientId, attributes } ) => [
+						mapClientId,
+						{
+							metadata: cleanEmptyObject( {
+								...attributes?.metadata,
+								blockVisibility: hasHiddenBlock
+									? undefined
+									: false,
+							} ),
+						},
+					] )
+				);
+				updateBlockAttributes( blocksToUpdate, attributesByClientId, {
+					uniqueByBlock: true,
+				} );
+			}
 		}
 	}
 
@@ -699,6 +715,12 @@ function ListViewBlock( {
 					) }
 				</TreeGridCell>
 			) }
+			{ visibilityModalClientIds && (
+				<BlockVisibilityModal
+					clientIds={ visibilityModalClientIds }
+					onClose={ () => setVisibilityModalClientIds( null ) }
+				/>
+			) }
 		</ListViewLeaf>
 	);
 }

package/src/components/rich-text/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
-import fastDeepEqual from 'fast-deep-equal/es6';
+import fastDeepEqual from 'fast-deep-equal/es6/index.js';
 
 /**
  * WordPress dependencies

package/src/components/url-input/index.js

@@ -452,6 +452,8 @@ class URLInput extends Component {
 			value,
 			required: true,
 			type: 'text',
+			name: inputId,
+			autoComplete: 'off',
 			onChange: disabled ? () => {} : this.onChange, // Disable onChange when disabled
 			onFocus: disabled ? () => {} : this.onFocus, // Disable onFocus when disabled
 			placeholder,

package/src/components/use-block-commands/index.js

@@ -223,9 +223,10 @@ const getQuickActionsCommands = () =>
 		} );
 		const canRemove = canRemoveBlocks( clientIds );
 
-		const canToggleBlockVisibility = blocks.every( ( { clientId } ) =>
-			hasBlockSupport( getBlockName( clientId ), 'visibility', true )
-		);
+		const canToggleBlockVisibility =
+			blocks.every( ( { clientId } ) =>
+				hasBlockSupport( getBlockName( clientId ), 'visibility', true )
+			) && ! window.__experimentalHideBlocksBasedOnScreenSize;
 
 		const commands = [];