Merge branch 'trunk' into add/term-name-block

Author: mikachan

docs/reference-guides/core-blocks.md

@@ -46,7 +46,7 @@ Displays an accordion panel. ([Source](https://github.com/WordPress/gutenberg/tr
 -	**Name:** core/accordion-panel
 -	**Category:** design
 -	**Parent:** core/accordion-item
--	**Supports:** allowedBlocks, color (background, gradients, text), contentRole, interactivity, shadow, spacing (blockGap, padding), typography (fontSize, lineHeight), ~~blockVisibility~~, ~~html~~
+-	**Supports:** allowedBlocks, color (background, gradients, text), contentRole, interactivity, layout (~~allowEditing~~), shadow, spacing (blockGap, padding), typography (fontSize, lineHeight), ~~blockVisibility~~, ~~html~~
 -	**Attributes:** isSelected, openByDefault, templateLock
 
 ## Archives
@@ -1008,7 +1008,7 @@ Contains the block elements used to render a taxonomy term, like the name, descr
 -	**Experimental:** true
 -	**Category:** theme
 -	**Ancestor:** core/terms-query
--	**Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), layout (allowEditing, allowSwitching, default), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), layout, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 
 ## Terms Query
 
@@ -1017,8 +1017,7 @@ An advanced block that allows displaying taxonomy terms based on different query
 -	**Name:** core/terms-query
 -	**Experimental:** true
 -	**Category:** theme
--	**Allowed Blocks:** core/term-template
--	**Supports:** align (full, wide), interactivity, ~~html~~
+-	**Supports:** align (full, wide), interactivity, layout, ~~html~~
 -	**Attributes:** tagName, termQuery
 
 ## Text Columns (deprecated)

packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js

@@ -334,9 +334,11 @@ export function BlockSettingsDropdown( {
 											</MenuItem>
 										</>
 									) }
