Review fixes

README.md

@@ -186,7 +186,25 @@ The Brand Assets plugin includes a comprehensive settings page accessible via:
 | Link Text | Text for the link to your brand assets page | "brand assets" |
 | Logo Selector | CSS selector for the logo element | ".wp-block-site-logo" |
 | CSS Loading Mode | Choose how CSS should be loaded for the popover | "Load the default CSS" |
-| Custom Popover CSS | Custom CSS for styling the popover (only shown when CSS Loading Mode is set to "Load custom CSS") | Empty |
+
+### Popover Styling Options
+
+Customize the visual appearance of the logo popover with these settings:
+
+| Setting | Description | Default |
+|---------|-------------|---------|
+| Background Color | Background color of the popover | #ffffff (white) |
+| Text Color | Text color in the popover | #000000 (black) |
+| Link Color | Color of links in the popover | #0073aa (blue) |
+| Border Color | Border color of the popover | #cccccc (light gray) |
+| Close Button Color | Color of the close button | #666666 (gray) |
+| Border Width | Border width in pixels | 1px |
+| Border Radius | Border radius in pixels for rounded corners | 8px |
+| Padding | Internal padding in pixels | 20px |
+| Max Width | Maximum width of the popover in pixels | 400px |
+| Font Size | Font size in pixels | 16px |
+
+**Note:** These styling options use CSS custom properties (CSS variables) under the hood, providing a safe and WordPress.org-compliant way to customize the popover appearance without allowing arbitrary CSS input.
 
 ## Developer Hooks
 
@@ -206,26 +224,33 @@ Filter the path to the frontend CSS file used for styling the logo popover.
 **Example:**
 ```php
 add_filter( 'brand_assets_frontend_css_path', function( $path ) {
-    return get_template_directory() . '/custom-brand-assets.css';
+    return get_stylesheet_directory() . '/custom-brand-assets.css';
 });
 ```
 
+**Custom CSS for Popover:**
+If you need to customize the popover styling, create a custom CSS file in your theme and use the filter above to point to it. Then set the CSS Loading Mode to "Load no CSS" in the plugin settings if you want to completely replace the default styles, or leave it as "Load the default CSS" to extend the default styles.
+
+Example custom CSS file location: `wp-content/themes/your-theme/custom-brand-assets.css`
+
 #### `brand_assets_pattern_file_path`
 
 Filter the path to the brand page pattern file used for block pattern registration.
 
 **Parameters:**
 - `string $pattern_file_path` - The path to the pattern file
 
-**Default:** `BRAND_ASSETS_PLUGIN_DIR . 'includes/brand-page-pattern.inc'`
+**Default:** `BRAND_ASSETS_PLUGIN_DIR . 'includes/brand-page-pattern.php'`
 
 **Example:**
 ```php
 add_filter( 'brand_assets_pattern_file_path', function( $path ) {
-    return get_template_directory() . '/custom-brand-pattern.inc';
+    return get_template_directory() . '/custom-brand-pattern.php';
 });
 ```
 
+**Note:** The pattern file should return a string containing valid WordPress block markup.
+
 ## Architecture
 
 The Brand Assets plugin is built using modern object-oriented PHP with the following structure:

assets/admin.js

@@ -0,0 +1,39 @@
+/**
+ * Brand Assets Admin JavaScript
+ *
+ * Handles admin settings page functionality including:
+ * - Color picker initialization
+ * - CSS loading mode toggle for popover styling section
+ *
+ * @package
+ * @since 0.1.0
+ */
+
+/* global jQuery */
+
+jQuery( document ).ready( function ( $ ) {
+	// Initialize WordPress color pickers
+	$( '.brand-assets-color-picker' ).wpColorPicker();
+
+	/**
+	 * Toggle popover styling section visibility based on CSS loading mode
+	 *
+	 * When "Load no CSS" is selected, hide the styling options and show
+	 * an informational notice instead, since CSS variables won't be output.
+	 */
+	function togglePopoverStyling() {
+		if ( $( '#css_loading_mode' ).val() === 'none' ) {
+			$( '#popover-styling-section' ).hide();
+			$( '#popover-styling-notice' ).show();
+		} else {
+			$( '#popover-styling-section' ).show();
+			$( '#popover-styling-notice' ).hide();
+		}
+	}
+
+	// Run on page load
+	togglePopoverStyling();
+
+	// Run when CSS loading mode changes
+	$( '#css_loading_mode' ).on( 'change', togglePopoverStyling );
+} );

