From da4fafdad9bcf5ed6f5379d4e8b3675852bfbfd4 Mon Sep 17 00:00:00 2001
From: madhusudhand <madhusudhan.dollu@gmail.com>
Date: Wed, 15 May 2024 14:59:15 +0530
Subject: [PATCH 1/3] update modal width to 65vw

---
 admin/class-create-theme.php                |  8 ++++++
 src/editor-sidebar/json-editor-modal.js     |  1 +
 src/editor-sidebar/metadata-editor-modal.js | 19 ++++++-------
 src/plugin-sidebar.js                       |  1 +
 src/plugin-styles.scss                      | 30 +++++++++++++++++++++
 5 files changed, 50 insertions(+), 9 deletions(-)
 create mode 100644 src/plugin-styles.scss

diff --git a/admin/class-create-theme.php b/admin/class-create-theme.php
index 50fde92d..b9e65714 100644
--- a/admin/class-create-theme.php
+++ b/admin/class-create-theme.php
@@ -51,8 +51,16 @@ function create_block_theme_enqueue() {
 			$asset_file['dependencies'],
 			$asset_file['version']
 		);
+		wp_enqueue_style(
+			'create-block-theme-styles',
+			plugins_url( 'build/plugin-sidebar.css', dirname( __FILE__ ) ),
+			false,
+			$asset_file['version'],
+			'all'
+		);
 		wp_enqueue_script(
 			'create-block-theme-slot-fill',
+			'create-block-theme-styles'
 		);
 
 		// Enable localization in the plugin sidebar.
diff --git a/src/editor-sidebar/json-editor-modal.js b/src/editor-sidebar/json-editor-modal.js
index 3776fee5..afdba2bb 100644
--- a/src/editor-sidebar/json-editor-modal.js
+++ b/src/editor-sidebar/json-editor-modal.js
@@ -40,6 +40,7 @@ const ThemeJsonEditorModal = ( { onRequestClose } ) => {
 				themeName
 			) }
 			onRequestClose={ onRequestClose }
+			className="create-block-theme__theme-json-modal"
 		>
 			<CodeMirror
 				extensions={ [ json() ] }
diff --git a/src/editor-sidebar/metadata-editor-modal.js b/src/editor-sidebar/metadata-editor-modal.js
index ba8bd44f..b061cc61 100644
--- a/src/editor-sidebar/metadata-editor-modal.js
+++ b/src/editor-sidebar/metadata-editor-modal.js
@@ -115,6 +115,7 @@ export const ThemeMetadataEditorModal = ( { onRequestClose } ) => {
 				theme?.name
 			) }
 			onRequestClose={ onRequestClose }
+			className="create-block-theme__metadata-editor-modal"
 		>
 			<VStack>
 				<Text>
@@ -245,12 +246,7 @@ Plugin Description`,
 										<VStack alignment="left">
 											<img
 												src={ theme.screenshot }
-												style={ {
-													maxWidth: '200px',
-													height: 'auto',
-													aspectRatio: '4 / 3',
-													objectFit: 'cover',
-												} }
+												className="create-block-theme__metadata-editor-modal__screenshot"
 												alt=""
 											/>
 											<Button
@@ -293,9 +289,14 @@ Plugin Description`,
 				/>
 			</VStack>
 			<Spacer />
-			<Button variant="primary" onClick={ handleUpdateClick }>
-				{ __( 'Update', 'create-block-theme' ) }
-			</Button>
+			<HStack
+				justify={ 'flex-end' }
+				className="create-block-theme__metadata-editor-modal__footer"
+			>
+				<Button variant="primary" onClick={ handleUpdateClick }>
+					{ __( 'Update', 'create-block-theme' ) }
+				</Button>
+			</HStack>
 		</Modal>
 	);
 };
diff --git a/src/plugin-sidebar.js b/src/plugin-sidebar.js
index 71ba269e..6dae1eed 100644
--- a/src/plugin-sidebar.js
+++ b/src/plugin-sidebar.js
@@ -53,6 +53,7 @@ import { ThemeMetadataEditorModal } from './editor-sidebar/metadata-editor-modal
 import ScreenHeader from './editor-sidebar/screen-header';
 import { downloadExportedTheme } from './resolvers';
 import { downloadFile } from './utils';