-									<CommentIconSlotFill.Slot
-										fillProps={ { onClose } }
-									/>
+									{ count === 1 && (
+										<CommentIconSlotFill.Slot
+											fillProps={ { onClose } }
+										/>
+									) }
 								</MenuGroup>
 								{ canCopyStyles && ! isContentOnly && (
 									<MenuGroup>

packages/block-editor/src/components/block-tools/index.js

@@ -6,7 +6,11 @@ import { isTextField } from '@wordpress/dom';
 import { Popover } from '@wordpress/components';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { useRef } from '@wordpress/element';
-import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
+import {
+	switchToBlockType,
+	store as blocksStore,
+	hasBlockSupport,
+} from '@wordpress/blocks';
 import { speak } from '@wordpress/a11y';
 import { __, sprintf, _n } from '@wordpress/i18n';
 
@@ -24,6 +28,7 @@ import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
 import { useShowBlockTools } from './use-show-block-tools';
 import { unlock } from '../../lock-unlock';
+import { cleanEmptyObject } from '../../hooks/utils';
 import usePasteStyles from '../use-paste-styles';
 
 function selector( select ) {
@@ -71,6 +76,7 @@ export default function BlockTools( {
 		getSelectedBlockClientIds,
 		getBlockRootClientId,
 		isGroupable,
+		getBlockName,
 	} = useSelect( blockEditorStore );
 	const { getGroupingBlockName } = useSelect( blocksStore );
 	const { showEmptyBlockSideInserter, showBlockToolbarPopover } =
@@ -87,6 +93,7 @@ export default function BlockTools( {
 		moveBlocksUp,
 		moveBlocksDown,
 		expandBlock,
+		updateBlockAttributes,
 	} = unlock( useDispatch( blockEditorStore ) );
 
 	function onKeyDown( event ) {
@@ -200,6 +207,44 @@ export default function BlockTools( {
 				replaceBlocks( clientIds, newBlocks );
 				speak( __( 'Selected blocks are grouped.' ) );
 			}
+		} else if (
+			isMatch( 'core/block-editor/toggle-block-visibility', event )
+		) {
+			const clientIds = getSelectedBlockClientIds();
+			if ( clientIds.length ) {
+				event.preventDefault();
+				const blocks = getBlocksByClientId( clientIds );
+				const canToggleBlockVisibility = blocks.every( ( block ) =>
+					hasBlockSupport(
+						getBlockName( block.clientId ),
+						'blockVisibility',
+						true
+					)
+				);
+				if ( ! canToggleBlockVisibility ) {
+					return;
+				}
+				const hasHiddenBlock = blocks.some(
+					( block ) =>
+						block.attributes.metadata?.blockVisibility === false
+				);
+				const attributesByClientId = Object.fromEntries(
+					blocks.map( ( { clientId: mapClientId, attributes } ) => [
+						mapClientId,
+						{
+							metadata: cleanEmptyObject( {
+								...attributes?.metadata,
+								blockVisibility: hasHiddenBlock
+									? undefined
+									: false,
+							} ),
+						},
+					] )
+				);
+				updateBlockAttributes( clientIds, attributesByClientId, {
+					uniqueByBlock: true,
+				} );
+			}
 		}
 	}
 	const blockToolbarRef = usePopoverScroll( __unstableContentRef );

packages/block-editor/src/components/keyboard-shortcuts/index.js

@@ -197,6 +197,16 @@ function KeyboardShortcutsRegister() {
 				character: 'g',
 			},
 		} );
+
+		registerShortcut( {
+			name: 'core/block-editor/toggle-block-visibility',
+			category: 'block',
+			description: __( 'Show or hide the selected block(s).' ),
+			keyCombination: {
+				modifier: 'primaryShift',
+				character: 'h',
+			},
+		} );
 	}, [ registerShortcut ] );
 
 	return null;

packages/block-editor/src/components/list-view/block.js

@@ -53,6 +53,7 @@ import { useBlockLock } from '../block-lock';
 import AriaReferencedText from './aria-referenced-text';
 import { unlock } from '../../lock-unlock';
 import usePasteStyles from '../use-paste-styles';
+import { cleanEmptyObject } from '../../hooks/utils';
 
 function ListViewBlock( {
 	block: { clientId },
@@ -96,6 +97,7 @@ function ListViewBlock( {
 		insertAfterBlock,
 		insertBeforeBlock,
 		setOpenedBlockSettingsMenu,
+		updateBlockAttributes,
 	} = unlock( useDispatch( blockEditorStore ) );
 	const debouncedToggleBlockHighlight = useDebounce(
 		toggleBlockHighlight,
@@ -367,6 +369,36 @@ function ListViewBlock( {
 				setOpenedBlockSettingsMenu( undefined );
 				updateFocusAndSelection( newlySelectedBlocks[ 0 ], false );
 			}
+		} else if (
+			isMatch( 'core/block-editor/toggle-block-visibility', event )
+		) {
+			event.preventDefault();
+			const { blocksToUpdate } = getBlocksToUpdate();
+			const blocks = getBlocksByClientId( blocksToUpdate );
+			const canToggleBlockVisibility = blocks.every( ( blockToUpdate ) =>
+				hasBlockSupport( blockToUpdate.name, 'blockVisibility', true )
+			);
+			if ( ! canToggleBlockVisibility ) {
+				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,
+			} );
 		}
 	}
 

packages/block-library/src/accordion-panel/block.json

@@ -47,6 +47,9 @@
 			}
 		},
 		"shadow": true,
+		"layout": {
+			"allowEditing": false
+		},
 		"blockVisibility": false,
 		"contentRole": true,
 		"allowedBlocks": true

packages/block-library/src/style.scss

@@ -73,7 +73,6 @@
 @import "./term-description/style.scss";
 @import "./term-name/style.scss";
 @import "./term-template/style.scss";
-@import "./terms-query/style.scss";
 @import "./text-columns/style.scss";
 @import "./verse/style.scss";
 @import "./video/style.scss";

packages/block-library/src/term-template/block.json

@@ -13,13 +13,7 @@
 		"reusable": false,
 		"html": false,
 		"align": [ "wide", "full" ],
-		"layout": {
-			"allowSwitching": true,
-			"allowEditing": true,
-			"default": {
-				"type": "flex"
-			}
-		},
+		"layout": true,
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -64,5 +58,5 @@
 		}
 	},
 	"style": "wp-block-term-template",
-	"variations": "file:./variations.js"
+	"editorStyle": "wp-block-term-template-editor"
 }