Fix open gallery (#215)

* fixed image selection popup error when saving layouts * build * Fixed manager role permissions for saved layouts * build --------- Co-authored-by: Nikita <[email protected]>
nk-crew · Dec 18, 2024 · 266cd6a · 266cd6a
1 parent 22bf406
commit 266cd6a
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 85 deletions.
diff --git a/build/gutenberg/index.asset.php b/build/gutenberg/index.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('jquery', 'lodash', 'react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-date', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => 'd9e914a51187e550718a');
+<?php return array('dependencies' => array('jquery', 'lodash', 'react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-date', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '57cf2179b0f52f37da63');
diff --git a/build/gutenberg/index.js b/build/gutenberg/index.js
diff --git a/classes/class-admin.php b/classes/class-admin.php
@@ -49,7 +49,7 @@ public function add_menu_if_portfolio_post_type_unregistered() {
 			add_menu_page(
 				visual_portfolio()->plugin_name,
 				visual_portfolio()->plugin_name,
-				'manage_options',
+				'edit_vp_lists',
 				'visual-portfolio-settings',
 				array( 'Visual_Portfolio_Settings', 'print_settings_page' ),
 				'dashicons-visual-portfolio',

diff --git a/gutenberg/components/gallery-control/index.js b/gutenberg/components/gallery-control/index.js
@@ -29,7 +29,7 @@ import {
 	TextControl,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 import { __, _n, sprintf } from '@wordpress/i18n';
 
@@ -42,6 +42,53 @@ const ALLOWED_MEDIA_TYPES = ['image'];
 const UNCATEGORIZED_VALUE = '------';
 const ITEMS_COUNT_DEFAULT = 18;
 
+function MediaUploadButton({ open, items, isSetupWizard }) {
+	const hasOpenedModal = useRef(false);
+
+	// Automatically open the media modal on the first render
+	useEffect(() => {
+		if (
+			!hasOpenedModal.current &&
+			isSetupWizard &&
+			(!items || !items.length)
+		) {
+			open();
+			hasOpenedModal.current = true; // Ensure it only opens once
+		}
+	}, [isSetupWizard, items, open]);
+
+	return (
+		<Button
+			className="vpf-component-gallery-control-item-fullwidth vpf-component-gallery-control-item-add"
+			onClick={(event) => {
+				event.stopPropagation();
+				open();
+			}}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				height="20"
+				width="20"
+				role="img"
+				aria-hidden="true"
+				focusable="false"
+			>
+				{items && items.length ? (
+					<path d="m19 7-3-3-8.5 8.5-1 4 4-1L19 7Zm-7 11.5H5V20h7v-1.5Z" />
+				) : (
+					<path d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z" />
+				)}
+			</svg>
+			<span>
+				{items && items.length
+					? __('Edit Gallery', 'visual-portfolio')
+					: __('Add Images', 'visual-portfolio')}
+			</span>
+		</Button>
+	);
+}
+
 function getHumanFileSize(size) {
 	const i = Math.floor(Math.log(size) / Math.log(1024));
 	return `${(size / 1024 ** i).toFixed(2) * 1} ${
@@ -718,9 +765,6 @@ const SortableList = function (props) {
 		useSensor(PointerSensor, { activationConstraint: { distance: 5 } })
 	);
 
-	// Automatically open images selector when first time select Images in Setup Wizard.
-	const [isOpenedInSetupWizard, setOpenInSetupWizard] =
-		useState(!isSetupWizard);
 	const [showingItems, setShowingItems] = useState(ITEMS_COUNT_DEFAULT);
 	const [filterCategory, setFilterCategory] = useState('');
 	const [checkedItems, setCheckedItems] = useState([]);
@@ -784,43 +828,13 @@ const SortableList = function (props) {
 			}}
 			allowedTypes={ALLOWED_MEDIA_TYPES}
 			value={items && items.length ? items.map((img) => img.id) : false}
-			render={({ open }) => {
-				if (!isOpenedInSetupWizard && (!items || !items.length)) {
-					setOpenInSetupWizard(true);
-					open();
-				}
-
-				return (
-					<Button
-						className="vpf-component-gallery-control-item-fullwidth vpf-component-gallery-control-item-add"
-						onClick={(event) => {
-							event.stopPropagation();
-							open();
-						}}
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 24 24"
-							height="20"
-							width="20"
-							role="img"
-							aria-hidden="true"
-							focusable="false"
-						>
-							{items && items.length ? (
-								<path d="m19 7-3-3-8.5 8.5-1 4 4-1L19 7Zm-7 11.5H5V20h7v-1.5Z" />
-							) : (
-								<path d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z" />
-							)}
-						</svg>
-						<span>
-							{items && items.length
-								? __('Edit Gallery', 'visual-portfolio')
-								: __('Add Images', 'visual-portfolio')}
-						</span>
-					</Button>
-				);
-			}}
+			render={({ open }) => (
+				<MediaUploadButton
+					open={open}
+					items={items}
+					isSetupWizard={isSetupWizard}
+				/>
+			)}
 		/>
 	);
 

diff --git a/languages/visual-portfolio.json b/languages/visual-portfolio.json
@@ -1439,6 +1439,12 @@
          "Loaded automatically from the image Description": [
             ""
          ],
+         "Edit Gallery": [
+            ""
+         ],
+         "Add Images": [
+            ""
+         ],
          "Replace Image": [
             ""
          ],
@@ -1478,12 +1484,6 @@
          "Image Settings": [
             ""
          ],
-         "Edit Gallery": [
-            ""
-         ],
-         "Add Images": [
-            ""
-         ],
          "Select All": [
             ""
          ],

diff --git a/languages/visual-portfolio.pot b/languages/visual-portfolio.pot
@@ -9,7 +9,7 @@ msgstr ""
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"POT-Creation-Date: 2024-12-15T18:41:58+00:00\n"
+"POT-Creation-Date: 2024-12-18T13:09:05+00:00\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "X-Generator: WP-CLI 2.10.0\n"
 "X-Domain: visual-portfolio\n"
@@ -1005,7 +1005,7 @@ msgstr ""
 #: classes/class-admin.php:3093
 #: classes/class-get-portfolio.php:1069
 #: classes/class-shortcode.php:58
-#: gutenberg/components/gallery-control/index.js:910
+#: gutenberg/components/gallery-control/index.js:924
 msgid "All"
 msgstr ""
 
@@ -2172,114 +2172,114 @@ msgstr ""
 msgid "Loaded automatically from the image Description"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:217
+#: gutenberg/components/gallery-control/index.js:85
+msgid "Edit Gallery"
+msgstr ""
+
+#: gutenberg/components/gallery-control/index.js:86
+msgid "Add Images"
+msgstr ""
+
+#: gutenberg/components/gallery-control/index.js:264
 msgid "Replace Image"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:228
+#: gutenberg/components/gallery-control/index.js:275
 msgid "Remove Image from Gallery"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:238
+#: gutenberg/components/gallery-control/index.js:285
 msgid "Hide Additional Info"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:239
+#: gutenberg/components/gallery-control/index.js:286
 msgid "Show Additional Info"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:264
+#: gutenberg/components/gallery-control/index.js:311
 msgid "File name:"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:269
+#: gutenberg/components/gallery-control/index.js:316
 msgid "File type:"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:294
+#: gutenberg/components/gallery-control/index.js:341
 msgid "File URL:"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:312
+#: gutenberg/components/gallery-control/index.js:359
 msgid "Copy URL to Clipboard"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:319
+#: gutenberg/components/gallery-control/index.js:366
 #: gutenberg/layouts-editor/block/index.js:48
 msgid "Copied!"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:330
+#: gutenberg/components/gallery-control/index.js:377
 msgid "View attachment page"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:341
+#: gutenberg/components/gallery-control/index.js:388
 msgid "Edit more details"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:595
+#: gutenberg/components/gallery-control/index.js:642
 msgid "Select"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:663
+#: gutenberg/components/gallery-control/index.js:710
 msgid "Image Settings"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:818
-msgid "Edit Gallery"
-msgstr ""
-
-#: gutenberg/components/gallery-control/index.js:819
-msgid "Add Images"
-msgstr ""
-
-#: gutenberg/components/gallery-control/index.js:836
+#: gutenberg/components/gallery-control/index.js:850
 msgid "Select All"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:853
+#: gutenberg/components/gallery-control/index.js:867
 msgid "Bulk Actions"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:858
+#: gutenberg/components/gallery-control/index.js:872
 msgid "Bulk actions"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:865
+#: gutenberg/components/gallery-control/index.js:879
 msgid "Edit"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:869
+#: gutenberg/components/gallery-control/index.js:883
 msgid "Delete"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:878
+#: gutenberg/components/gallery-control/index.js:892
 msgid "Are you sure you want to remove selected items?"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:903
+#: gutenberg/components/gallery-control/index.js:917
 msgid "Filter by Category"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:914
+#: gutenberg/components/gallery-control/index.js:928
 msgid "Uncategorized"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:948
+#: gutenberg/components/gallery-control/index.js:962
 msgid "Bulk Image Settings"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:1095
+#: gutenberg/components/gallery-control/index.js:1109
 msgid "Showing %1$s of %2$s Image"
 msgid_plural "Showing %1$s of %2$s Images"
 msgstr[0] ""
 msgstr[1] ""
 
-#: gutenberg/components/gallery-control/index.js:1115
+#: gutenberg/components/gallery-control/index.js:1129
 msgid "Show More"
 msgstr ""
 
-#: gutenberg/components/gallery-control/index.js:1123
+#: gutenberg/components/gallery-control/index.js:1137
 msgid "Show All"
 msgstr ""
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?php return array('dependencies' => array('jquery', 'lodash', 'react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-date', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => 'd9e914a51187e550718a');
		<?php return array('dependencies' => array('jquery', 'lodash', 'react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-date', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '57cf2179b0f52f37da63');