+import './plugin-styles.scss';
 
 const CreateBlockThemePlugin = () => {
 	const [ isEditorOpen, setIsEditorOpen ] = useState( false );
diff --git a/src/plugin-styles.scss b/src/plugin-styles.scss
new file mode 100644
index 00000000..efd9bdb7
--- /dev/null
+++ b/src/plugin-styles.scss
@@ -0,0 +1,30 @@
+$plugin-prefix: "create-block-theme";
+$modal-footer-height: 70px;
+
+.#{$plugin-prefix} {
+	&__metadata-editor-modal {
+		width: 65vw !important;
+		padding-bottom: $modal-footer-height;
+
+		&__footer {
+			border-top: 1px solid #ddd;
+			background-color: #fff;
+			position: absolute;
+			bottom: 0;
+			margin: 0 -32px;
+			padding: 16px 32px;
+			height: $modal-footer-height;
+		}
+
+		&__screenshot {
+			max-width: 200px;
+			height: auto;
+			aspect-ratio: 4 / 3;
+			object-fit: cover;
+		}
+	}
+
+	&__theme-json-modal {
+		width: 65vw !important;
+	}
+}

From 1e81d1333663477419cc4b1df511499a0ca2425e Mon Sep 17 00:00:00 2001
From: madhusudhand <madhusudhan.dollu@gmail.com>
Date: Wed, 22 May 2024 15:02:54 +0200
Subject: [PATCH 2/3] set the modal size to large

---
 admin/class-create-theme.php                | 1 -
 src/editor-sidebar/json-editor-modal.js     | 2 +-
 src/editor-sidebar/metadata-editor-modal.js | 2 +-
 src/plugin-styles.scss                      | 5 -----
 4 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/admin/class-create-theme.php b/admin/class-create-theme.php
index b9e65714..aaf3720d 100644
--- a/admin/class-create-theme.php
+++ b/admin/class-create-theme.php
@@ -60,7 +60,6 @@ function create_block_theme_enqueue() {
 		);
 		wp_enqueue_script(
 			'create-block-theme-slot-fill',
-			'create-block-theme-styles'
 		);
 
 		// Enable localization in the plugin sidebar.
diff --git a/src/editor-sidebar/json-editor-modal.js b/src/editor-sidebar/json-editor-modal.js
index afdba2bb..11d367ca 100644
--- a/src/editor-sidebar/json-editor-modal.js
+++ b/src/editor-sidebar/json-editor-modal.js
@@ -33,7 +33,7 @@ const ThemeJsonEditorModal = ( { onRequestClose } ) => {
 
 	return (
 		<Modal
-			isFullScreen
+			size="large"
 			title={ sprintf(
 				// translators: %s: theme name.
 				__( 'theme.json for %s', 'create-block-theme' ),
diff --git a/src/editor-sidebar/metadata-editor-modal.js b/src/editor-sidebar/metadata-editor-modal.js
index b061cc61..ebe798bb 100644
--- a/src/editor-sidebar/metadata-editor-modal.js
+++ b/src/editor-sidebar/metadata-editor-modal.js
@@ -108,7 +108,7 @@ export const ThemeMetadataEditorModal = ( { onRequestClose } ) => {
 
 	return (
 		<Modal
-			isFullScreen
+			size="large"
 			title={ sprintf(
 				// translators: %s: theme name.
 				__( 'Metadata for %s', 'create-block-theme' ),
diff --git a/src/plugin-styles.scss b/src/plugin-styles.scss
index efd9bdb7..4af13616 100644
--- a/src/plugin-styles.scss
+++ b/src/plugin-styles.scss
@@ -3,7 +3,6 @@ $modal-footer-height: 70px;
 
 .#{$plugin-prefix} {
 	&__metadata-editor-modal {
-		width: 65vw !important;
 		padding-bottom: $modal-footer-height;
 
 		&__footer {
@@ -23,8 +22,4 @@ $modal-footer-height: 70px;
 			object-fit: cover;
 		}
 	}
-
-	&__theme-json-modal {
-		width: 65vw !important;
-	}
 }

From 6918e94a9006eb59788f3116d6825d88888f1533 Mon Sep 17 00:00:00 2001
From: Madhu Dollu <madhusudhan.dollu@gmail.com>
Date: Wed, 22 May 2024 15:38:27 +0200
Subject: [PATCH 3/3] update wp_enqueue_style arguments

Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
---
 admin/class-create-theme.php | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/admin/class-create-theme.php b/admin/class-create-theme.php
index aaf3720d..47802e9f 100644
--- a/admin/class-create-theme.php
+++ b/admin/class-create-theme.php
@@ -54,9 +54,8 @@ function create_block_theme_enqueue() {
 		wp_enqueue_style(
 			'create-block-theme-styles',
 			plugins_url( 'build/plugin-sidebar.css', dirname( __FILE__ ) ),
-			false,
-			$asset_file['version'],
-			'all'
+			array(),
+			$asset_file['version']
 		);
 		wp_enqueue_script(
 			'create-block-theme-slot-fill',