Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix opening Media gallery in setup wizard #215

Merged
merged 4 commits into from
Dec 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion build/gutenberg/index.asset.php
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');
2 changes: 1 addition & 1 deletion build/gutenberg/index.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion classes/class-admin.php
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
96 changes: 55 additions & 41 deletions gutenberg/components/gallery-control/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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} ${
Expand Down Expand Up @@ -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([]);
Expand Down Expand Up @@ -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}
/>
)}
/>
);

Expand Down
12 changes: 6 additions & 6 deletions languages/visual-portfolio.json
Original file line number Diff line number Diff line change
Expand Up @@ -1439,6 +1439,12 @@
"Loaded automatically from the image Description": [
""
],
"Edit Gallery": [
""
],
"Add Images": [
""
],
"Replace Image": [
""
],
Expand Down Expand Up @@ -1478,12 +1484,6 @@
"Image Settings": [
""
],
"Edit Gallery": [
""
],
"Add Images": [
""
],
"Select All": [
""
],
Expand Down
70 changes: 35 additions & 35 deletions languages/visual-portfolio.pot
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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 ""

Expand Down Expand Up @@ -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 ""

Expand Down
Loading