prep build 03/10

bph · Mar 10, 2023 · 8e602f9 · 8e602f9
2 parents 37d1a06 + 4b283a4
commit 8e602f9
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 87 deletions.
diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
@@ -5,76 +5,6 @@
  * @package WordPress
  */
 
-/**
- * Build an array with CSS classes and inline styles defining the colors
- * which will be applied to the navigation markup in the front-end.
- *
- * @param  array $context     Navigation block context.
- * @param  array $attributes  Block attributes.
- * @param  bool  $is_sub_menu Whether the link is part of a sub-menu.
- * @return array Colors CSS classes and inline styles.
- */
-function block_core_navigation_link_build_css_colors( $context, $attributes, $is_sub_menu = false ) {
-	$colors = array(
-		'css_classes'   => array(),
-		'inline_styles' => '',
-	);
-
-	// Text color.
-	$named_text_color  = null;
-	$custom_text_color = null;
-
-	if ( $is_sub_menu && array_key_exists( 'customOverlayTextColor', $context ) ) {
-		$custom_text_color = $context['customOverlayTextColor'];
-	} elseif ( $is_sub_menu && array_key_exists( 'overlayTextColor', $context ) ) {
-		$named_text_color = $context['overlayTextColor'];
-	} elseif ( array_key_exists( 'customTextColor', $context ) ) {
-		$custom_text_color = $context['customTextColor'];
-	} elseif ( array_key_exists( 'textColor', $context ) ) {
-		$named_text_color = $context['textColor'];
-	} elseif ( isset( $context['style']['color']['text'] ) ) {
-		$custom_text_color = $context['style']['color']['text'];
-	}
-
-	// If has text color.
-	if ( ! is_null( $named_text_color ) ) {
-		// Add the color class.
-		array_push( $colors['css_classes'], 'has-text-color', sprintf( 'has-%s-color', $named_text_color ) );
-	} elseif ( ! is_null( $custom_text_color ) ) {
-		// Add the custom color inline style.
-		$colors['css_classes'][]  = 'has-text-color';
-		$colors['inline_styles'] .= sprintf( 'color: %s;', $custom_text_color );
-	}
-
-	// Background color.
-	$named_background_color  = null;
-	$custom_background_color = null;
-
-	if ( $is_sub_menu && array_key_exists( 'customOverlayBackgroundColor', $context ) ) {
-		$custom_background_color = $context['customOverlayBackgroundColor'];
-	} elseif ( $is_sub_menu && array_key_exists( 'overlayBackgroundColor', $context ) ) {
-		$named_background_color = $context['overlayBackgroundColor'];
-	} elseif ( array_key_exists( 'customBackgroundColor', $context ) ) {
-		$custom_background_color = $context['customBackgroundColor'];
-	} elseif ( array_key_exists( 'backgroundColor', $context ) ) {
-		$named_background_color = $context['backgroundColor'];
-	} elseif ( isset( $context['style']['color']['background'] ) ) {
-		$custom_background_color = $context['style']['color']['background'];
-	}
-
-	// If has background color.
-	if ( ! is_null( $named_background_color ) ) {
-		// Add the background-color class.
-		array_push( $colors['css_classes'], 'has-background', sprintf( 'has-%s-background-color', $named_background_color ) );
-	} elseif ( ! is_null( $custom_background_color ) ) {
-		// Add the custom background-color inline style.
-		$colors['css_classes'][]  = 'has-background';
-		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $custom_background_color );
-	}
-
-	return $colors;
-}
-
 /**
  * Build an array with CSS classes and inline styles defining the font sizes
  * which will be applied to the navigation markup in the front-end.
@@ -173,13 +103,11 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$colors          = block_core_navigation_link_build_css_colors( $block->context, $attributes );
 	$font_sizes      = block_core_navigation_link_build_css_font_sizes( $block->context );
 	$classes         = array_merge(
-		$colors['css_classes'],
 		$font_sizes['css_classes']
 	);
-	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
+	$style_attribute = ( $font_sizes['inline_styles'] );
 
 	$css_classes = trim( implode( ' ', $classes ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -17,6 +17,7 @@
 -   `SelectControl`: improve prop types for single vs multiple selection ([#47390](https://github.com/WordPress/gutenberg/pull/47390)).
 -   `Navigation`: Convert to TypeScript ([#48742](https://github.com/WordPress/gutenberg/pull/48742)).
 -   `PanelBody`: Convert to TypeScript ([#47702](https://github.com/WordPress/gutenberg/pull/47702)).
+-   `withFilters` HOC: Convert to TypeScript ([#48721](https://github.com/WordPress/gutenberg/pull/48721)).
 -   `withFallbackStyles` HOC: Convert to TypeScript ([#48720](https://github.com/WordPress/gutenberg/pull/48720)).
 -   `navigateRegions` HOC: Convert to TypeScript ([#48632](https://github.com/WordPress/gutenberg/pull/48632)).
 -   `withSpokenMessages`: HOC: Convert to TypeScript ([#48163](https://github.com/WordPress/gutenberg/pull/48163)).

diff --git a/...ts/src/higher-order/with-filters/index.js → ...s/src/higher-order/with-filters/index.tsx b/...ts/src/higher-order/with-filters/index.js → ...s/src/higher-order/with-filters/index.tsx
@@ -13,36 +13,65 @@ const ANIMATION_FRAME_PERIOD = 16;
  * to be mounted. When a filter is added or removed that matches the hook name,
  * the wrapped component re-renders.
  *
- * @param {string} hookName Hook name exposed to be used by filters.
+ * @param hookName Hook name exposed to be used by filters.
  *
- * @return {Function} Higher-order component factory.
+ * @return Higher-order component factory.
+ *
+ * ```jsx
+ * import { withFilters } from '@wordpress/components';
+ * import { addFilter } from '@wordpress/hooks';
+ *
+ * const MyComponent = ( { title } ) => <h1>{ title }</h1>;
+ *
+ * const ComponentToAppend = () => <div>Appended component</div>;
+ *
+ * function withComponentAppended( FilteredComponent ) {
+ * 	return ( props ) => (
+ * 		<>
+ * 			<FilteredComponent { ...props } />
+ * 			<ComponentToAppend />
+ * 		</>
+ * 	);
+ * }
+ *
+ * addFilter(
+ * 	'MyHookName',
+ * 	'my-plugin/with-component-appended',
+ * 	withComponentAppended
+ * );
+ *
+ * const MyComponentWithFilters = withFilters( 'MyHookName' )( MyComponent );
+ * ```
  */
