diff --git a/projects/plugins/boost/app/assets/src/js/features/minify-meta/lib/stores.ts b/projects/plugins/boost/app/assets/src/js/features/minify-meta/lib/stores.ts new file mode 100644 index 0000000000000..939cdc95beab9 --- /dev/null +++ b/projects/plugins/boost/app/assets/src/js/features/minify-meta/lib/stores.ts @@ -0,0 +1,17 @@ +import { z } from 'zod'; +import { useDataSync } from '@automattic/jetpack-react-data-sync-client'; + +const MinifyDefaults = z.array( z.string() ); +type MinifyDefaults = z.infer< typeof MinifyDefaults >; + +export function useMinifyDefaults( + preferenceDSKey: 'minify_js_excludes' | 'minify_css_excludes' +): MinifyDefaults | undefined { + const [ { data } ] = useDataSync( + 'jetpack_boost_ds', + `${ preferenceDSKey }_default`, + MinifyDefaults + ); + + return data; +} diff --git a/projects/plugins/boost/app/assets/src/js/features/minify-meta/minify-meta.module.scss b/projects/plugins/boost/app/assets/src/js/features/minify-meta/minify-meta.module.scss index 203f6bc1211ef..8af9e2cecb820 100644 --- a/projects/plugins/boost/app/assets/src/js/features/minify-meta/minify-meta.module.scss +++ b/projects/plugins/boost/app/assets/src/js/features/minify-meta/minify-meta.module.scss @@ -5,6 +5,10 @@ font-size: 14px; line-height: 22px; + :global(button ~ button) { + margin-left: 20px !important; + } + .summary { flex-grow: 1; } @@ -35,34 +39,20 @@ } } - .manage-excludes { - display: flex; - flex-direction: column; - align-items: center; - width: 100%; - - .help { - font-size: 14px; - line-height: 1.5; - color: var( --gray-60 ); - font-weight: 400; - } + .description { + margin-top: 8px; + font-size: 14px; + line-height: 1.5; + color: var( --gray-60 ); + font-weight: 400; } - .manage-excludes label { - display: block; - text-align: left; - margin-bottom: 16px; - font-weight: 600; - width: 100%; - font-size: 16px; - line-height: 1; + .button { + margin-top: 16px; } - .manage-excludes span { + .manage-excludes label { display: block; - text-align: left; - width: 100%; margin-bottom: 16px; line-height: 1.5; } @@ -72,37 +62,6 @@ padding: 10px; border-radius: 4px; border: 1px solid $gray_10; - margin-bottom: 16px; - } - - .buttons-container { - display: flex; - flex-direction: row; - justify-content: flex-start; - width: 100%; - - button { - margin-right: 10px; - padding: 8px 24px; - border: 1px solid $primary-black; - border-radius: 4px; - cursor: pointer; - color: $primary-black; - - } - button[disabled] { - border-color: $gray-5; - background-color: $gray-5; - color: $gray-20; - cursor: not-allowed; - } - button:not([disabled]) { - background-color: $primary-black; - color: $primary-white; - } - button:not([disabled]):hover { - background-color: lighten($primary-black, 10%); - } } .edit-button svg { diff --git a/projects/plugins/boost/app/assets/src/js/features/minify-meta/minify-meta.tsx b/projects/plugins/boost/app/assets/src/js/features/minify-meta/minify-meta.tsx index 399d8e934fb54..e882d8240a743 100644 --- a/projects/plugins/boost/app/assets/src/js/features/minify-meta/minify-meta.tsx +++ b/projects/plugins/boost/app/assets/src/js/features/minify-meta/minify-meta.tsx @@ -1,17 +1,25 @@ import { useEffect, useState } from 'react'; +import { Button } from '@automattic/jetpack-components'; import { __, sprintf } from '@wordpress/i18n'; import { type Props, useMetaQuery } from '$lib/stores/minify'; import { recordBoostEvent } from '$lib/utils/analytics'; import styles from './minify-meta.module.scss'; import CollapsibleMeta from '$features/ui/collapsible-meta/collapsible-meta'; +import { useMinifyDefaults } from './lib/stores'; const MetaComponent = ( { buttonText, placeholder, datasyncKey }: Props ) => { const [ values, updateValues ] = useMetaQuery( datasyncKey ); const [ inputValue, setInputValue ] = useState( () => values.join( ', ' ) ); + const minifyDefaults = useMinifyDefaults( datasyncKey ); const concatenateType = datasyncKey === 'minify_js_excludes' ? 'js' : 'css'; const togglePanelTracksEvent = 'concatenate_' + concatenateType + '_panel_toggle'; // possible events: concatenate_js_panel_toggle, concatenate_css_panel_toggle + let defaultValue = ''; + if ( minifyDefaults !== undefined ) { + defaultValue = minifyDefaults.join( ', ' ); + } + useEffect( () => { setInputValue( values.join( ', ' ) ); }, [ values ] ); @@ -35,20 +43,34 @@ const MetaComponent = ( { buttonText, placeholder, datasyncKey }: Props ) => { const htmlId = `jb-minify-meta-${ datasyncKey }`; - const summary = - values.length > 0 - ? /* Translators: %s refers to the list of excluded items. */ - sprintf( __( 'Except: %s', 'jetpack-boost' ), values.join( ', ' ) ) - : ''; - // Be explicit about this because the optimizer breaks the linter otherwise. + let summary; + if ( values.length > 0 ) { + /* Translators: %s refers to the list of excluded items. */ + summary = sprintf( __( 'Except: %s', 'jetpack-boost' ), values.join( ', ' ) ); + } + + if ( values.length === 0 ) { + summary = __( 'No exceptions.', 'jetpack-boost' ); + } + let subHeaderText = ''; if ( datasyncKey === 'minify_js_excludes' ) { - subHeaderText = __( 'Exclude JS Strings:', 'jetpack-boost' ); + subHeaderText = __( 'Exclude JS handles:', 'jetpack-boost' ); } if ( datasyncKey === 'minify_css_excludes' ) { - subHeaderText = __( 'Exclude CSS Strings:', 'jetpack-boost' ); + subHeaderText = __( 'Exclude CSS handles:', 'jetpack-boost' ); + } + + function loadDefaultValue() { + setInputValue( defaultValue ); + /* + * Possible Events: + * minify_js_exceptions_load_default + * minify_css_exceptions_load_default + */ + recordBoostEvent( 'minify_' + concatenateType + '_exceptions_load_default', {} ); } const content = ( @@ -56,7 +78,9 @@ const MetaComponent = ( { buttonText, placeholder, datasyncKey }: Props ) => {
{ __( 'Exceptions', 'jetpack-boost' ) }
- { subHeaderText } + { } } } /> - - { __( 'Use a comma (,) to separate the strings.', 'jetpack-boost' ) } - -
- +
+ { __( 'Use a comma (,) to separate the handles.', 'jetpack-boost' ) }
+ +
diff --git a/projects/plugins/boost/app/assets/src/js/pages/index/index.tsx b/projects/plugins/boost/app/assets/src/js/pages/index/index.tsx index 4373e1baeac18..7094ffd289914 100644 --- a/projects/plugins/boost/app/assets/src/js/pages/index/index.tsx +++ b/projects/plugins/boost/app/assets/src/js/pages/index/index.tsx @@ -184,8 +184,8 @@ const Index = () => { > { > fallback( Minify_JS::$default_excludes ), $js_excludes_entry ); jetpack_boost_register_option( 'minify_css_excludes', Schema::as_array( Schema::as_string() )->fallback( Minify_CSS::$default_excludes ), $css_excludes_entry ); +jetpack_boost_register_readonly_option( + 'minify_js_excludes_default', + function () { + return Minify_JS::$default_excludes; + } +); +jetpack_boost_register_readonly_option( + 'minify_css_excludes_default', + function () { + return Minify_CSS::$default_excludes; + } +); + jetpack_boost_register_option( 'image_cdn_quality', Schema::as_assoc_array(