fix(media): move default image UI to Advanced Settings (#4296)

* fix(media): move default image UI to Advanced Settings

* fix: image fallback setting title

Author: dkoo

includes/class-default-image.php

@@ -27,8 +27,6 @@ class Default_Image {
 	 * Add hooks.
 	 */
 	public static function init() {
-		add_filter( 'attachment_fields_to_save', [ __CLASS__, 'save_attachement_settings' ], 10, 2 );
-		add_filter( 'attachment_fields_to_edit', [ __CLASS__, 'add_attachment_field' ], 10, 2 );
 		add_action( 'template_redirect', [ __CLASS__, 'handle_not_found_image' ] );
 		add_action( 'wp_footer', [ __CLASS__, 'add_404_image_handler_function' ] );
 	}
@@ -50,44 +48,6 @@ public static function handle_not_found_image() {
 		}
 	}
 
-	/**
-	 * Add the relevant setting in the media editing screen.
-	 *
-	 * @param array   $fields Array of media editor field info.
-	 * @param WP_Post $post Post object for current attachment.
-	 * @return array Modified $fields.
-	 */
-	public static function add_attachment_field( $fields, $post ) {
-		$field_name = 'attachments[' . $post->ID . '][' . self::FIELD_NAME . ']';
-		$value = ( wp_get_attachment_url( $post->ID ) === get_option( self::OPTION_NAME ) );
-		$fields[ self::FIELD_NAME ] = [
-			'label' => __( 'Is default image?', 'newspack-image-credits' ),
-			'input' => 'html',
-			'html'  => '<input id="' . $field_name . '" name="' . $field_name . '" type="hidden" value="0" /><input id="' . $field_name . '" name="' . $field_name . '" type="checkbox" value="1" ' . checked( $value, true, false ) . ' />',
-			'helps' => __( 'Use this image as a default image, if the requested one is not found (404 status).', 'newspack-plugin' ),
-		];
-		return $fields;
-	}
-
-	/**
-	 * Save the relevant setting.
-	 *
-	 * @param array $post Array of post info.
-	 * @param array $attachment Array of media field input info.
-	 * @return array $post Unmodified post info.
-	 */
-	public static function save_attachement_settings( $post, $attachment ) {
-		if ( isset( $attachment[ self::FIELD_NAME ] ) ) {
-			if ( '1' === $attachment[ self::FIELD_NAME ] ) {
-				update_option( self::OPTION_NAME, wp_get_attachment_url( $post['ID'] ) );
-			} else {
-				delete_option( self::OPTION_NAME );
-			}
-		}
-
-		return $post;
-	}
-
 	/**
 	 * Add JavaScript function to handle 404 images.
 	 * If an image is served from a different domain, the `template_redirect` action won't catch a 404.
@@ -98,7 +58,7 @@ public static function add_404_image_handler_function() {
 		if ( ! empty( $default_image_url ) ) {
 			?>
 				<script>
-					document.querySelectorAll('img').forEach(function(imgEl) {
+					document.querySelectorAll('.content-area img').forEach(function(imgEl) {
 						imgEl.addEventListener('error', function(){
 							if (!imgEl.hasAttribute('data-404-handled')) {
 								imgEl.setAttribute('data-404-handled', 'true');

includes/wizards/class-setup-wizard.php

@@ -384,6 +384,9 @@ public function api_retrieve_theme_and_set_defaults() {
 		// Append PWA display mode option.
 		$theme_mods['pwa_display_mode'] = get_option( 'newspack_pwa_display_mode', 'minimal-ui' );
 
+		// Append post content fallback image option.
+		$theme_mods['post_content_fallback_image'] = get_option( Default_Image::OPTION_NAME, null );
+
 		return rest_ensure_response(
 			[
 				'theme'             => Starter_Content::get_theme(),
@@ -530,6 +533,12 @@ public function api_update_theme_with_mods( $request ) {
 				continue;
 			}
 
+			// Post content fallback image is an option, not a theme mod.
+			if ( 'post_content_fallback_image' === $key ) {
+				update_option( Default_Image::OPTION_NAME, $value );
+				continue;
+			}
+
 			// All-posts updates: featured image and post template.
 			if ( substr_compare( $key, '_all_posts', -strlen( '_all_posts' ) ) === 0 ) {
 				if ( 'none' === $value ) {

src/wizards/newspack/views/settings/advanced-settings/index.tsx

@@ -11,10 +11,10 @@ import { useEffect } from '@wordpress/element';
 /**
  * Internal dependencies.
  */
-import { DEFAULT_THEME_MODS } from '../constants';
+import { ADVANCED_SETTINGS_DEFAULTS } from '../constants';
 import WizardsTab from '../../../../wizards-tab';
 import WizardSection from '../../../../wizards-section';
-import { Button, hooks, Notice, utils } from '../../../../../../packages/components/src';
+import { Button, Grid, hooks, ImageUpload, Notice, utils } from '../../../../../../packages/components/src';
 import { useWizardApiFetch } from '../../../../hooks/use-wizard-api-fetch';
 import Recirculation from './recirculation';
 import AuthorBio from './author-bio';
@@ -26,7 +26,7 @@ import PwaDisplayMode from './pwa-display-mode';
 
 export default function AdvancedSettings() {
 	const [ data, setData ] = hooks.useObjectState< AdvancedSettings >( {
-		...DEFAULT_THEME_MODS,
+		...ADVANCED_SETTINGS_DEFAULTS,
 	} );
 	const [ etc, setEtc ] = hooks.useObjectState< Etc >( {
 		post_count: '0',
@@ -124,7 +124,7 @@ export default function AdvancedSettings() {
 				<AuthorBio update={ setData } data={ data } isFetching={ isFetching } />
 			</WizardSection>
 			<WizardSection
-				title={ __( 'Default Featured Image Position And Post Template', 'newspack-plugin' ) }
+				title={ __( 'Default Featured Image Position and Post Template', 'newspack-plugin' ) }
 				description={ __( 'Modify how the featured image and post template settings are applied to new posts.', 'newspack-plugin' ) }
 			>
 				<FeaturedImagePostsNew data={ data } update={ setData } />
@@ -141,6 +141,18 @@ export default function AdvancedSettings() {
 			<WizardSection title={ __( 'Media Credits', 'newspack-plugin' ) }>
 				<MediaCredits data={ data } update={ setData } />
 			</WizardSection>
+			<WizardSection
+				title={ __( 'Image fallback', 'newspack-plugin' ) }
+				description={ __( 'Select a fallback image to display when an image inside post content cannot be found.', 'newspack-plugin' ) }
+			>
+				<Grid>
+					<ImageUpload
+						image={ data.post_content_fallback_image ? { url: data.post_content_fallback_image } : null }
+						buttonLabel={ __( 'Select', 'newspack-plugin' ) }
+						onChange={ ( image: null | PlaceholderImage ) => setData( { post_content_fallback_image: image?.url || null } ) }
+					/>
+				</Grid>
+			</WizardSection>
 			<WizardSection>
 				<AccessibilityStatement isFetching={ isFetching } />
 			</WizardSection>

src/wizards/newspack/views/settings/constants.ts

@@ -60,6 +60,8 @@ export const ADVANCED_SETTINGS_DEFAULTS = {
 	newspack_image_credits_auto_populate: false,
 	// PWA Display Mode.
 	pwa_display_mode: 'minimal-ui',
+	// Post content fallback image.
+	newspack_default_image_url: undefined,
 };
 
 export const DEFAULT_THEME_MODS: ThemeMods = {

src/wizards/newspack/views/settings/theme-mods.d.ts

@@ -6,7 +6,7 @@ type ThemeNames = 'theme' | 'scott' | 'nelson' | 'katharine' | 'sacha' | 'joseph
 /**
  * Theme names with `newspack` prefix.
  */
-type NewspackThemes = `newspack-${ ThemeNames }`;
+type NewspackThemes = `newspack-${ThemeNames}`;
 
 /**
  * Property on theme mods endpoint.
@@ -19,10 +19,10 @@ interface Etc {
 /**
  * Theme and brand schema.
  */
-interface ThemeData< T = {} > {
+interface ThemeData<T = {}> {
 	etc: Etc;
 	theme: '' | NewspackThemes;
-	theme_mods: ThemeMods< T >;
+	theme_mods: ThemeMods<T>;
 	homepage_patterns: HomepagePattern[];
 }
 
@@ -77,8 +77,8 @@ interface ThemeAndBrand {
 /**
  * Theme mods component.
  */
-type ThemeModComponentProps< T = ThemeMods > = {
-	update: ( a: Partial< T > ) => void;
+type ThemeModComponentProps<T = ThemeMods> = {
+	update: (a: Partial<T>) => void;
 	isFetching?: boolean;
 	data: T;
 };
@@ -126,6 +126,9 @@ interface AdvancedSettings {
 
 	// PWA Display Mode.
 	pwa_display_mode: string;
+
+	// Post content fallback image.
+	post_content_fallback_image?: string | null;
 }
 
 interface MiscSettings {
@@ -135,4 +138,4 @@ interface MiscSettings {
 	custom_css_post_id: number;
 }
 
-interface ThemeMods extends ThemeAndBrand, AdvancedSettings, MiscSettings {}
+interface ThemeMods extends ThemeAndBrand, AdvancedSettings, MiscSettings { }