-export default function withFilters( hookName ) {
+export default function withFilters( hookName: string ) {
 	return createHigherOrderComponent( ( OriginalComponent ) => {
 		const namespace = 'core/with-filters/' + hookName;
 
 		/**
 		 * The component definition with current filters applied. Each instance
 		 * reuse this shared reference as an optimization to avoid excessive
 		 * calls to `applyFilters` when many instances exist.
-		 *
-		 * @type {?Component}
 		 */
-		let FilteredComponent;
+		let FilteredComponent: React.ComponentType;
 
 		/**
 		 * Initializes the FilteredComponent variable once, if not already
 		 * assigned. Subsequent calls are effectively a noop.
 		 */
 		function ensureFilteredComponent() {
 			if ( FilteredComponent === undefined ) {
-				FilteredComponent = applyFilters( hookName, OriginalComponent );
+				FilteredComponent = applyFilters(
+					hookName,
+					OriginalComponent
+				) as React.ComponentType;
 			}
 		}
 
 		class FilteredComponentRenderer extends Component {
-			constructor() {
-				super( ...arguments );
+			static instances: FilteredComponentRenderer[];
+
+			constructor( props: { [ key: string ]: any } ) {
+				super( props );
 
 				ensureFilteredComponent();
 			}
@@ -86,7 +115,10 @@ export default function withFilters( hookName ) {
 		const throttledForceUpdate = debounce( () => {
 			// Recreate the filtered component, only after delay so that it's
 			// computed once, even if many filters added.
-			FilteredComponent = applyFilters( hookName, OriginalComponent );
+			FilteredComponent = applyFilters(
+				hookName,
+				OriginalComponent
+			) as React.ComponentType;
 
 			// Force each instance to render.
 			FilteredComponentRenderer.instances.forEach( ( instance ) => {
@@ -99,9 +131,9 @@ export default function withFilters( hookName ) {
 		 * mounted instance should re-render with the new filters having been
 		 * applied to the original component.
 		 *
-		 * @param {string} updatedHookName Name of the hook that was updated.
+		 * @param updatedHookName Name of the hook that was updated.
 		 */
-		function onHooksUpdated( updatedHookName ) {
+		function onHooksUpdated( updatedHookName: string ) {
 			if ( updatedHookName === hookName ) {
 				throttledForceUpdate();
 			}

diff --git a/...-filters/test/__snapshots__/index.js.snap → ...filters/test/__snapshots__/index.tsx.snap b/...-filters/test/__snapshots__/index.js.snap → ...filters/test/__snapshots__/index.tsx.snap
diff --git a/...c/higher-order/with-filters/test/index.js → .../higher-order/with-filters/test/index.tsx b/...c/higher-order/with-filters/test/index.js → .../higher-order/with-filters/test/index.tsx
@@ -18,7 +18,11 @@ describe( 'withFilters', () => {
 	const MyComponent = () => <div>My component</div>;
 
 	afterEach( () => {
-		removeAllFilters( hookName );
+		removeAllFilters( hookName, 'test/enhanced-component-override' );
+		removeAllFilters( hookName, 'test/enhanced-component-compose' );
+		removeAllFilters( hookName, 'test/enhanced-component-spy' );
+		removeAllFilters( hookName, 'test/enhanced-component-spy-1' );
+		removeAllFilters( hookName, 'test/enhanced-component-spy-2' );
 	} );
 
 	it( 'should display original component when no filters applied', () => {

diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
@@ -48,7 +48,6 @@
 		"src/custom-gradient-picker",
 		"src/duotone-picker",
 		"src/gradient-picker",
-		"src/higher-order/with-filters",
 		"src/higher-order/with-focus-return",
 		"src/higher-order/with-notices",
 		"src/palette-edit"