@wordpress/patterns 1.6.0 → 1.8.0

package/src/components/patterns-manage-button.js

@@ -16,41 +16,40 @@ import { store as patternsStore } from '../store';
 import { unlock } from '../lock-unlock';
 
 function PatternsManageButton( { clientId } ) {
-	const { canRemove, isVisible, innerBlockCount, managePatternsUrl } =
-		useSelect(
-			( select ) => {
-				const { getBlock, canRemoveBlock, getBlockCount, getSettings } =
-					select( blockEditorStore );
-				const { canUser } = select( coreStore );
-				const reusableBlock = getBlock( clientId );
-				const isBlockTheme = getSettings().__unstableIsBlockBasedTheme;
+	const { canRemove, isVisible, managePatternsUrl } = useSelect(
+		( select ) => {
+			const { getBlock, canRemoveBlock, getBlockCount, getSettings } =
+				select( blockEditorStore );
+			const { canUser } = select( coreStore );
+			const reusableBlock = getBlock( clientId );
+			const isBlockTheme = getSettings().__unstableIsBlockBasedTheme;
 
-				return {
-					canRemove: canRemoveBlock( clientId ),
-					isVisible:
-						!! reusableBlock &&
-						isReusableBlock( reusableBlock ) &&
-						!! canUser(
-							'update',
-							'blocks',
-							reusableBlock.attributes.ref
-						),
-					innerBlockCount: getBlockCount( clientId ),
-					// The site editor and templates both check whether the user
-					// has edit_theme_options capabilities. We can leverage that here
-					// and omit the manage patterns link if the user can't access it.
-					managePatternsUrl:
-						isBlockTheme && canUser( 'read', 'templates' )
-							? addQueryArgs( 'site-editor.php', {
-									path: '/patterns',
-							  } )
-							: addQueryArgs( 'edit.php', {
-									post_type: 'wp_block',
-							  } ),
-				};
-			},
-			[ clientId ]
-		);
+			return {
+				canRemove: canRemoveBlock( clientId ),
+				isVisible:
+					!! reusableBlock &&
+					isReusableBlock( reusableBlock ) &&
+					!! canUser(
+						'update',
+						'blocks',
+						reusableBlock.attributes.ref
+					),
+				innerBlockCount: getBlockCount( clientId ),
+				// The site editor and templates both check whether the user
+				// has edit_theme_options capabilities. We can leverage that here
+				// and omit the manage patterns link if the user can't access it.
+				managePatternsUrl:
+					isBlockTheme && canUser( 'read', 'templates' )
+						? addQueryArgs( 'site-editor.php', {
+								path: '/patterns',
+						  } )
+						: addQueryArgs( 'edit.php', {
+								post_type: 'wp_block',
+						  } ),
+			};
+		},
+		[ clientId ]
+	);
 
 	// Ignore reason: false positive of the lint rule.
 	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
@@ -64,18 +63,16 @@ function PatternsManageButton( { clientId } ) {
 
 	return (
 		<>
-			<MenuItem href={ managePatternsUrl }>
-				{ __( 'Manage patterns' ) }
-			</MenuItem>
 			{ canRemove && (
 				<MenuItem
 					onClick={ () => convertSyncedPatternToStatic( clientId ) }
 				>
-					{ innerBlockCount > 1
-						? __( 'Detach patterns' )
-						: __( 'Detach pattern' ) }
+					{ __( 'Detach' ) }
 				</MenuItem>
 			) }
+			<MenuItem href={ managePatternsUrl }>
+				{ __( 'Manage patterns' ) }
+			</MenuItem>
 		</>
 	);
 }

package/src/components/style.scss

@@ -7,32 +7,27 @@
 	}
 
 	.patterns-menu-items__convert-modal-categories {
-		width: 100%;
 		position: relative;
-		min-height: 40px;
 	}
-	.components-form-token-field__suggestions-list {
+
+	.components-form-token-field__suggestions-list:not(:empty) {
 		position: absolute;
+		border: $border-width solid var(--wp-admin-theme-color);
+		border-bottom-left-radius: $radius-block-ui;
+		border-bottom-right-radius: $radius-block-ui;
+		box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
 		box-sizing: border-box;
 		z-index: 1;
 		background-color: $white;
-		// Account for the border width of the token field.
-		width: calc(100% + 2px);
+		width: calc(100% + 2px); // Account for the border width of the token field.
 		left: -1px;
 		min-width: initial;
-		border: 1px solid var(--wp-admin-theme-color);
-		border-top: none;
-		box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
-		border-bottom-left-radius: 2px;
-		border-bottom-right-radius: 2px;
+		max-height: $grid-unit-60 * 2; // Adjust to not cover the save button, showing three items.
 	}
 }
 
 .patterns-create-modal__name-input input[type="text"] {
-	// Match the minimal height of the category selector.
-	min-height: 40px;
-	// Override the default 1px margin-x.
-	margin: 0;
+	margin: 0; // Override the default 1px margin-x.
 }
 
 .patterns-rename-pattern-category-modal__validation-message {

package/src/constants.js

@@ -5,11 +5,10 @@ export const PATTERN_TYPES = {
 
 export const PATTERN_DEFAULT_CATEGORY = 'all-patterns';
 export const PATTERN_USER_CATEGORY = 'my-patterns';
-export const PATTERN_CORE_SOURCES = [
+export const EXCLUDED_PATTERN_SOURCES = [
 	'core',
 	'pattern-directory/core',
 	'pattern-directory/featured',
-	'pattern-directory/theme',
 ];
 export const PATTERN_SYNC_TYPES = {
 	full: 'fully',

package/src/private-apis.js

@@ -11,7 +11,7 @@ import {
 	PATTERN_TYPES,
 	PATTERN_DEFAULT_CATEGORY,
 	PATTERN_USER_CATEGORY,
-	PATTERN_CORE_SOURCES,
+	EXCLUDED_PATTERN_SOURCES,
 	PATTERN_SYNC_TYPES,
 } from './constants';
 
@@ -25,6 +25,6 @@ lock( privateApis, {
 	PATTERN_TYPES,
 	PATTERN_DEFAULT_CATEGORY,
 	PATTERN_USER_CATEGORY,
-	PATTERN_CORE_SOURCES,
+	EXCLUDED_PATTERN_SOURCES,
 	PATTERN_SYNC_TYPES,
 } );