diff --git a/includes/wizards/class-setup-wizard.php b/includes/wizards/class-setup-wizard.php index ac29fb8e3d..54bba8576c 100644 --- a/includes/wizards/class-setup-wizard.php +++ b/includes/wizards/class-setup-wizard.php @@ -509,6 +509,9 @@ public function api_update_theme_with_mods( $request ) { // All-posts updates: featured image and post template. if ( substr_compare( $key, '_all_posts', -strlen( '_all_posts' ) ) === 0 ) { + if ( 'none' === $value ) { + continue; + } switch ( $key ) { case 'featured_image_all_posts': self::update_meta_key_in_batches( 'newspack_featured_image_position', $value ); @@ -541,11 +544,16 @@ private static function update_meta_key_in_batches( $meta_key, $value, $page = 0 'post_type' => 'post', 'fields' => 'ids', 'meta_query' => [ // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_meta_query + 'relation' => 'OR', [ 'key' => $meta_key, 'value' => $value, 'compare' => '!=', ], + [ + 'key' => $meta_key, + 'compare' => 'NOT EXISTS', + ], ], ]; $results = new \WP_Query( $args ); diff --git a/src/admin/style.scss b/src/admin/style.scss index 1042f76873..63e6be87a3 100644 --- a/src/admin/style.scss +++ b/src/admin/style.scss @@ -102,21 +102,29 @@ h1 { .newspack-select-control { animation: opacity-pulse 1.4s infinite; - .components-select-control__input { + // Specificity necessary to override @emotion/* styles + select.components-select-control__input { background-color: var(--np-color-wp-gray-100); - } - - select { border: 1px solid var(--np-color-wp-gray-100); cursor: progress; } + // Specificity necessary to override @emotion/* styles + div.components-input-control__backdrop { + border: none; + } + optgroup, option, + .components-input-control__suffix, .components-select-control__arrow-wrapper { display: none; } } + + .newspack-image-upload__image { + animation: opacity-pulse 1.4s infinite; + } } /** diff --git a/src/wizards/newspack/views/settings/display-settings/featured-image-posts-all.tsx b/src/wizards/newspack/views/settings/display-settings/featured-image-posts-all.tsx new file mode 100644 index 0000000000..4114dfab3b --- /dev/null +++ b/src/wizards/newspack/views/settings/display-settings/featured-image-posts-all.tsx @@ -0,0 +1,156 @@ +/** + * Newspack > Settings > Display Settings > Featured Image Posts All + */ + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Fragment } from '@wordpress/element'; +import { Notice } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { Grid, SelectControl } from '../../../../../components/src'; + +export default function FeaturedImagePostsAll( { + data, + update, + postCount, +}: ThemeModComponentProps< DisplaySettings > & { postCount: string } ) { + return ( + + { Number( postCount ) > 1000 && ( + + { __( + 'You have more than 1000 posts. Applying these settings might take a moment.', + 'newspack-plugin' + ) } + + ) } + +
+ + update( { featured_image_all_posts } ) + } + /> + { data.featured_image_all_posts !== 'none' && ( + + { __( + 'After saving the settings with this option selected, all posts will be updated. This cannot be undone.', + 'newspack-plugin' + ) } + + ) } +
+ +
+ + update( { post_template_all_posts } ) + } + /> + { data.post_template_all_posts !== 'none' && ( + + { __( + 'After saving the settings with this option selected, all posts will be updated. This cannot be undone.', + 'newspack-plugin' + ) } + + ) } +
+ + + ); +} diff --git a/src/wizards/newspack/views/settings/display-settings/featured-image-posts-new.tsx b/src/wizards/newspack/views/settings/display-settings/featured-image-posts-new.tsx new file mode 100644 index 0000000000..6b09042894 --- /dev/null +++ b/src/wizards/newspack/views/settings/display-settings/featured-image-posts-new.tsx @@ -0,0 +1,81 @@ +/** + * Newspack > Settings > Display Settings > Featured Image Posts New + */ + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { Grid, SelectControl } from '../../../../../components/src'; + +export default function FeaturedImagePostsNew( { + data, + update, +}: ThemeModComponentProps< DisplaySettings > ) { + return ( + + + update( { featured_image_default } ) + } + /> + + update( { post_template_default } ) + } + /> + + ); +} diff --git a/src/wizards/newspack/views/settings/display-settings/index.tsx b/src/wizards/newspack/views/settings/display-settings/index.tsx index ff848c4834..da216357e8 100644 --- a/src/wizards/newspack/views/settings/display-settings/index.tsx +++ b/src/wizards/newspack/views/settings/display-settings/index.tsx @@ -11,18 +11,24 @@ import { useEffect } from '@wordpress/element'; /** * Internal dependencies. */ -import AuthorBio from './author-bio'; -import Recirculation from './recirculation'; import { DEFAULT_THEME_MODS } from '../constants'; import WizardsTab from '../../../../wizards-tab'; import WizardSection from '../../../../wizards-section'; -import { Button, hooks } from '../../../../../components/src'; +import { Button, hooks, Notice, utils } from '../../../../../components/src'; import { useWizardApiFetch } from '../../../../hooks/use-wizard-api-fetch'; +import Recirculation from './recirculation'; +import AuthorBio from './author-bio'; +import FeaturedImagePostsAll from './featured-image-posts-all'; +import FeaturedImagePostsNew from './featured-image-posts-new'; +import MediaCredits from './media-credits'; export default function DisplaySettings() { const [ data, setData ] = hooks.useObjectState< DisplaySettings >( { ...DEFAULT_THEME_MODS, } ); + const [ etc, setEtc ] = hooks.useObjectState< Etc >( { + post_count: '0', + } ); const [ recirculationData, setRecirculationData ] = hooks.useObjectState< Recirculation >( { @@ -32,44 +38,38 @@ export default function DisplaySettings() { relatedPostsUpdated: false, } ); - const { wizardApiFetch, isFetching } = useWizardApiFetch( - 'newspack-settings/display-settings' + const { wizardApiFetch, isFetching, errorMessage } = useWizardApiFetch( + 'newspack-settings/theme-mods' ); + const { + wizardApiFetch: wizardApiFetchRecirculation, + isFetching: isFetchingRecirculation, + } = useWizardApiFetch( 'newspack-settings/display-settings/recirculation' ); useEffect( () => { - wizardApiFetch< Recirculation >( - { - path: '/newspack/v1/wizard/newspack-settings/related-content', - }, - { - onSuccess: setRecirculationData, - } - ); wizardApiFetch< ThemeData >( { path: '/newspack/v1/wizard/newspack-setup-wizard/theme', }, { - onSuccess( { theme_mods } ) { + onSuccess( { theme_mods, etc: newEtc } ) { setData( theme_mods ); + setEtc( newEtc ); }, } ); - }, [] ); - - function save() { - wizardApiFetch( + wizardApiFetchRecirculation< Recirculation >( { - path: '/newspack/v1/wizard/newspack-setup-wizard/theme', - method: 'POST', - updateCacheMethods: [ 'GET' ], - data: { theme_mods: data }, + path: '/newspack/v1/wizard/newspack-settings/related-content', }, { - onSuccess: setData, + onSuccess: setRecirculationData, } ); - wizardApiFetch( + }, [] ); + + function save() { + wizardApiFetchRecirculation( { path: '/newspack/v1/wizard/newspack-settings/related-posts-max-age', method: 'POST', @@ -83,16 +83,49 @@ export default function DisplaySettings() { onSuccess: setRecirculationData, } ); + if ( + data.featured_image_all_posts !== 'none' || + data.post_template_all_posts !== 'none' + ) { + if ( + ! utils.confirmAction( + __( + 'Saving will overwrite existing posts, this cannot be undone. Are you sure you want to proceed?', + 'newspack-plugin' + ) + ) + ) { + return; + } + } + wizardApiFetch( + { + path: '/newspack/v1/wizard/newspack-setup-wizard/theme', + method: 'POST', + updateCacheMethods: [ 'GET' ], + data: { theme_mods: data }, + }, + { + onSuccess: savedData => { + setData( { + ...savedData, + // Strange UX behavior: if the user saves the settings with the "all posts" options selected, the settings are reset to "none". + featured_image_all_posts: 'none', + post_template_all_posts: 'none', + } ); + }, + } + ); } return ( @@ -104,6 +137,38 @@ export default function DisplaySettings() { isFetching={ isFetching } /> + + + + + + + + + + { errorMessage && }