assets/copy-color.js

@@ -0,0 +1,64 @@
+/**
+ * Copy color values to clipboard when clicking color swatches
+ *
+ * @package
+ * @since 0.1.0
+ */
+
+/* global navigator */
+
+document.addEventListener( 'DOMContentLoaded', function () {
+	// Copy the color value to clipboard when clicking the color swatch.
+	const colorElements = document.querySelectorAll(
+		'.wp-block-brand-assets-brand-assets .swatch code'
+	);
+
+	if ( 0 < colorElements.length ) {
+		colorElements.forEach( ( element ) => {
+			element.addEventListener( 'click', async function ( event ) {
+				event.preventDefault();
+				let color = element.textContent;
+
+				// Remove the "CMYK: " prefix if it exists.
+				if ( color.startsWith( 'CMYK:' ) ) {
+					color = color.substring( 5 );
+				}
+
+				color = color.trim();
+
+				// Try modern Clipboard API first
+				try {
+					await navigator.clipboard.writeText( color );
+
+					// Add visual feedback
+					element.classList.add( 'copied' );
+					setTimeout( () => {
+						element.classList.remove( 'copied' );
+					}, 500 );
+				} catch ( err ) {
+					// Fallback to execCommand
+					const textArea = document.createElement( 'textarea' );
+					textArea.value = color;
+					textArea.style.position = 'fixed';
+					textArea.style.left = '-999999px';
+					document.body.appendChild( textArea );
+					textArea.select();
+
+					try {
+						document.execCommand( 'copy' );
+
+						// Add visual feedback
+						element.classList.add( 'copied' );
+						setTimeout( () => {
+							element.classList.remove( 'copied' );
+						}, 500 );
+					} catch ( fallbackErr ) {
+						console.error( 'Fallback copy failed:', fallbackErr ); // eslint-disable-line no-console
+					}
+
+					document.body.removeChild( textArea );
+				}
+			} );
+		} );
+	}
+} );

assets/frontend.css

@@ -1,35 +1,64 @@
 #brand_assets_logo_popover {
-	padding: 30px;
-	border-radius: 10px;
+	/* CSS Custom Properties - can be overridden via plugin settings */
+	--ba-popover-bg: #ffffff;
+	--ba-popover-text-color: #000000;
+	--ba-popover-link-color: #0073aa;
+	--ba-popover-border-color: #cccccc;
+	--ba-popover-border-width: 1px;
+	--ba-popover-border-radius: 8px;
+	--ba-popover-padding: 20px;
+	--ba-popover-max-width: 400px;
+	--ba-popover-font-size: 16px;
+	--ba-close-btn-color: #666666;
+
+	/* Apply custom properties */
+	background: var(--ba-popover-bg);
+	color: var(--ba-popover-text-color);
+	border: var(--ba-popover-border-width) solid var(--ba-popover-border-color);
+	border-radius: var(--ba-popover-border-radius);
+	padding: var(--ba-popover-padding);
+	max-width: var(--ba-popover-max-width);
+	font-size: var(--ba-popover-font-size);
 
 	&::backdrop {
 		background: rgba(0, 0, 0, 0.75);
 	}
 	h1 {
 		font-size: 1.2em;
+		color: var(--ba-popover-text-color);
+		margin: 0 0 15px 0;
 	}
 	p {
-		margin: 20px 0;
+		margin: 10px 0;
 		line-height: 1.5;
+		color: var(--ba-popover-text-color);
 	}
 	a {
+		color: var(--ba-popover-link-color);
 		font-weight: bold;
 		text-decoration: underline;
+
+		&:hover {
+			opacity: 0.8;
+		}
 	}
 	button.close {
 		border: none;
-		background-color: #fff;
-		color: #ddd;
-		font-size: 1em;
+		background-color: transparent;
+		color: var(--ba-close-btn-color);
+		font-size: 1.5em;
 		font-weight: bold;
 		position: absolute;
 		right: 8px;
 		top: 5px;
 		padding: 5px;
+		line-height: 1;
+		width: 30px;
+		height: 30px;
+		cursor: pointer;
 
 		&:hover {
-			cursor: pointer;
-			color: #000;
+			opacity: 0.7;
 		}
 	}
 }

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'ce375e68084c33fab22b');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '39a3599e4610c02caf8e');