diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php index fc3131e9a20510..4744f7571b6dcd 100644 --- 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 index 90df12abba3cf3..d672fdb7356c38 100644 --- 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/packages/components/src/higher-order/with-filters/index.js b/packages/components/src/higher-order/with-filters/index.tsx similarity index 69% rename from packages/components/src/higher-order/with-filters/index.js rename to packages/components/src/higher-order/with-filters/index.tsx index 9a65c7a5fff9d0..eddd0829f3716e 100644 --- a/packages/components/src/higher-order/with-filters/index.js +++ b/packages/components/src/higher-order/with-filters/index.tsx @@ -13,11 +13,37 @@ 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 } ) =>

{ title }

; + * + * const ComponentToAppend = () =>
Appended component
; + * + * function withComponentAppended( FilteredComponent ) { + * return ( props ) => ( + * <> + * + * + * + * ); + * } + * + * 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; @@ -25,10 +51,8 @@ export default function withFilters( 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 @@ -36,13 +60,18 @@ export default function withFilters( hookName ) { */ 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/packages/components/src/higher-order/with-filters/test/__snapshots__/index.js.snap b/packages/components/src/higher-order/with-filters/test/__snapshots__/index.tsx.snap similarity index 100% rename from packages/components/src/higher-order/with-filters/test/__snapshots__/index.js.snap rename to packages/components/src/higher-order/with-filters/test/__snapshots__/index.tsx.snap diff --git a/packages/components/src/higher-order/with-filters/test/index.js b/packages/components/src/higher-order/with-filters/test/index.tsx similarity index 94% rename from packages/components/src/higher-order/with-filters/test/index.js rename to packages/components/src/higher-order/with-filters/test/index.tsx index b7aacb1584079c..0f84054cee7376 100644 --- a/packages/components/src/higher-order/with-filters/test/index.js +++ b/packages/components/src/higher-order/with-filters/test/index.tsx @@ -18,7 +18,11 @@ describe( 'withFilters', () => { const MyComponent = () =>
My component
; 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 index 953bf2b67c3c9a..8fdf16e5df7338 100644 --- 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"