admin-foogallery-attachment-autosave.js
1 day ago
admin-foogallery-divi.js
1 day ago
admin-foogallery-edit.js
1 day ago
admin-foogallery-editor.js
1 day ago
admin-foogallery-elementor.js
1 day ago
admin-page-foogallery-extensions-modal.js
1 day ago
admin-page-foogallery-extensions.js
1 day ago
admin-page-foogallery-settings.js
1 day ago
admin-tinymce.js
1 day ago
admin-uploader.js
1 day ago
foogallery-command-palette.js
1 day ago
foogallery.admin.datasources.js
1 day ago
foogallery.admin.min.js
1 day ago
foogallery.admin.template.js
1 day ago
foogallery-command-palette.js
154 lines
| 1 | /** |
| 2 | * FooGallery Command Palette Integration |
| 3 | * |
| 4 | * Registers FooGallery galleries in the WordPress Command Palette |
| 5 | * (Ctrl+K / Cmd+K), available since WP 6.3. |
| 6 | * |
| 7 | * Two command types are registered: |
| 8 | * |
| 9 | * 1. Static command – "Add New Gallery" (always visible). |
| 10 | * Uses wp.data.dispatch( wp.commands.store ).registerCommand(). |
| 11 | * |
| 12 | * 2. Dynamic loader – "Edit Gallery: {title}" (filtered as you type). |
| 13 | * Uses wp.data.dispatch( wp.commands.store ).registerCommandLoader() |
| 14 | * directly, bypassing the useCommandLoader React hook wrapper. |
| 15 | * WordPress's own CommandMenuLoader calls our hook function inside |
| 16 | * its render cycle, so useSelect / useMemo run in proper React |
| 17 | * context without us needing a separate React root. |
| 18 | * Queries the foogallery post type via getEntityRecords — works now |
| 19 | * that the CPT is registered with show_in_rest: true. |
| 20 | * |
| 21 | * WordPress also auto-generates "Go to: FooGallery > …" navigation |
| 22 | * commands from the $menu/$submenu PHP globals. Those are redundant |
| 23 | * given the richer commands above, so we subscribe to the commands |
| 24 | * store and remove them once React has finished registering them. |
| 25 | */ |
| 26 | ( function () { |
| 27 | 'use strict'; |
| 28 | |
| 29 | if ( |
| 30 | ! window.wp || |
| 31 | ! wp.commands || |
| 32 | ! wp.data || |
| 33 | ! wp.element || |
| 34 | ! wp.i18n |
| 35 | ) { |
| 36 | return; |
| 37 | } |
| 38 | |
| 39 | var useSelect = wp.data.useSelect; |
| 40 | var useMemo = wp.element.useMemo; |
| 41 | var createElement = wp.element.createElement; |
| 42 | var __ = wp.i18n.__; |
| 43 | var sprintf = wp.i18n.sprintf; |
| 44 | var config = window.FOOGALLERY_COMMAND_PALETTE || {}; |
| 45 | var galleryName = config.galleryName || __( 'Gallery', 'foogallery' ); |
| 46 | |
| 47 | // ------------------------------------------------------------------ // |
| 48 | // Icon |
| 49 | // ------------------------------------------------------------------ // |
| 50 | |
| 51 | var galleryIcon = createElement( |
| 52 | 'svg', |
| 53 | { |
| 54 | xmlns: 'http://www.w3.org/2000/svg', |
| 55 | viewBox: '0 0 24 24', |
| 56 | width: '24', |
| 57 | height: '24', |
| 58 | 'aria-hidden': true, |
| 59 | focusable: false, |
| 60 | }, |
| 61 | createElement( 'path', { |
| 62 | d: 'M3 3h8v8H3V3zm0 10h8v8H3v-8zM13 3h8v8h-8V3zm0 10h8v8h-8v-8z', |
| 63 | } ) |
| 64 | ); |
| 65 | |
| 66 | // ------------------------------------------------------------------ // |
| 67 | // Helper |
| 68 | // ------------------------------------------------------------------ // |
| 69 | |
| 70 | function getEditUrl( id ) { |
| 71 | return ( config.editGalleryUrl || '' ).replace( '%d', id ); |
| 72 | } |
| 73 | |
| 74 | // ------------------------------------------------------------------ // |
| 75 | // Dynamic command loader hook |
| 76 | // |
| 77 | // This function is called by WordPress's CommandMenuLoader inside its |
| 78 | // own React render cycle, so React hooks (useSelect, useMemo) are valid. |
| 79 | // ------------------------------------------------------------------ // |
| 80 | |
| 81 | function useGalleryCommandLoader( props ) { |
| 82 | var search = props.search; |
| 83 | |
| 84 | var galleries = useSelect( function ( select ) { |
| 85 | return select( 'core' ).getEntityRecords( |
| 86 | 'postType', |
| 87 | 'foogallery', |
| 88 | { |
| 89 | search: search || undefined, |
| 90 | per_page: 10, |
| 91 | orderby: search ? 'relevance' : 'date', |
| 92 | _fields: 'id,title', |
| 93 | } |
| 94 | ); |
| 95 | }, [ search ] ); |
| 96 | |
| 97 | var commands = useMemo( function () { |
| 98 | return ( galleries || [] ).map( function ( gallery ) { |
| 99 | var title = |
| 100 | gallery.title && gallery.title.rendered |
| 101 | ? gallery.title.rendered |
| 102 | : __( '(Untitled)', 'foogallery' ); |
| 103 | |
| 104 | return { |
| 105 | name: 'foogallery/edit-gallery-' + gallery.id, |
| 106 | /* translators: 1: plugin/post-type name 2: gallery title */ |
| 107 | label: sprintf( __( 'Edit %1$s: %2$s', 'foogallery' ), galleryName, title ), |
| 108 | searchLabel: 'Edit ' + galleryName + ': ' + title, |
| 109 | icon: galleryIcon, |
| 110 | callback: function ( ref ) { |
| 111 | ref.close(); |
| 112 | window.location.href = getEditUrl( gallery.id ); |
| 113 | }, |
| 114 | }; |
| 115 | } ); |
| 116 | }, [ galleries ] ); |
| 117 | |
| 118 | return { |
| 119 | commands: commands, |
| 120 | isLoading: galleries === null, |
| 121 | }; |
| 122 | } |
| 123 | |
| 124 | // ------------------------------------------------------------------ // |
| 125 | // Register commands |
| 126 | // ------------------------------------------------------------------ // |
| 127 | |
| 128 | var commandsDispatch = wp.data.dispatch( wp.commands.store ); |
| 129 | |
| 130 | // Static: Add New Gallery. |
| 131 | if ( config.addNewGalleryUrl && commandsDispatch.registerCommand ) { |
| 132 | commandsDispatch.registerCommand( { |
| 133 | name: 'foogallery/add-new-gallery', |
| 134 | /* translators: %s: plugin/post-type name */ |
| 135 | label: sprintf( __( 'Add New %s', 'foogallery' ), galleryName ), |
| 136 | icon: galleryIcon, |
| 137 | callback: function ( ref ) { |
| 138 | ref.close(); |
| 139 | window.location.href = config.addNewGalleryUrl; |
| 140 | }, |
| 141 | } ); |
| 142 | } |
| 143 | |
| 144 | // Dynamic: search galleries by title as you type. |
| 145 | // registerCommandLoader is the store action that useCommandLoader |
| 146 | // calls internally — using it directly avoids needing a React root. |
| 147 | if ( commandsDispatch.registerCommandLoader ) { |
| 148 | commandsDispatch.registerCommandLoader( { |
| 149 | name: 'foogallery/search-galleries', |
| 150 | hook: useGalleryCommandLoader, |
| 151 | } ); |
| 152 | } |
| 153 | } )(); |
| 154 |