diff --git a/projects/plugins/boost/app/assets/src/js/features/critical-css/lib/stores/critical-css-state.ts b/projects/plugins/boost/app/assets/src/js/features/critical-css/lib/stores/critical-css-state.ts index ec0b282d2250b..ff69531dd3e67 100644 --- a/projects/plugins/boost/app/assets/src/js/features/critical-css/lib/stores/critical-css-state.ts +++ b/projects/plugins/boost/app/assets/src/js/features/critical-css/lib/stores/critical-css-state.ts @@ -152,8 +152,8 @@ export function useSetProviderErrorsAction() { * Hook which creates a callable action for regenerating Critical CSS. */ export function useRegenerateCriticalCssAction() { - const [ , resetReason ] = useRegenerationReason(); - return useCriticalCssAction( 'request-regenerate', z.void(), resetReason ); + const [ , updateReason ] = useRegenerationReason(); + return useCriticalCssAction( 'request-regenerate', z.void(), () => updateReason( null ) ); } /** diff --git a/projects/plugins/boost/app/assets/src/js/features/critical-css/lib/stores/suggest-regenerate.ts b/projects/plugins/boost/app/assets/src/js/features/critical-css/lib/stores/suggest-regenerate.ts index 0cdd3fc515864..f01566348eee0 100644 --- a/projects/plugins/boost/app/assets/src/js/features/critical-css/lib/stores/suggest-regenerate.ts +++ b/projects/plugins/boost/app/assets/src/js/features/critical-css/lib/stores/suggest-regenerate.ts @@ -8,23 +8,27 @@ const allowedSuggestions = [ 'switched_theme', 'plugin_change', 'foundation_page_saved', + 'foundation_pages_list_updated', ] as const; -export type RegenerationReason = ( typeof allowedSuggestions )[ number ]; +export type RegenerationReason = ( typeof allowedSuggestions )[ number ] | null; /** * Hook to get the reason why (if any) we should recommend users regenerate their Critical CSS. */ -export function useRegenerationReason(): [ RegenerationReason | null, () => void ] { +export function useRegenerationReason(): [ + RegenerationReason, + ( reason: RegenerationReason ) => void, +] { const [ { data }, { mutate } ] = useDataSync( 'jetpack_boost_ds', 'critical_css_suggest_regenerate', z.enum( allowedSuggestions ).nullable() ); - function reset() { - mutate( null ); - } + const updateReason = ( reason: RegenerationReason ) => { + mutate( reason ); + }; - return [ data || null, reset ]; + return [ data || null, updateReason ]; } diff --git a/projects/plugins/boost/app/assets/src/js/features/critical-css/regenerate-critical-css-suggestion/regenerate-critical-css-suggestion.tsx b/projects/plugins/boost/app/assets/src/js/features/critical-css/regenerate-critical-css-suggestion/regenerate-critical-css-suggestion.tsx index b3696ed0b90a8..90a85f5adfbd4 100644 --- a/projects/plugins/boost/app/assets/src/js/features/critical-css/regenerate-critical-css-suggestion/regenerate-critical-css-suggestion.tsx +++ b/projects/plugins/boost/app/assets/src/js/features/critical-css/regenerate-critical-css-suggestion/regenerate-critical-css-suggestion.tsx @@ -20,6 +20,7 @@ const suggestionMap: { [ key: string ]: string } = { 'jetpack-boost' ), foundation_page_saved: __( 'A Foundation page was updated.', 'jetpack-boost' ), + foundation_pages_list_updated: __( 'The list of Foundation pages was updated.', 'jetpack-boost' ), }; const getSuggestionMessage = ( type: RegenerationReason | null ) => { diff --git a/projects/plugins/boost/app/assets/src/js/features/foundation-pages/meta/meta.tsx b/projects/plugins/boost/app/assets/src/js/features/foundation-pages/meta/meta.tsx index 78385af22a154..af0a425c73658 100644 --- a/projects/plugins/boost/app/assets/src/js/features/foundation-pages/meta/meta.tsx +++ b/projects/plugins/boost/app/assets/src/js/features/foundation-pages/meta/meta.tsx @@ -9,16 +9,21 @@ import { useFoundationPages, useFoundationPagesProperties } from '../lib/stores/ import { createInterpolateElement } from '@wordpress/element'; import { recordBoostEvent } from '$lib/utils/analytics'; import getSupportLink from '$lib/utils/get-support-link'; +import { useRegenerationReason } from '$features/critical-css/lib/stores/suggest-regenerate'; const Meta = () => { const [ isExpanded, setIsExpanded ] = useState( false ); const [ foundationPages, setFoundationPages ] = useFoundationPages(); const foundationPagesProperties = useFoundationPagesProperties(); + const [ , updateRegenerateReason ] = useRegenerationReason(); const updateFoundationPages = ( newValue: string ) => { const newItems = newValue.split( '\n' ).map( line => line.trim() ); setFoundationPages( newItems ); + // @todo - Running setFoundationPages does not necessarily mean that the value was updated. + // This should happen only IF the value got updated. + updateRegenerateReason( 'foundation_pages_list_updated' ); }; let content = null; diff --git a/projects/plugins/boost/app/data-sync/Foundation_Pages_Entry.php b/projects/plugins/boost/app/data-sync/Foundation_Pages_Entry.php index 120d251430221..7d448278f07c4 100644 --- a/projects/plugins/boost/app/data-sync/Foundation_Pages_Entry.php +++ b/projects/plugins/boost/app/data-sync/Foundation_Pages_Entry.php @@ -4,6 +4,7 @@ use Automattic\Jetpack\WP_JS_Data_Sync\Contracts\Entry_Can_Get; use Automattic\Jetpack\WP_JS_Data_Sync\Contracts\Entry_Can_Set; +use Automattic\Jetpack_Boost\Lib\Environment_Change_Detector; class Foundation_Pages_Entry implements Entry_Can_Get, Entry_Can_Set { @@ -26,7 +27,10 @@ public function get( $fallback_value = false ) { public function set( $value ) { $value = $this->sanitize_value( $value ); - update_option( $this->option_key, $value ); + $updated = update_option( $this->option_key, $value ); + if ( $updated ) { + ( new Environment_Change_Detector() )->handle_foundation_pages_list_update(); + } } private function sanitize_value( $value ) { diff --git a/projects/plugins/boost/app/lib/Environment_Change_Detector.php b/projects/plugins/boost/app/lib/Environment_Change_Detector.php index dd0d7730571aa..a7ab760f83c39 100644 --- a/projects/plugins/boost/app/lib/Environment_Change_Detector.php +++ b/projects/plugins/boost/app/lib/Environment_Change_Detector.php @@ -14,12 +14,13 @@ */ class Environment_Change_Detector { - const ENV_CHANGE_LEGACY = '1'; - const ENV_CHANGE_PAGE_SAVED = 'page_saved'; - const ENV_CHANGE_POST_SAVED = 'post_saved'; - const ENV_CHANGE_SWITCHED_THEME = 'switched_theme'; - const ENV_CHANGE_PLUGIN_CHANGE = 'plugin_change'; - const ENV_CHANGE_FOUNDATION_PAGE_SAVED = 'foundation_page_saved'; + const ENV_CHANGE_LEGACY = '1'; + const ENV_CHANGE_PAGE_SAVED = 'page_saved'; + const ENV_CHANGE_POST_SAVED = 'post_saved'; + const ENV_CHANGE_SWITCHED_THEME = 'switched_theme'; + const ENV_CHANGE_PLUGIN_CHANGE = 'plugin_change'; + const ENV_CHANGE_FOUNDATION_PAGE_SAVED = 'foundation_page_saved'; + const ENV_CHANGE_FOUNDATION_PAGES_LIST_UPDATED = 'foundation_pages_list_updated'; /** * Initialize the change detection hooks. @@ -58,6 +59,10 @@ public function handle_plugin_change() { $this->do_action( false, $this::ENV_CHANGE_PLUGIN_CHANGE ); } + public function handle_foundation_pages_list_update() { + $this->do_action( false, $this::ENV_CHANGE_FOUNDATION_PAGES_LIST_UPDATED ); + } + /** * Fire the environment change action. * diff --git a/projects/plugins/boost/wp-js-data-sync.php b/projects/plugins/boost/wp-js-data-sync.php index 1757e14119da6..5cf6c09bcc402 100644 --- a/projects/plugins/boost/wp-js-data-sync.php +++ b/projects/plugins/boost/wp-js-data-sync.php @@ -177,6 +177,7 @@ function jetpack_boost_initialize_datasync() { 'switched_theme', 'plugin_change', 'foundation_page_saved', + 'foundation_pages_list_updated', ) )->nullable();