Icons: Allow rect and circle in the registry sanitizer

backport-changelog/7.2/12197.md

@@ -1,3 +1,4 @@
 https://github.com/WordPress/wordpress-develop/pull/12197
 
 * https://github.com/WordPress/gutenberg/pull/78808
+* https://github.com/WordPress/gutenberg/pull/82846

lib/class-wp-icons-registry-gutenberg.php

@@ -40,6 +40,7 @@ function gutenberg_get_allowed_icon_svg_tags(): array {
 				'fill-rule' => true,
 				'clip-rule' => true,
 				'd'         => true,
+				'opacity'   => true,
 				'transform' => true,
 			),
 			$stroke_attributes
@@ -55,6 +56,33 @@ function gutenberg_get_allowed_icon_svg_tags(): array {
 			),
 			$stroke_attributes
 		),
+		'rect'    => array_merge(
+			array(
+				'fill'      => true,
+				'fill-rule' => true,
+				'clip-rule' => true,
+				'x'         => true,
+				'y'         => true,
+				'width'     => true,
+				'height'    => true,
+				'rx'        => true,
+				'ry'        => true,
+				'transform' => true,
+			),
+			$stroke_attributes
+		),
+		'circle'  => array_merge(
+			array(
+				'fill'      => true,
+				'fill-rule' => true,
+				'clip-rule' => true,
+				'cx'        => true,
+				'cy'        => true,
+				'r'         => true,
+				'transform' => true,
+			),
+			$stroke_attributes
+		),
 	);
 }
 
@@ -260,8 +288,8 @@ public function unregister( $icon_name ) {
 	/**
 	 * Sanitizes the icon SVG content.
 	 *
-	 * Overrides the base class to allow stroke-related attributes and inline
-	 * styles required by stroke-based icons.
+	 * Overrides the base class to allow the `rect` and `circle` shapes, plus the
+	 * stroke-related attributes and inline styles required by stroke-based icons.
 	 *
 	 * The signature is intentionally left without type declarations to stay
 	 * compatible with the parent WP_Icons_Registry::sanitize_icon_content()

phpunit/class-wp-icons-registry-gutenberg-test.php

@@ -468,6 +468,35 @@ public function test_clip_rule_survives_sanitization( bool $use_file_path ) {
 		$this->assertStringContainsString( 'clip-rule="evenodd"', $icon['content'] );
 	}
 
+	/**
+	 * Should preserve `rect` and `circle` shapes when sanitizing registered icons.
+	 *
+	 * @dataProvider data_icon_content_sources
+	 *
+	 * @param bool $use_file_path Whether to register the icon from a file path.
+	 */
+	public function test_rect_and_circle_survive_sanitization( bool $use_file_path ) {
+		$rect     = '<rect x="4" y="5" width="16" height="14" rx="2" ry="2" fill="currentColor" stroke="currentColor" transform="rotate(45)" vector-effect="non-scaling-stroke" />';
+		$circle   = '<circle cx="12" cy="12" r="3" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" transform="rotate(45)" vector-effect="non-scaling-stroke" />';
+		$content  = '<svg viewBox="0 0 24 24" style="fill: none" stroke="currentColor" stroke-width="1.5">' . $rect . $circle . '</svg>';
+		$name     = 'test-collection/shapes-icon';
+		$settings = array(
+			'label' => 'Shapes Icon',
+		);
+
+		if ( $use_file_path ) {
+			$settings['file_path'] = $this->create_temp_icon_file( $content );
+		} else {
+			$settings['content'] = $content;
+		}
+
+		$this->assertTrue( $this->register( $name, $settings ) );
+
+		$icon = $this->registry->get_registered_icon( $name );
+		$this->assertStringContainsString( $rect, $icon['content'] );
+		$this->assertStringContainsString( $circle, $icon['content'] );
+	}
+
 	/**
 	 * Should fail to register an icon that provides both `content` and `file_path`.
 	 *