From 773053cef4d929042863af87f2f01647c8d0c7d5 Mon Sep 17 00:00:00 2001 From: Jared Rethman Date: Tue, 17 Sep 2024 14:10:51 -0500 Subject: [PATCH 01/13] refactor: moved theme mod styles to admin/styles.scss --- src/admin/style.scss | 52 +++++++++++++++++++ .../views/settings/theme-and-brand/style.scss | 50 ------------------ 2 files changed, 52 insertions(+), 50 deletions(-) delete mode 100644 src/wizards/newspack/views/settings/theme-and-brand/style.scss diff --git a/src/admin/style.scss b/src/admin/style.scss index 8110896528..0e8cc918ca 100644 --- a/src/admin/style.scss +++ b/src/admin/style.scss @@ -69,6 +69,58 @@ h1 { color: transparent; } } + * { + cursor: progress; + } + + // Theme + .newspack-style-card { + opacity: 0.9; + + .newspack-style-card__image { + overflow: hidden; + animation: opacity-pulse 1.4s infinite; + } + + .newspack-style-card__image-html:empty { + background-color: var(--np-color-wp-gray-100); + } + + .newspack-style-card__actions { + display: none; + } + } + + // Color + .newspack-color-picker { + .newspack-color-picker__expander { + background-color: var(--np-color-wp-gray-100); + animation: opacity-pulse 1.4s infinite; + } + } + + .newspack-select-control { + animation: opacity-pulse 1.4s infinite; + + // Specificity necessary to override @emotion/* styles + select.components-select-control__input { + background-color: var(--np-color-wp-gray-100); + 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; + } + } } /** diff --git a/src/wizards/newspack/views/settings/theme-and-brand/style.scss b/src/wizards/newspack/views/settings/theme-and-brand/style.scss deleted file mode 100644 index 1c82ae1689..0000000000 --- a/src/wizards/newspack/views/settings/theme-and-brand/style.scss +++ /dev/null @@ -1,50 +0,0 @@ -.is-fetching { - * { - cursor: progress; - } - - // Theme - .newspack-style-card { - opacity: 0.9; - - .newspack-style-card__image { - overflow: hidden; - animation: opacity-pulse 1.4s infinite; - } - - .newspack-style-card__image-html:empty { - background-color: var(--np-color-wp-gray-100); - } - - .newspack-style-card__actions { - display: none; - } - } - - // Color - .newspack-color-picker { - .newspack-color-picker__expander { - background-color: var(--np-color-wp-gray-100); - animation: opacity-pulse 1.4s infinite; - } - } - - .newspack-select-control { - animation: opacity-pulse 1.4s infinite; - - .components-select-control__input { - background-color: var(--np-color-wp-gray-100); - } - - select { - border: 1px solid var(--np-color-wp-gray-100); - cursor: progress; - } - - optgroup, - option, - .components-select-control__arrow-wrapper { - display: none; - } - } -} From 78d78735de8231a7450c6f6ade93e1a593a42587 Mon Sep 17 00:00:00 2001 From: Jared Rethman Date: Tue, 17 Sep 2024 14:14:16 -0500 Subject: [PATCH 02/13] feat: add featured image posts sections --- .../featured-image-posts-all.tsx | 145 ++++++++++++++++++ .../featured-image-posts-new.tsx | 71 +++++++++ .../views/settings/display-settings/index.tsx | 98 +++++++++--- .../views/settings/theme-and-brand/index.tsx | 3 +- .../newspack/views/settings/theme-mods.d.ts | 12 +- 5 files changed, 304 insertions(+), 25 deletions(-) create mode 100644 src/wizards/newspack/views/settings/display-settings/featured-image-posts-all.tsx create mode 100644 src/wizards/newspack/views/settings/display-settings/featured-image-posts-new.tsx 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..3cf5b2c8d6 --- /dev/null +++ b/src/wizards/newspack/views/settings/display-settings/featured-image-posts-all.tsx @@ -0,0 +1,145 @@ +import { Fragment } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; + +import { Grid, Notice, 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..69a1b9990f --- /dev/null +++ b/src/wizards/newspack/views/settings/display-settings/featured-image-posts-new.tsx @@ -0,0 +1,71 @@ +import { __ } from '@wordpress/i18n'; + +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..17e5ad8e9a 100644 --- a/src/wizards/newspack/views/settings/display-settings/index.tsx +++ b/src/wizards/newspack/views/settings/display-settings/index.tsx @@ -11,18 +11,23 @@ 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, utils } from '../../../../../components/src'; import { useWizardApiFetch } from '../../../../hooks/use-wizard-api-fetch'; +import Recirculation from './recirculation'; +import AuthorBio from './author-bio'; +import FeaturedImage from './featured-image-posts-all'; +import DefaultFeaturedImage from './featured-image-posts-new'; 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 >( { @@ -37,38 +42,28 @@ export default function DisplaySettings() { ); 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 } ) { setData( theme_mods ); + setEtc( etc ); }, } ); - }, [] ); - - function save() { - wizardApiFetch( + wizardApiFetch< 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, } ); + }, [] ); + + function save() { wizardApiFetch( { path: '/newspack/v1/wizard/newspack-settings/related-posts-max-age', @@ -83,6 +78,39 @@ 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 +132,34 @@ export default function DisplaySettings() { isFetching={ isFetching } /> + + + + + +