From 98f6267ed50dc544a1c01ca21ae38c9640bb44a5 Mon Sep 17 00:00:00 2001 From: Fahim Murshed Date: Sat, 1 Aug 2026 09:43:14 +0600 Subject: [PATCH] Replace alerts with WP notices; UI/SCSS/tests Replace window.alert calls with WordPress notices (createSuccessNotice/createErrorNotice) and delay navigation/reload by 1s so snackbars are visible. Import notices store where needed. Minor UI tweaks: replace edit icon with pencil and add aria-hidden to icons. Migrate SCSS @import usages to @use for @wordpress/base-styles (mixins and colors). Add unit tests for generateWpVersions covering normal and RC version inputs. These changes improve UX by showing non-blocking notifications and modernize styles imports and tests. --- src/admin-landing-page.scss | 4 +- src/editor-sidebar/create-panel.js | 33 +++++++++------ src/editor-sidebar/create-variation-panel.js | 13 +++--- .../editor-preferences-panel.js | 12 ++++-- src/editor-sidebar/reset-theme.js | 16 +++++--- src/editor-sidebar/save-panel.js | 41 ++++++++++--------- src/plugin-sidebar.js | 11 +++-- src/plugin-styles.scss | 2 +- src/test/unit.js | 21 ++++++++-- 9 files changed, 95 insertions(+), 58 deletions(-) diff --git a/src/admin-landing-page.scss b/src/admin-landing-page.scss index 19c6ef63..5a037b0e 100644 --- a/src/admin-landing-page.scss +++ b/src/admin-landing-page.scss @@ -1,5 +1,5 @@ -@import "../node_modules/@wordpress/base-styles/mixins"; -@include wordpress-admin-schemes(); +@use "../node_modules/@wordpress/base-styles/mixins"; +@include mixins.wordpress-admin-schemes(); .create-block-theme { diff --git a/src/editor-sidebar/create-panel.js b/src/editor-sidebar/create-panel.js index d1681270..806d2778 100644 --- a/src/editor-sidebar/create-panel.js +++ b/src/editor-sidebar/create-panel.js @@ -35,7 +35,8 @@ import { generateWpVersions } from '../utils/generate-versions'; const WP_MINIMUM_VERSIONS = generateWpVersions( WP_VERSION ); // eslint-disable-line no-undef export const CreateThemePanel = ( { createType } ) => { - const { createErrorNotice } = useDispatch( noticesStore ); + const { createErrorNotice, createSuccessNotice } = + useDispatch( noticesStore ); const [ theme, setTheme ] = useState( { name: '', @@ -58,14 +59,16 @@ export const CreateThemePanel = ( { createType } ) => { const handleCreateBlankClick = () => { createBlankTheme( theme ) .then( () => { - // eslint-disable-next-line no-alert - window.alert( + createSuccessNotice( __( 'Theme created successfully. The editor will now reload.', 'create-block-theme' - ) + ), + { type: 'snackbar' } ); - window.location.reload(); + setTimeout( () => { + window.location.reload(); + }, 1000 ); } ) .catch( ( error ) => { const errorMessage = @@ -81,14 +84,16 @@ export const CreateThemePanel = ( { createType } ) => { const handleCloneClick = () => { createClonedTheme( theme ) .then( () => { - // eslint-disable-next-line no-alert - window.alert( + createSuccessNotice( __( 'Theme cloned successfully. The editor will now reload.', 'create-block-theme' - ) + ), + { type: 'snackbar' } ); - window.location.reload(); + setTimeout( () => { + window.location.reload(); + }, 1000 ); } ) .catch( ( error ) => { const errorMessage = @@ -104,14 +109,16 @@ export const CreateThemePanel = ( { createType } ) => { const handleCreateChildClick = () => { createChildTheme( theme ) .then( () => { - // eslint-disable-next-line no-alert - window.alert( + createSuccessNotice( __( 'Child theme created successfully. The editor will now reload.', 'create-block-theme' - ) + ), + { type: 'snackbar' } ); - window.location.reload(); + setTimeout( () => { + window.location.reload(); + }, 1000 ); } ) .catch( ( error ) => { const errorMessage = diff --git a/src/editor-sidebar/create-variation-panel.js b/src/editor-sidebar/create-variation-panel.js index 48ad28f9..02b1acdf 100644 --- a/src/editor-sidebar/create-variation-panel.js +++ b/src/editor-sidebar/create-variation-panel.js @@ -29,7 +29,8 @@ const PREFERENCE_SCOPE = 'create-block-theme'; const PREFERENCE_KEY = 'create-variation'; export const CreateVariationPanel = () => { - const { createErrorNotice } = useDispatch( noticesStore ); + const { createErrorNotice, createSuccessNotice } = + useDispatch( noticesStore ); const [ theme, setTheme ] = useState( { name: '', @@ -62,14 +63,16 @@ export const CreateVariationPanel = () => { postCreateThemeVariation( variationPreferences ) .then( () => { - // eslint-disable-next-line no-alert - window.alert( + createSuccessNotice( __( 'Theme variation created successfully. The editor will now reload.', 'create-block-theme' - ) + ), + { type: 'snackbar' } ); - window.location.reload(); + setTimeout( () => { + window.location.reload(); + }, 1000 ); } ) .catch( ( error ) => { const errorMessage = diff --git a/src/editor-sidebar/editor-preferences-panel.js b/src/editor-sidebar/editor-preferences-panel.js index 6273b39c..8536b97b 100644 --- a/src/editor-sidebar/editor-preferences-panel.js +++ b/src/editor-sidebar/editor-preferences-panel.js @@ -4,6 +4,7 @@ import { __ } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as preferencesStore } from '@wordpress/preferences'; +import { store as noticesStore } from '@wordpress/notices'; import { // eslint-disable-next-line @wordpress/no-unsafe-wp-apis __experimentalVStack as VStack, @@ -32,17 +33,20 @@ export const EditorPreferencesPanel = () => { ); const { set: setPreference } = useDispatch( preferencesStore ); + const { createSuccessNotice } = useDispatch( noticesStore ); const handleToggle = ( value ) => { setPreference( PREFERENCE_SCOPE, PREFERENCE_KEY, value ); - // eslint-disable-next-line no-alert - window.alert( + createSuccessNotice( __( 'Preference updated. The editor will now reload.', 'create-block-theme' - ) + ), + { type: 'snackbar' } ); - window.location.reload(); + setTimeout( () => { + window.location.reload(); + }, 1000 ); }; return ( diff --git a/src/editor-sidebar/reset-theme.js b/src/editor-sidebar/reset-theme.js index 99da3782..5104ee5a 100644 --- a/src/editor-sidebar/reset-theme.js +++ b/src/editor-sidebar/reset-theme.js @@ -41,7 +41,8 @@ function ResetTheme() { }, [] ); const { set: setPreferences } = useDispatch( preferencesStore ); - const { createErrorNotice } = useDispatch( noticesStore ); + const { createErrorNotice, createSuccessNotice } = + useDispatch( noticesStore ); const [ isConfirmDialogOpen, setIsConfirmDialogOpen ] = useState( false ); const handleTogglePreference = ( key ) => { @@ -59,20 +60,23 @@ function ResetTheme() { try { await resetTheme( preferences ); toggleConfirmDialog(); - // eslint-disable-next-line no-alert - window.alert( + createSuccessNotice( __( 'Theme reset successfully. The editor will now reload.', 'create-block-theme' - ) + ), + { type: 'snackbar' } ); - window.location.reload(); + setTimeout( () => { + window.location.reload(); + }, 1000 ); } catch ( error ) { createErrorNotice( __( 'An error occurred while resetting the theme.', 'create-block-theme' - ) + ), + { type: 'snackbar' } ); } }; diff --git a/src/editor-sidebar/save-panel.js b/src/editor-sidebar/save-panel.js index 568cddf0..c05b13be 100644 --- a/src/editor-sidebar/save-panel.js +++ b/src/editor-sidebar/save-panel.js @@ -44,7 +44,8 @@ export const SaveThemePanel = () => { }; }, [] ); - const { createErrorNotice } = useDispatch( noticesStore ); + const { createErrorNotice, createSuccessNotice } = + useDispatch( noticesStore ); const { set: setPreference } = useDispatch( preferencesStore ); const handleTogglePreference = ( key ) => { @@ -64,29 +65,31 @@ export const SaveThemePanel = () => { }, } ) .then( () => { - // eslint-disable-next-line no-alert - window.alert( + createSuccessNotice( __( 'Theme saved successfully. The editor will now reload.', 'create-block-theme' - ) + ), + { type: 'snackbar' } ); - const searchParams = new URLSearchParams( - window?.location?.search - ); - // If user is editing a pattern and savePatterns is true, redirect back to the patterns page. - if ( - preference.savePatterns && - searchParams.get( 'postType' ) === 'wp_block' && - searchParams.get( 'postId' ) - ) { - window.location = - '/wp-admin/site-editor.php?postType=wp_block'; - } else { - // If user is not editing a pattern, reload the editor. - window.location.reload(); - } + setTimeout( () => { + const searchParams = new URLSearchParams( + window?.location?.search + ); + // If user is editing a pattern and savePatterns is true, redirect back to the patterns page. + if ( + preference.savePatterns && + searchParams.get( 'postType' ) === 'wp_block' && + searchParams.get( 'postId' ) + ) { + window.location = + '/wp-admin/site-editor.php?postType=wp_block'; + } else { + // If user is not editing a pattern, reload the editor. + window.location.reload(); + } + }, 1000 ); } ) .catch( ( error ) => { const errorMessage = diff --git a/src/plugin-sidebar.js b/src/plugin-sidebar.js index 2d283361..82f66f71 100644 --- a/src/plugin-sidebar.js +++ b/src/plugin-sidebar.js @@ -38,7 +38,7 @@ import { tool, copy, download, - edit, + pencil, code, chevronLeft, chevronRight, @@ -72,11 +72,14 @@ function PluginSidebarItem( { icon, path, children, onClick } ) { - + { path && ( - + @@ -157,7 +160,7 @@ const CreateBlockThemePlugin = () => { ) } setIsMetadataEditorOpen( true ) } diff --git a/src/plugin-styles.scss b/src/plugin-styles.scss index f80c7463..0a9088ad 100644 --- a/src/plugin-styles.scss +++ b/src/plugin-styles.scss @@ -1,4 +1,4 @@ -@import "~@wordpress/base-styles/colors"; +@use "@wordpress/base-styles/colors"; $modal-footer-height: 70px; diff --git a/src/test/unit.js b/src/test/unit.js index bdb9fe50..3d06b19c 100644 --- a/src/test/unit.js +++ b/src/test/unit.js @@ -1,7 +1,20 @@ -// TODO: Add unit tests as needed +/** + * Internal dependencies + */ +import { generateWpVersions } from '../utils/generate-versions'; -describe( 'Sample Unit Test', function () { - it( 'should pass', function () { - expect( true ).toBe( true ); +describe( 'generateWpVersions', () => { + it( 'should generate version list down to 5.9 for version 6.5', () => { + const versions = generateWpVersions( '6.5' ); + expect( versions[ 0 ] ).toBe( '6.5' ); + expect( versions[ versions.length - 1 ] ).toBe( '5.9' ); + expect( versions ).toContain( '6.0' ); + expect( versions ).toContain( '5.9' ); + } ); + + it( 'should handle versions with release candidate suffixes', () => { + const versions = generateWpVersions( '6.2-RC1' ); + expect( versions[ 0 ] ).toBe( '6.2' ); + expect( versions[ versions.length - 1 ] ).toBe( '5.9' ); } ); } );