Merge pull request #770 from GoogleChromeLabs/fix/maskable-icon-setting

Fix maskable icon setting behaviour based on site icon
GoogleChromeLabs · Apr 23, 2022 · dd833d2 · dd833d2
2 parents 4fa73bd + d19d86e
commit dd833d2
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 21 deletions.
diff --git a/tests/test-class-wp-web-app-manifest.php b/tests/test-class-wp-web-app-manifest.php
@@ -245,6 +245,7 @@ public function test_get_manifest() {
 		$this->mock_site_icon();
 		$blogname = 'PWA & Test "First" and \'second\' and “third”';
 		update_option( 'blogname', $blogname );
+		update_option( 'site_icon_maskable', false );
 		$actual_manifest = $this->instance->get_manifest();
 
 		// Verify that there are now entities.
@@ -264,16 +265,41 @@ public function test_get_manifest() {
 		$this->assertEquals( $expected_manifest, $actual_manifest );
 
 		// Check that icon purpose is `any maskable` if site icon is maskable.
+		$actual_manifest = $this->instance->get_manifest();
+		$this->assertEquals( $expected_manifest, $actual_manifest );
+		$purposes = array();
+		foreach ( $actual_manifest['icons'] as $icon ) {
+			if ( ! isset( $purposes[ $icon['purpose'] ] ) ) {
+				$purposes[ $icon['purpose'] ] = 0;
+			} else {
+				$purposes[ $icon['purpose'] ]++;
+			}
+		}
+		$this->assertEquals(
+			array(
+				'any' => 1,
+			),
+			$purposes
+		);
+
+		// Make sure maskable is properly checked.
 		update_option( 'site_icon_maskable', true );
-		$actual_manifest            = $this->instance->get_manifest();
-		$expected_manifest['icons'] = array_map(
-			function ( $icon ) {
-				$icon['purpose'] = 'any maskable';
-				return $icon;
-			},
-			$expected_manifest['icons']
+		$actual_manifest = $this->instance->get_manifest();
+		$purposes        = array();
+		foreach ( $actual_manifest['icons'] as $icon ) {
+			if ( ! isset( $purposes[ $icon['purpose'] ] ) ) {
+				$purposes[ $icon['purpose'] ] = 0;
+			} else {
+				$purposes[ $icon['purpose'] ]++;
+			}
+		}
+		$this->assertEquals(
+			array(
+				'any'      => 1,
+				'maskable' => 1,
+			),
+			$purposes
 		);
-		$this->assertEquals( $expected_manifest, $actual_manifest );
 
 		// Check that long names do not automatically copy to short name.
 		$blogname = str_repeat( 'x', 13 );
@@ -482,9 +508,10 @@ public function test_get_icons() {
 		$expected_icons = array();
 		foreach ( $this->instance->default_manifest_icon_sizes as $size ) {
 			$expected_icons[] = array(
-				'src'   => $this->expected_site_icon_img_url,
-				'sizes' => sprintf( '%1$dx%1$d', $size ),
-				'type'  => self::MIME_TYPE,
+				'src'     => $this->expected_site_icon_img_url,
+				'sizes'   => sprintf( '%1$dx%1$d', $size ),
+				'type'    => self::MIME_TYPE,
+				'purpose' => 'any',
 			);
 		}
 		$this->assertEquals( $expected_icons, $this->instance->get_icons() );

diff --git a/wp-admin/js/customize-controls-site-icon-pwa.js b/wp-admin/js/customize-controls-site-icon-pwa.js
@@ -31,6 +31,13 @@ wp.customize(
 				// Update active state whenever the site_icon setting changes.
 				siteIconSetting.bind(updateActive);
 
+				// Change the site_icon_maskable if site_icon is not set.
+				siteIconSetting.bind((newSiteIconValue) => {
+					if (!newSiteIconValue) {
+						siteIconMaskableSetting(false);
+					}
+				});
+
 				/**
 				 * Validate site icons for its presence and size.
 				 */

diff --git a/wp-includes/class-wp-customize-manager.php b/wp-includes/class-wp-customize-manager.php
@@ -35,10 +35,13 @@ function pwa_customize_register_site_icon_maskable( WP_Customize_Manager $wp_cus
 		$wp_customize->add_control(
 			'site_icon_maskable',
 			array(
-				'type'     => 'checkbox',
-				'section'  => 'title_tagline',
-				'label'    => __( 'Maskable icon', 'pwa' ),
-				'priority' => $site_icon_control->priority + 1,
+				'type'            => 'checkbox',
+				'section'         => 'title_tagline',
+				'label'           => __( 'Maskable icon', 'pwa' ),
+				'priority'        => $site_icon_control->priority + 1,
+				'active_callback' => function() use ( $wp_customize ) {
+					return (bool) $wp_customize->get_setting( 'site_icon' )->value();
+				},
 			)
 		);
 	}

diff --git a/wp-includes/class-wp-web-app-manifest.php b/wp-includes/class-wp-web-app-manifest.php
@@ -504,16 +504,18 @@ public function get_icons() {
 			$src = get_site_icon_url( $size );
 			if ( $src ) {
 				$icon = array(
-					'src'   => $src,
-					'sizes' => sprintf( '%1$dx%1$d', $size ),
-					'type'  => $mime_type,
+					'purpose' => 'any',
+					'src'     => $src,
+					'sizes'   => sprintf( '%1$dx%1$d', $size ),
+					'type'    => $mime_type,
 				);
 
+				$icons[] = $icon;
+
 				if ( $maskable ) {
-					$icon['purpose'] = 'any maskable';
+					$icon['purpose'] = 'maskable';
+					$icons[]         = $icon;
 				}
-
-				$icons[] = $icon;
 			}
 		}
 		return $icons;