Replace editor icon with branding admin menu icon

assets/css/editor.css

@@ -1,14 +1,11 @@
 .components-button {
 
-	svg.progress-planner-icon {
+	.progress-planner-icon {
+		color: #38296d;
 
-		#path1,
-		#path3 {
-			fill: #38296d !important;
-		}
-
-		#path2 {
-			fill: #faa310 !important;
+		svg {
+			width: 100%;
+			height: 100%;
 		}
 	}
 
@@ -22,11 +19,11 @@
 			background: #38296d !important;
 		}
 
-		svg.progress-planner-icon {
+		.progress-planner-icon {
+			color: #fff;
 
-			#path1,
-			#path3 {
-				fill: #fff !important;
+			svg path {
+				fill: #fff;
 			}
 		}
 	}

assets/js/editor.js

@@ -652,40 +652,24 @@ registerPlugin( 'progress-planner-sidebar', {
 } );
 
 /**
- * SVG Icon Component.
+ * Icon Component using branding admin menu icon.
+ *
+ * Renders raw SVG inline so it can be styled with CSS (e.g., currentColor).
  *
  * @return {Element} Element to render.
  */
 const PrplIcon = () =>
-	el(
-		'svg',
-		{
-			role: 'img',
-			className: 'progress-planner-icon',
-			xmlns: 'http://www.w3.org/2000/svg',
-			viewBox: '0 0 500 500',
+	el( 'span', {
+		className: 'progress-planner-icon',
+		style: {
+			display: 'inline-flex',
+			width: '20px',
+			height: '20px',
 		},
-		[
-			el( 'path', {
-				key: 'path1',
-				id: 'path1',
-				stroke: 'none',
-				d: 'M 283.460022 172.899994 C 286.670013 173.02002 289.429993 174.640015 291.190002 177.049988 C 289.320007 166.809998 280.550018 158.880005 269.710022 158.48999 C 257.190002 158.039978 246.679993 167.820007 246.229996 180.339996 C 245.779999 192.859985 255.559998 203.369995 268.080017 203.820007 C 277.480011 204.160004 285.75 198.720001 289.480011 190.690002 C 287.649994 192.200012 285.300018 193.109985 282.740021 193.02002 C 277.190002 192.820007 272.850006 188.160004 273.050018 182.609985 C 273.25 177.059998 277.910004 172.720001 283.460022 172.919983 Z M 307.51001 305.839996 C 308.089996 307.76001 308.640015 309.700012 309.240021 311.609985 C 323.279999 356.579987 343.179993 400.359985 365.660004 435.880005 L 433.410004 305.839996 L 307.51001 305.839996 Z M 363.959991 205.970001 C 376.079987 201.470001 387.5 198.789978 397.600006 197.01001 C 375.089996 174.73999 336.359985 169.950012 336.130005 169.919983 C 337.399994 176.089996 336.709991 185.720001 333.690002 196.380005 C 330.390015 208.039978 324.309998 220.919983 314.990021 231.859985 C 311.540009 235.919983 307.630005 239.690002 303.26001 243.049988 L 303.330017 243.049988 L 303.330017 243.039978 C 303.490021 243.660004 303.710022 244.240005 303.910004 244.830002 C 306.649994 253.100006 312.52002 258.570007 318.839996 261.970001 C 325.320007 265.459991 332.209991 266.799988 336.519989 266.799988 C 342.920013 266.799988 348.399994 263.01001 350.950012 257.579987 C 351.920013 255.520004 352.5 253.25 352.5 250.820007 C 352.5 246.970001 351.079987 243.47998 348.809998 240.720001 C 346.890015 238.390015 344.350006 236.640015 341.420013 235.690002 L 386.23999 227.039978 C 379.609985 220.919983 371.519989 215.450012 363.51001 210.809998 C 361.540009 209.669983 361.820007 206.76001 363.959991 205.970001 Z',
-			} ),
-			el( 'path', {
-				key: 'path2',
-				id: 'path2',
-				stroke: 'none',
-				d: 'M 347.369995 458.369995 C 321.579987 419.529999 298.690002 370.329987 282.919983 319.829987 C 281.470001 315.200012 280.089996 310.519989 278.75 305.839996 C 277.630005 301.899994 276.529999 297.959991 275.5 294.040009 C 273.410004 286.119995 266.220001 280.579987 258.019989 280.579987 L 230.070007 280.579987 C 221.869995 280.579987 214.679993 286.109985 212.589996 294.029999 C 210.309998 302.679993 207.809998 311.350006 205.169998 319.820007 C 189.399994 370.320007 166.519989 419.519989 140.720001 458.359985 C 136.709991 464.390015 138.940002 469.98999 140.080002 472.119995 C 142.479996 476.589996 146.940002 479.26001 152.019989 479.26001 L 218.029999 479.26001 L 222 486.179993 C 226.539993 494.079987 234.990005 498.98999 244.050003 498.98999 C 253.110001 498.98999 261.559998 494.079987 266.109985 486.179993 L 270.089996 479.26001 L 336.089996 479.26001 C 339.309998 479.26001 342.279999 478.179993 344.640015 476.23999 C 345.98999 475.130005 347.149994 473.75 348.019989 472.109985 C 348.589996 471.040009 349.440002 469.089996 349.630005 466.649994 C 349.820007 464.23999 349.369995 461.339996 347.380005 458.339996 Z',
-			} ),
-			el( 'path', {
-				key: 'path3',
-				id: 'path3',
-				stroke: 'none',
-				d: 'M 361.700012 76.059998 C 354.160004 64.01001 329.320007 77.059998 302.160004 78.919983 C 287.119995 79.950012 265.110016 -31.710022 230.389999 21.929993 C 190.830002 83.029999 151.270004 -22.75 141.730011 6.100006 C 120.620003 49.369995 166.880005 90.709991 166.880005 90.709991 C 166.880005 90.709991 154.040009 98.630005 146.25 104.640015 C 140.779999 108.809998 135.430008 113.290009 130.220001 118.149994 C 109.770004 137.179993 94.18 158.470001 83.450005 182.01001 C 72.720001 205.549988 67.110001 229.589996 66.620003 254.149994 C 66.129997 278.709991 70.629997 303.25 80.160004 327.779999 C 89.68 352.309998 104.330002 375.200012 124.110001 396.459991 C 128.130005 400.779999 132.230011 404.869995 136.419998 408.76001 C 140.520004 402.450012 144.389999 396.019989 148.059998 389.5 C 152.449997 381.700012 156.559998 373.779999 160.309998 365.720001 C 159.980011 365.369995 159.650009 365.029999 159.320007 364.690002 C 159.150009 364.51001 158.980011 364.339996 158.809998 364.160004 C 143.279999 347.470001 131.639999 329.570007 123.880005 310.440002 C 116.110001 291.309998 112.380005 272.190002 112.68 253.080002 C 112.970001 233.97998 117.150002 215.399994 125.209999 197.359985 C 133.270004 179.309998 145.230011 162.910004 161.110001 148.140015 C 175.100006 135.119995 189.949997 125.309998 205.660004 118.730011 C 221.360001 112.140015 237.289993 108.75 253.419998 108.549988 C 262.470001 108.440002 272.529999 109.700012 282.929993 113.049988 C 293.25 117.320007 302.149994 122.48999 309.559998 128.399994 C 319.75 136.529999 327.170013 146.049988 331.779999 156.5 C 333.690002 160.820007 335.149994 165.299988 336.100006 169.910004 C 352.369995 141.640015 372.850006 93.950012 361.670013 76.080017 Z',
-			} ),
-		]
-	);
+		dangerouslySetInnerHTML: {
+			__html: progressPlannerEditor.adminMenuIconSvg,
+		},
+	} );
 
 /**
  * Render the Progress Planner post status.

classes/admin/class-editor.php

@@ -47,9 +47,10 @@ public function enqueue_editor_script() {
 			[
 				'name' => 'progressPlannerEditor',
 				'data' => [
-					'lessons'         => \progress_planner()->get_lessons()->get_items(),
-					'pageTypes'       => $page_types,
-					'defaultPageType' => $prpl_preselected_page_type,
+					'lessons'          => \progress_planner()->get_lessons()->get_items(),
+					'pageTypes'        => $page_types,
+					'defaultPageType'  => $prpl_preselected_page_type,
+					'adminMenuIconSvg' => \progress_planner()->get_ui__branding()->get_admin_menu_icon( true ),
 				],
 			]
 		);

classes/ui/class-branding.php

@@ -127,31 +127,39 @@ public function get_custom_css(): string {
 	/**
 	 * Get the admin-menu icon.
 	 *
-	 * @return string
+	 * @param bool $raw Whether to return raw SVG markup (true) or base64 data URI (false).
+	 *
+	 * @return string SVG markup or base64-encoded data URI.
 	 */
-	public function get_admin_menu_icon(): string {
-		$icon = 'data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIGFyaWEtaGlkZGVuPSJ0cnVlIiBmb2N1c2FibGU9ImZhbHNlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNjggNTAwIj48cGF0aCBmaWxsPSIjMzgyOTZkIiBkPSJNMjE3LjQ2IDE3Mi45YzMuMjEuMTIgNS45NyAxLjc0IDcuNzMgNC4xNS0xLjg3LTEwLjI0LTEwLjY0LTE4LjE3LTIxLjQ4LTE4LjU2LTEyLjUyLS40NS0yMy4wMyA5LjMzLTIzLjQ4IDIxLjg1LS40NSAxMi41MiA5LjMzIDIzLjAzIDIxLjg1IDIzLjQ4IDkuNC4zNCAxNy42Ny01LjEgMjEuNC0xMy4xMy0xLjgzIDEuNTEtNC4xOCAyLjQyLTYuNzQgMi4zMy01LjU1LS4yLTkuODktNC44Ni05LjY5LTEwLjQxLjItNS41NSA0Ljg2LTkuODkgMTAuNDEtOS42OVpNMjQxLjUxIDMwNS44NGMuNTggMS45MiAxLjEzIDMuODYgMS43MyA1Ljc3IDE0LjA0IDQ0Ljk3IDMzLjk0IDg4Ljc1IDU2LjQyIDEyNC4yN2w2Ny43NS0xMzAuMDRoLTEyNS45Wk0yOTcuOTYgMjA1Ljk3YzEyLjEyLTQuNSAyMy41NC03LjE4IDMzLjY0LTguOTYtMjIuNTEtMjIuMjctNjEuMjQtMjcuMDYtNjEuNDctMjcuMDkgMS4yNyA2LjE3LjU4IDE1LjgtMi40NCAyNi40Ni0zLjMgMTEuNjYtOS4zOCAyNC41NC0xOC43IDM1LjQ4LTMuNDUgNC4wNi03LjM2IDcuODMtMTEuNzMgMTEuMTloLjA3di0uMDFjLjE2LjYyLjM4IDEuMi41OCAxLjc5IDIuNzQgOC4yNyA4LjYxIDEzLjc0IDE0LjkzIDE3LjE0IDYuNDggMy40OSAxMy4zNyA0LjgzIDE3LjY4IDQuODMgNi40IDAgMTEuODgtMy43OSAxNC40My05LjIyLjk3LTIuMDYgMS41NS00LjMzIDEuNTUtNi43NiAwLTMuODUtMS40Mi03LjM0LTMuNjktMTAuMS0xLjkyLTIuMzMtNC40Ni00LjA4LTcuMzktNS4wM2w0NC44Mi04LjY1Yy02LjYzLTYuMTItMTQuNzItMTEuNTktMjIuNzMtMTYuMjMtMS45Ny0xLjE0LTEuNjktNC4wNS40NS00Ljg0WiIvPjxwYXRoIGZpbGw9IiNmYWEzMTAiIGQ9Ik0yODEuMzcgNDU4LjM3Yy0yNS43OS0zOC44NC00OC42OC04OC4wNC02NC40NS0xMzguNTQtMS40NS00LjYzLTIuODMtOS4zMS00LjE3LTEzLjk5LTEuMTItMy45NC0yLjIyLTcuODgtMy4yNS0xMS44LTIuMDktNy45Mi05LjI4LTEzLjQ2LTE3LjQ4LTEzLjQ2aC0yNy45NWMtOC4yIDAtMTUuMzkgNS41My0xNy40OCAxMy40NS0yLjI4IDguNjUtNC43OCAxNy4zMi03LjQyIDI1Ljc5LTE1Ljc3IDUwLjUtMzguNjUgOTkuNy02NC40NSAxMzguNTQtNC4wMSA2LjAzLTEuNzggMTEuNjMtLjY0IDEzLjc2IDIuNCA0LjQ3IDYuODYgNy4xNCAxMS45NCA3LjE0aDY2LjAxbDMuOTcgNi45MmM0LjU0IDcuOSAxMi45OSAxMi44MSAyMi4wNSAxMi44MXMxNy41MS00LjkxIDIyLjA2LTEyLjgxbDMuOTgtNi45Mmg2NmMzLjIyIDAgNi4xOS0xLjA4IDguNTUtMy4wMiAxLjM1LTEuMTEgMi41MS0yLjQ5IDMuMzgtNC4xMy41Ny0xLjA3IDEuNDItMy4wMiAxLjYxLTUuNDYuMTktMi40MS0uMjYtNS4zMS0yLjI1LTguMzFaIi8+PHBhdGggZmlsbD0iIzM4Mjk2ZCIgZD0iTTI5NS43IDc2LjA2Yy03LjU0LTEyLjA1LTMyLjM4IDEtNTkuNTQgMi44Ni0xNS4wNCAxLjAzLTM3LjA1LTExMC42My03MS43Ny01Ni45OS0zOS41NiA2MS4xLTc5LjEyLTQ0LjY4LTg4LjY2LTE1LjgzLTIxLjExIDQzLjI3IDI1LjE1IDg0LjYxIDI1LjE1IDg0LjYxcy0xMi44NCA3LjkyLTIwLjYzIDEzLjkzYy01LjQ3IDQuMTctMTAuODIgOC42NS0xNi4wMyAxMy41MS0yMC40NSAxOS4wMy0zNi4wNCA0MC4zMi00Ni43NyA2My44NkM2LjcyIDIwNS41NSAxLjExIDIyOS41OS42MiAyNTQuMTVjLS40OSAyNC41NiA0LjAxIDQ5LjEgMTMuNTQgNzMuNjMgOS41MiAyNC41MyAyNC4xNyA0Ny40MiA0My45NSA2OC42OCA0LjAyIDQuMzIgOC4xMiA4LjQxIDEyLjMxIDEyLjMgNC4xLTYuMzEgNy45Ny0xMi43NCAxMS42NC0xOS4yNiA0LjM5LTcuOCA4LjUtMTUuNzIgMTIuMjUtMjMuNzgtLjMzLS4zNS0uNjYtLjY5LS45OS0xLjAzLS4xNy0uMTgtLjM0LS4zNS0uNTEtLjUzLTE1LjUzLTE2LjY5LTI3LjE3LTM0LjU5LTM0LjkzLTUzLjcyLTcuNzctMTkuMTMtMTEuNS0zOC4yNS0xMS4yLTU3LjM2LjI5LTE5LjEgNC40Ny0zNy42OCAxMi41My01NS43MiA4LjA2LTE4LjA1IDIwLjAyLTM0LjQ1IDM1LjktNDkuMjIgMTMuOTktMTMuMDIgMjguODQtMjIuODMgNDQuNTUtMjkuNDEgMTUuNy02LjU5IDMxLjYzLTkuOTggNDcuNzYtMTAuMTggOS4wNS0uMTEgMTkuMTEgMS4xNSAyOS41MSA0LjUgMTAuMzIgNC4yNyAxOS4yMiA5LjQ0IDI2LjYzIDE1LjM1IDEwLjE5IDguMTMgMTcuNjEgMTcuNjUgMjIuMjIgMjguMSAxLjkxIDQuMzIgMy4zNyA4LjggNC4zMiAxMy40MSAxNi4yNy0yOC4yNyAzNi43NS03NS45NiAyNS41Ny05My44M1oiLz48L3N2Zz4=';
-
+	public function get_admin_menu_icon( bool $raw = false ): string {
 		$admin_menu_icon_id = empty( $this->get_api_data() ) || empty( $this->get_api_data()['admin_menu_icon'] )
 			? ''
 			: $this->get_api_data()['admin_menu_icon'];
 
+		// Default SVG with brand colors (purple #38296d and orange #faa310).
+		$svg = '<svg role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 368 500"><path fill="#38296d" d="M217.46 172.9c3.21.12 5.97 1.74 7.73 4.15-1.87-10.24-10.64-18.17-21.48-18.56-12.52-.45-23.03 9.33-23.48 21.85-.45 12.52 9.33 23.03 21.85 23.48 9.4.34 17.67-5.1 21.4-13.13-1.83 1.51-4.18 2.42-6.74 2.33-5.55-.2-9.89-4.86-9.69-10.41.2-5.55 4.86-9.89 10.41-9.69ZM241.51 305.84c.58 1.92 1.13 3.86 1.73 5.77 14.04 44.97 33.94 88.75 56.42 124.27l67.75-130.04h-125.9ZM297.96 205.97c12.12-4.5 23.54-7.18 33.64-8.96-22.51-22.27-61.24-27.06-61.47-27.09 1.27 6.17.58 15.8-2.44 26.46-3.3 11.66-9.38 24.54-18.7 35.48-3.45 4.06-7.36 7.83-11.73 11.19h.07v-.01c.16.62.38 1.2.58 1.79 2.74 8.27 8.61 13.74 14.93 17.14 6.48 3.49 13.37 4.83 17.68 4.83 6.4 0 11.88-3.79 14.43-9.22.97-2.06 1.55-4.33 1.55-6.76 0-3.85-1.42-7.34-3.69-10.1-1.92-2.33-4.46-4.08-7.39-5.03l44.82-8.65c-6.63-6.12-14.72-11.59-22.73-16.23-1.97-1.14-1.69-4.05.45-4.84Z"/><path fill="#faa310" d="M281.37 458.37c-25.79-38.84-48.68-88.04-64.45-138.54-1.45-4.63-2.83-9.31-4.17-13.99-1.12-3.94-2.22-7.88-3.25-11.8-2.09-7.92-9.28-13.46-17.48-13.46h-27.95c-8.2 0-15.39 5.53-17.48 13.45-2.28 8.65-4.78 17.32-7.42 25.79-15.77 50.5-38.65 99.7-64.45 138.54-4.01 6.03-1.78 11.63-.64 13.76 2.4 4.47 6.86 7.14 11.94 7.14h66.01l3.97 6.92c4.54 7.9 12.99 12.81 22.05 12.81s17.51-4.91 22.06-12.81l3.98-6.92h66c3.22 0 6.19-1.08 8.55-3.02 1.35-1.11 2.51-2.49 3.38-4.13.57-1.07 1.42-3.02 1.61-5.46.19-2.41-.26-5.31-2.25-8.31Z"/><path fill="#38296d" d="M295.7 76.06c-7.54-12.05-32.38 1-59.54 2.86-15.04 1.03-37.05-110.63-71.77-56.99-39.56 61.1-79.12-44.68-88.66-15.83-21.11 43.27 25.15 84.61 25.15 84.61s-12.84 7.92-20.63 13.93c-5.47 4.17-10.82 8.65-16.03 13.51-20.45 19.03-36.04 40.32-46.77 63.86C6.72 205.55 1.11 229.59.62 254.15c-.49 24.56 4.01 49.1 13.54 73.63 9.52 24.53 24.17 47.42 43.95 68.68 4.02 4.32 8.12 8.41 12.31 12.3 4.1-6.31 7.97-12.74 11.64-19.26 4.39-7.8 8.5-15.72 12.25-23.78-.33-.35-.66-.69-.99-1.03-.17-.18-.34-.35-.51-.53-15.53-16.69-27.17-34.59-34.93-53.72-7.77-19.13-11.5-38.25-11.2-57.36.29-19.1 4.47-37.68 12.53-55.72 8.06-18.05 20.02-34.45 35.9-49.22 13.99-13.02 28.84-22.83 44.55-29.41 15.7-6.59 31.63-9.98 47.76-10.18 9.05-.11 19.11 1.15 29.51 4.5 10.32 4.27 19.22 9.44 26.63 15.35 10.19 8.13 17.61 17.65 22.22 28.1 1.91 4.32 3.37 8.8 4.32 13.41 16.27-28.27 36.75-75.96 25.57-93.83Z"/></svg>';
+
 		if ( $admin_menu_icon_id ) {
-			// Get the logo URL.
+			// Get the icon URL from the API.
 			$response = $this->get_remote_data( \progress_planner()->get_remote_server_root_url() . '/wp-json/wp/v2/media/' . $admin_menu_icon_id );
 			if ( $response ) {
 				$media = \json_decode( $response, true );
 				if ( \is_array( $media ) && \array_key_exists( 'source_url', $media ) ) {
-					// Get the content of the image.
+					// Get the content of the SVG.
 					$content = $this->get_remote_data( $media['source_url'] );
 					if ( $content ) {
-						$icon = 'data:image/svg+xml;base64,' . \base64_encode( $content ); // phpcs:ignore WordPress.PHP.DiscouragedPHPFunctions.obfuscation_base64_encode
+						$svg = $content;
 					}
 				}
 			}
 		}
 
-		return $icon;
+		if ( $raw ) {
+			return $svg;
+		}
+
+		// phpcs:ignore WordPress.PHP.DiscouragedPHPFunctions.obfuscation_base64_encode
+		return 'data:image/svg+xml;base64,' . \base64_encode( $svg );
 	}
 
 	/**