Merge branch 'develop' of https://github.com/10up/block-components into develop

fabiankaegy · fabiankaegy · commit 1ed5078083d7 · 2025-06-03T16:49:34.000+02:00
diff --git a/README.md b/README.md
@@ -15,6 +15,30 @@ A collection of components built to be used in the block editor. These component
 2. Within your block editor code, import the relevant component(s) e.g. `import { ContentPicker } from '@10up/block-components';`
 3. We highly recommend you use [10up-toolkit](https://github.com/10up/10up-toolkit) to build your block files as it handles dependency extraction for you.
 
+## Importing individual modules
+
+As of [v1.20.6](https://github.com/10up/block-components/releases/tag/v1.20.6), you can now import individual modules directly to reduce bundle size.
+
+Instead of importing from the base entry point:
+```jsx
+import { ContentPicker } from '@10up/block-components';
+import { useAllTerms } from '@10up/block-components';
+import { registerBlockExtension } from '@10up/block-components';
+import { iconStore } from '@10up/block-components';
+```
+
+You can import `components`, `hooks`, `apis`, and `stores` individually from their specific paths:
+```jsx
+import { ContentPicker } from '@10up/block-components/components/content-picker';
+import { useAllTerms } from '@10up/block-components/hooks/use-all-terms';
+import { registerBlockExtension } from '@10up/block-components/api/register-block-extension';
+import { iconStore } from '@10up/block-components/stores/icons';
+```
+
+This approach offers improved tree-shaking and results in smaller bundles, especially when only using a subset of the library.
+
+The original import paths are still fully supported and will continue to work as expected.
+
 ## APIs
 
 - [registerBlockExtension](./api/register-block-extension/)
diff --git a/api/index.ts b/api/index.ts
@@ -2,5 +2,6 @@ export {
 	registerBlockExtension,
 	// continue to export misspelled version of api for backwards compatibility
 	registerBlockExtension as registerBlockExtention,
+	unregisterBlockExtension,
 } from './register-block-extension';
 export { registerIcons } from './register-icons';
diff --git a/api/register-block-extension/index.tsx b/api/register-block-extension/index.tsx
@@ -1,4 +1,4 @@
-import { addFilter } from '@wordpress/hooks';
+import { addFilter, removeFilter } from '@wordpress/hooks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import clsx from 'clsx';
 import { FC } from 'react';
@@ -178,4 +178,46 @@ function registerBlockExtension(
 	);
 }
 
-export { registerBlockExtension };
+/**
+ * Unregister a block extension that was previously registered using registerBlockExtension.
+ *
+ * @param {string|string[]} blockName - The name of the block or an array of block names to unregister the extension from.
+ * @param {string} extensionName - The name of the extension to unregister.
+ */
+function unregisterBlockExtension(blockName: string | string[], extensionName: string): void {
+	if (!blockName || !extensionName) {
+		return;
+	}
+
+	const isMultiBlock = Array.isArray(blockName);
+
+	if (blockName === '*') {
+		blockName = 'all'; // eslint-disable-line no-param-reassign
+	}
+
+	// @ts-expect-error isMultiBlock verifies if this is an Array and supports join or not.
+	const blockNamespace = isMultiBlock ? blockName.join('-') : blockName;
+
+	// Remove all the filters that were added by registerBlockExtension
+	removeFilter(
+		'blocks.registerBlockType',
+		`namespace/${blockNamespace}/${extensionName}/addAttributesToBlock`,
+	);
+
+	removeFilter(
+		'editor.BlockEdit',
+		`namespace/${blockNamespace}/${extensionName}/addSettingsToBlock`,
+	);
+
+	removeFilter(
+		'editor.BlockListBlock',
+		`namespace/${blockNamespace}/${extensionName}/addAdditionalPropertiesInEditor`,
+	);
+
+	removeFilter(
+		'blocks.getSaveContent.extraProps',
+		`namespace/${blockNamespace}/${extensionName}/addAdditionalPropertiesToSavedMarkup`,
+	);
+}
+
+export { registerBlockExtension, unregisterBlockExtension };
diff --git a/api/register-block-extension/readme.md b/api/register-block-extension/readme.md
@@ -35,7 +35,7 @@ const additionalAttributes = {
  * @param {object} props block props
  * @returns {JSX}
  */
-function BlockEdit(props) {...}
+function BlockEdit(props) {...}
 
 /**
  * generateClassNames
@@ -46,7 +46,7 @@ function BlockEdit(props) {...}
  * @param {object} attributes block attributes
  * @returns {string}
  */
-function generateClassNames(attributes) {...}
+function generateClassNames(attributes) {...}
 
 /**
  * generateInlineStyles
@@ -57,7 +57,7 @@ function generateClassNames(attributes) {...}
  * @param {object} attributes block attributes
  * @returns {string}
  */
-function generateInlineStyles(attributes) {...}
+function generateInlineStyles(attributes) {...}
 
 registerBlockExtension(
  'core/group', // also supports adding multiple blocks as an array
@@ -83,3 +83,38 @@ registerBlockExtension(
 | options.inlineStyleGenerator | `function` | Function that gets passed the attributes of the block to generate an inline style object |
 | options.Edit               | `function` | BlockEdit component like in `registerBlockType` only without the actual block. So only using slots like the `InspectorControls` is advised. |
 | options.order               | `string` | The order in which the extension should be called in relation to the original BlockEdit component. Can be `before` or `after`. Defaults to `after` |
+
+---
+
+# unregisterBlockExtension
+
+The `unregisterBlockExtension` API allows you to remove block extensions that were previously registered using `registerBlockExtension`. This is particularly useful in child themes or plugins where you need to override or remove functionality provided by a parent theme or another plugin.
+
+## Usage
+
+```js
+import { unregisterBlockExtension } from '@10up/block-components';
+
+// Unregister a previously registered block extension
+unregisterBlockExtension('core/group', 'background-patterns');
+
+// Works with multiple blocks too (same as registerBlockExtension)
+unregisterBlockExtension(['core/group', 'core/columns'], 'background-patterns');
+
+// Works with the wildcard selector
+unregisterBlockExtension('*', 'background-patterns');
+```
+
+## Parameters
+
+| Name          | Type             | Description                                                          |
+|---------------|------------------|----------------------------------------------------------------------|
+| blockName     | `string|string[]`| Name of the block or array with multiple block names to unregister the extension from. Also supports `'*'` or `'all'` to target all blocks |
+| extensionName | `string`         | Unique identifier of the extension to unregister                     |
+
+## Notes
+
+- The function safely handles cases where the extension was never registered or has already been unregistered
+- Both parameters are required - the function will return early if either is missing
+- The `blockName` parameter must match exactly what was used when registering the extension
+- For multi-block registrations, you must use the same array of block names or unregister each block individually
diff --git a/components/content-picker/PickedItem.tsx b/components/content-picker/PickedItem.tsx
@@ -21,9 +21,14 @@ export type PickedItemType = {
 	uuid: string;
 	title: string;
 	url: string;
+	status?: string; // Optional status field for checking trashed posts
 };
 
-const PickedItemContainer = styled.div<{ isDragging?: boolean; isOrderable?: boolean }>`
+const PickedItemContainer = styled.div<{
+	isDragging?: boolean;
+	isOrderable?: boolean;
+	isDeleted?: boolean;
+}>`
 	box-sizing: border-box;
 	position: relative;
 	display: flex;
@@ -33,9 +38,18 @@ const PickedItemContainer = styled.div<{ isDragging?: boolean; isOrderable?: boo
 	min-height: 36px;
 	max-width: 100%;
 	width: 100%;
-	color: #1e1e1e;
-	opacity: ${({ isDragging }) => (isDragging ? 0.5 : 1)};
-	background: ${({ isDragging }) => (isDragging ? '#f0f0f0' : 'transparent')};
+	color: ${({ isDeleted }) => (isDeleted ? '#cc1818' : '#1e1e1e')};
+	opacity: ${({ isDragging, isDeleted }) => {
+		if (isDragging) return 0.5;
+		if (isDeleted) return 0.7;
+		return 1;
+	}};
+	background: ${({ isDragging, isDeleted }) => {
+		if (isDragging) return '#f0f0f0';
+		if (isDeleted) return '#fef7f7';
+		return 'transparent';
+	}};
+	border: ${({ isDeleted }) => (isDeleted ? '1px solid #f0b7b7' : 'none')};
 	border-radius: 2px;
 	transition: background-color 0.1s linear;
 	cursor: ${({ isDragging, isOrderable }) => {
@@ -45,7 +59,7 @@ const PickedItemContainer = styled.div<{ isDragging?: boolean; isOrderable?: boo
 	touch-action: none;
 
 	&:hover {
-		background: #f0f0f0;
+		background: ${({ isDeleted }) => (isDeleted ? '#fef0f0' : '#f0f0f0')};
 
 		.move-up-button,
 		.move-down-button,
@@ -100,11 +114,12 @@ const ItemContent = styled.div`
 	transition: padding-left 0.1s linear;
 `;
 
-const ItemTitle = styled.span`
+const ItemTitle = styled.span<{ isDeleted?: boolean }>`
 	font-size: 0.875rem;
 	line-height: 1.4;
 	font-weight: 500;
-	color: #1e1e1e;
+	color: ${({ isDeleted }) => (isDeleted ? '#cc1818' : '#1e1e1e')};
+	font-style: ${({ isDeleted }) => (isDeleted ? 'italic' : 'normal')};
 `;
 
 const ItemURL = styled.span`
@@ -157,6 +172,7 @@ interface PickedItemProps {
 	onMoveUp?: () => void;
 	onMoveDown?: () => void;
 	PickedItemPreviewComponent?: React.ComponentType<{ item: PickedItemType }>;
+	isDeleted?: boolean;
 }
 
 /**
@@ -165,18 +181,24 @@ interface PickedItemProps {
  * @component
  * @param {object} props - The component props.
  * @param {PickedItemType} props.item - The picked item to display.
+ * @param {boolean} props.isDeleted - Whether the item has been deleted.
  * @returns {*} React JSX
  */
-const PickedItemPreview: React.FC<{ item: PickedItemType }> = ({ item }) => {
+const PickedItemPreview: React.FC<{ item: PickedItemType; isDeleted?: boolean }> = ({
+	item,
+	isDeleted = false,
+}) => {
 	const decodedTitle = decodeEntities(item.title);
 	return (
 		<>
-			<ItemTitle>
+			<ItemTitle isDeleted={isDeleted}>
 				<Truncate title={decodedTitle} aria-label={decodedTitle}>
 					{decodedTitle}
 				</Truncate>
 			</ItemTitle>
-			{item.url && <ItemURL>{filterURLForDisplay(safeDecodeURI(item.url)) || ''}</ItemURL>}
+			{item.url && !isDeleted && (
+				<ItemURL>{filterURLForDisplay(safeDecodeURI(item.url)) || ''}</ItemURL>
+			)}
 		</>
 	);
 };
@@ -198,6 +220,7 @@ const PickedItem: React.FC<PickedItemProps> = ({
 	onMoveUp,
 	onMoveDown,
 	PickedItemPreviewComponent,
+	isDeleted = false,
 }) => {
 	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
 		id,
@@ -220,6 +243,7 @@ const PickedItem: React.FC<PickedItemProps> = ({
 				{...listeners}
 				isDragging={isDragging}
 				isOrderable={isOrderable}
+				isDeleted={isDeleted}
 			>
 				{isOrderable && (
 					<DragHandleWrapper isDragging={isDragging}>
@@ -230,7 +254,7 @@ const PickedItem: React.FC<PickedItemProps> = ({
 					{PickedItemPreviewComponent ? (
 						<PickedItemPreviewComponent item={item} />
 					) : (
-						<PickedItemPreview item={item} />
+						<PickedItemPreview item={item} isDeleted={isDeleted} />
 					)}
 				</ItemContent>
 				<ButtonContainer>
diff --git a/components/content-picker/SortableList.tsx b/components/content-picker/SortableList.tsx
@@ -104,6 +104,7 @@ const SortableList: React.FC<SortableListProps> = ({
 					fields.push('title');
 					fields.push('url');
 					fields.push('subtype');
+					fields.push('status'); // Include status to check for trashed posts
 				} else {
 					fields.push('name');
 					fields.push('taxonomy');
@@ -126,6 +127,7 @@ const SortableList: React.FC<SortableListProps> = ({
 							url: post.link,
 							id: post.id,
 							type: post.type,
+							status: post.status, // Include status for trashed post detection
 						};
 					} else if (mode === 'user') {
 						const user = result as User;
@@ -206,7 +208,73 @@ const SortableList: React.FC<SortableListProps> = ({
 	const renderItems = (items: Array<PickedItemType>) => {
 		return items.map((post, index) => {
 			const preparedItem = preparedItems[post.uuid];
-			if (!preparedItem) return null;
+
+			// If the item doesn't exist (was deleted) or is trashed, show a placeholder with remove option
+			if (!preparedItem) {
+				return (
+					<PickedItem
+						isOrderable={hasMultiplePosts && isOrderable}
+						key={post.uuid}
+						handleItemDelete={handleItemDelete}
+						item={{
+							id: post.id,
+							type: post.type,
+							uuid: post.uuid,
+							title: __('(Item no longer exists)', '10up-block-components'),
+							url: '',
+						}}
+						mode={mode}
+						id={post.uuid}
+						positionInSet={index + 1}
+						setSize={items.length}
+						onMoveUp={() => {
+							if (index === 0) return;
+							setPosts(arrayMove(posts, index, index - 1));
+						}}
+						onMoveDown={() => {
+							if (index === items.length - 1) return;
+							setPosts(arrayMove(posts, index, index + 1));
+						}}
+						PickedItemPreviewComponent={PickedItemPreviewComponent}
+						isDeleted
+					/>
+				);
+			}
+
+			// Check if the post is trashed (only for post mode)
+			const isTrashOrDeleted =
+				mode === 'post' && preparedItem && preparedItem.status === 'trash';
+
+			if (isTrashOrDeleted) {
+				return (
+					<PickedItem
+						isOrderable={hasMultiplePosts && isOrderable}
+						key={post.uuid}
+						handleItemDelete={handleItemDelete}
+						item={{
+							id: preparedItem.id,
+							type: preparedItem.type,
+							uuid: preparedItem.uuid,
+							title: __('(Item in trash)', '10up-block-components'),
+							url: preparedItem.url,
+						}}
+						mode={mode}
+						id={post.uuid}
+						positionInSet={index + 1}
+						setSize={items.length}
+						onMoveUp={() => {
+							if (index === 0) return;
+							setPosts(arrayMove(posts, index, index - 1));
+						}}
+						onMoveDown={() => {
+							if (index === items.length - 1) return;
+							setPosts(arrayMove(posts, index, index + 1));
+						}}
+						PickedItemPreviewComponent={PickedItemPreviewComponent}
+						isDeleted
+					/>
+				);
+			}
 
 			const handleMoveUp = () => {
 				if (index === 0) return;
diff --git a/components/content-picker/index.tsx b/components/content-picker/index.tsx
diff --git a/package.json b/package.json
diff --git a/webpack.config.js b/webpack.config.js
