@wordpress/block-directory 4.26.0 → 4.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/build/components/downloadable-blocks-panel/index.js +57 -50
- package/build/components/downloadable-blocks-panel/index.js.map +1 -1
- package/build/plugins/inserter-menu-downloadable-blocks-panel/index.js +1 -3
- package/build/plugins/inserter-menu-downloadable-blocks-panel/index.js.map +1 -1
- package/build-module/components/downloadable-blocks-panel/index.js +58 -50
- package/build-module/components/downloadable-blocks-panel/index.js.map +1 -1
- package/build-module/plugins/inserter-menu-downloadable-blocks-panel/index.js +1 -3
- package/build-module/plugins/inserter-menu-downloadable-blocks-panel/index.js.map +1 -1
- package/build-style/style-rtl.css +2 -1
- package/build-style/style.css +2 -1
- package/package.json +21 -21
- package/src/components/downloadable-blocks-panel/index.js +68 -65
- package/src/plugins/inserter-menu-downloadable-blocks-panel/index.js +1 -8
package/CHANGELOG.md
CHANGED
|
@@ -4,11 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.default =
|
|
7
|
+
exports.default = DownloadableBlocksPanel;
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _i18n = require("@wordpress/i18n");
|
|
10
10
|
var _components = require("@wordpress/components");
|
|
11
|
-
var _compose = require("@wordpress/compose");
|
|
12
11
|
var _coreData = require("@wordpress/core-data");
|
|
13
12
|
var _data = require("@wordpress/data");
|
|
14
13
|
var _blocks = require("@wordpress/blocks");
|
|
@@ -25,16 +24,60 @@ var _store = require("../../store");
|
|
|
25
24
|
*/
|
|
26
25
|
|
|
27
26
|
const EMPTY_ARRAY = [];
|
|
27
|
+
const useDownloadableBlocks = filterValue => (0, _data.useSelect)(select => {
|
|
28
|
+
const {
|
|
29
|
+
getDownloadableBlocks,
|
|
30
|
+
isRequestingDownloadableBlocks,
|
|
31
|
+
getInstalledBlockTypes
|
|
32
|
+
} = select(_store.store);
|
|
33
|
+
const hasPermission = select(_coreData.store).canUser('read', 'block-directory/search');
|
|
34
|
+
let downloadableBlocks = EMPTY_ARRAY;
|
|
35
|
+
if (hasPermission) {
|
|
36
|
+
downloadableBlocks = getDownloadableBlocks(filterValue);
|
|
37
|
+
|
|
38
|
+
// Filter out blocks that are already installed.
|
|
39
|
+
const installedBlockTypes = getInstalledBlockTypes();
|
|
40
|
+
const installableBlocks = downloadableBlocks.filter(({
|
|
41
|
+
name
|
|
42
|
+
}) => {
|
|
43
|
+
// Check if the block has just been installed, in which case it
|
|
44
|
+
// should still show in the list to avoid suddenly disappearing.
|
|
45
|
+
// `installedBlockTypes` only returns blocks stored in state
|
|
46
|
+
// immediately after installation, not all installed blocks.
|
|
47
|
+
const isJustInstalled = installedBlockTypes.some(blockType => blockType.name === name);
|
|
48
|
+
const isPreviouslyInstalled = (0, _blocks.getBlockType)(name);
|
|
49
|
+
return isJustInstalled || !isPreviouslyInstalled;
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
// Keep identity of the `downloadableBlocks` array if nothing was filtered out
|
|
53
|
+
if (installableBlocks.length !== downloadableBlocks.length) {
|
|
54
|
+
downloadableBlocks = installableBlocks;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// Return identical empty array when there are no blocks
|
|
58
|
+
if (downloadableBlocks.length === 0) {
|
|
59
|
+
downloadableBlocks = EMPTY_ARRAY;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
return {
|
|
63
|
+
hasPermission,
|
|
64
|
+
downloadableBlocks,
|
|
65
|
+
isLoading: isRequestingDownloadableBlocks(filterValue)
|
|
66
|
+
};
|
|
67
|
+
}, [filterValue]);
|
|
28
68
|
function DownloadableBlocksPanel({
|
|
29
|
-
downloadableItems,
|
|
30
69
|
onSelect,
|
|
31
70
|
onHover,
|
|
32
71
|
hasLocalBlocks,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
isTyping
|
|
72
|
+
isTyping,
|
|
73
|
+
filterValue
|
|
36
74
|
}) {
|
|
37
|
-
|
|
75
|
+
const {
|
|
76
|
+
hasPermission,
|
|
77
|
+
downloadableBlocks,
|
|
78
|
+
isLoading
|
|
79
|
+
} = useDownloadableBlocks(filterValue);
|
|
80
|
+
if (hasPermission === undefined || isLoading || isTyping) {
|
|
38
81
|
return (0, _react.createElement)(_react.Fragment, null, hasPermission && !hasLocalBlocks && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)("p", {
|
|
39
82
|
className: "block-directory-downloadable-blocks-panel__no-local"
|
|
40
83
|
}, (0, _i18n.__)('No results available from your installed blocks.')), (0, _react.createElement)("div", {
|
|
@@ -49,52 +92,16 @@ function DownloadableBlocksPanel({
|
|
|
49
92
|
}
|
|
50
93
|
return null;
|
|
51
94
|
}
|
|
52
|
-
|
|
53
|
-
|
|
95
|
+
if (downloadableBlocks.length === 0) {
|
|
96
|
+
return hasLocalBlocks ? null : (0, _react.createElement)(_noResults.default, null);
|
|
97
|
+
}
|
|
98
|
+
return (0, _react.createElement)(_inserterPanel.default, {
|
|
99
|
+
downloadableItems: downloadableBlocks,
|
|
54
100
|
hasLocalBlocks: hasLocalBlocks
|
|
55
101
|
}, (0, _react.createElement)(_downloadableBlocksList.default, {
|
|
56
|
-
items:
|
|
102
|
+
items: downloadableBlocks,
|
|
57
103
|
onSelect: onSelect,
|
|
58
104
|
onHover: onHover
|
|
59
|
-
}))
|
|
105
|
+
}));
|
|
60
106
|
}
|
|
61
|
-
var _default = (0, _compose.compose)([(0, _data.withSelect)((select, {
|
|
62
|
-
filterValue
|
|
63
|
-
}) => {
|
|
64
|
-
const {
|
|
65
|
-
getDownloadableBlocks,
|
|
66
|
-
isRequestingDownloadableBlocks,
|
|
67
|
-
getInstalledBlockTypes
|
|
68
|
-
} = select(_store.store);
|
|
69
|
-
const hasPermission = select(_coreData.store).canUser('read', 'block-directory/search');
|
|
70
|
-
function getInstallableBlocks(term) {
|
|
71
|
-
const downloadableBlocks = getDownloadableBlocks(term);
|
|
72
|
-
const installedBlockTypes = getInstalledBlockTypes();
|
|
73
|
-
// Filter out blocks that are already installed.
|
|
74
|
-
const installableBlocks = downloadableBlocks.filter(block => {
|
|
75
|
-
// Check if the block has just been installed, in which case it
|
|
76
|
-
// should still show in the list to avoid suddenly disappearing.
|
|
77
|
-
// `installedBlockTypes` only returns blocks stored in state
|
|
78
|
-
// immediately after installation, not all installed blocks.
|
|
79
|
-
const isJustInstalled = !!installedBlockTypes.find(blockType => blockType.name === block.name);
|
|
80
|
-
const isPreviouslyInstalled = (0, _blocks.getBlockType)(block.name);
|
|
81
|
-
return isJustInstalled || !isPreviouslyInstalled;
|
|
82
|
-
});
|
|
83
|
-
if (downloadableBlocks.length === installableBlocks.length) {
|
|
84
|
-
return downloadableBlocks;
|
|
85
|
-
}
|
|
86
|
-
return installableBlocks;
|
|
87
|
-
}
|
|
88
|
-
let downloadableItems = hasPermission ? getInstallableBlocks(filterValue) : [];
|
|
89
|
-
if (downloadableItems.length === 0) {
|
|
90
|
-
downloadableItems = EMPTY_ARRAY;
|
|
91
|
-
}
|
|
92
|
-
const isLoading = isRequestingDownloadableBlocks(filterValue);
|
|
93
|
-
return {
|
|
94
|
-
downloadableItems,
|
|
95
|
-
hasPermission,
|
|
96
|
-
isLoading
|
|
97
|
-
};
|
|
98
|
-
})])(DownloadableBlocksPanel);
|
|
99
|
-
exports.default = _default;
|
|
100
107
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_i18n","require","_components","
|
|
1
|
+
{"version":3,"names":["_i18n","require","_components","_coreData","_data","_blocks","_downloadableBlocksList","_interopRequireDefault","_inserterPanel","_noResults","_store","EMPTY_ARRAY","useDownloadableBlocks","filterValue","useSelect","select","getDownloadableBlocks","isRequestingDownloadableBlocks","getInstalledBlockTypes","blockDirectoryStore","hasPermission","coreStore","canUser","downloadableBlocks","installedBlockTypes","installableBlocks","filter","name","isJustInstalled","some","blockType","isPreviouslyInstalled","getBlockType","length","isLoading","DownloadableBlocksPanel","onSelect","onHover","hasLocalBlocks","isTyping","undefined","_react","createElement","Fragment","className","__","Spinner","default","downloadableItems","items"],"sources":["@wordpress/block-directory/src/components/downloadable-blocks-panel/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Spinner } from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { getBlockType } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport DownloadableBlocksList from '../downloadable-blocks-list';\nimport DownloadableBlocksInserterPanel from './inserter-panel';\nimport DownloadableBlocksNoResults from './no-results';\nimport { store as blockDirectoryStore } from '../../store';\n\nconst EMPTY_ARRAY = [];\n\nconst useDownloadableBlocks = ( filterValue ) =>\n\tuseSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetDownloadableBlocks,\n\t\t\t\tisRequestingDownloadableBlocks,\n\t\t\t\tgetInstalledBlockTypes,\n\t\t\t} = select( blockDirectoryStore );\n\n\t\t\tconst hasPermission = select( coreStore ).canUser(\n\t\t\t\t'read',\n\t\t\t\t'block-directory/search'\n\t\t\t);\n\n\t\t\tlet downloadableBlocks = EMPTY_ARRAY;\n\t\t\tif ( hasPermission ) {\n\t\t\t\tdownloadableBlocks = getDownloadableBlocks( filterValue );\n\n\t\t\t\t// Filter out blocks that are already installed.\n\t\t\t\tconst installedBlockTypes = getInstalledBlockTypes();\n\t\t\t\tconst installableBlocks = downloadableBlocks.filter(\n\t\t\t\t\t( { name } ) => {\n\t\t\t\t\t\t// Check if the block has just been installed, in which case it\n\t\t\t\t\t\t// should still show in the list to avoid suddenly disappearing.\n\t\t\t\t\t\t// `installedBlockTypes` only returns blocks stored in state\n\t\t\t\t\t\t// immediately after installation, not all installed blocks.\n\t\t\t\t\t\tconst isJustInstalled = installedBlockTypes.some(\n\t\t\t\t\t\t\t( blockType ) => blockType.name === name\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst isPreviouslyInstalled = getBlockType( name );\n\t\t\t\t\t\treturn isJustInstalled || ! isPreviouslyInstalled;\n\t\t\t\t\t}\n\t\t\t\t);\n\n\t\t\t\t// Keep identity of the `downloadableBlocks` array if nothing was filtered out\n\t\t\t\tif ( installableBlocks.length !== downloadableBlocks.length ) {\n\t\t\t\t\tdownloadableBlocks = installableBlocks;\n\t\t\t\t}\n\n\t\t\t\t// Return identical empty array when there are no blocks\n\t\t\t\tif ( downloadableBlocks.length === 0 ) {\n\t\t\t\t\tdownloadableBlocks = EMPTY_ARRAY;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\thasPermission,\n\t\t\t\tdownloadableBlocks,\n\t\t\t\tisLoading: isRequestingDownloadableBlocks( filterValue ),\n\t\t\t};\n\t\t},\n\t\t[ filterValue ]\n\t);\n\nexport default function DownloadableBlocksPanel( {\n\tonSelect,\n\tonHover,\n\thasLocalBlocks,\n\tisTyping,\n\tfilterValue,\n} ) {\n\tconst { hasPermission, downloadableBlocks, isLoading } =\n\t\tuseDownloadableBlocks( filterValue );\n\n\tif ( hasPermission === undefined || isLoading || isTyping ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ hasPermission && ! hasLocalBlocks && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<p className=\"block-directory-downloadable-blocks-panel__no-local\">\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'No results available from your installed blocks.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<div className=\"block-editor-inserter__quick-inserter-separator\" />\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t\t<div className=\"block-directory-downloadable-blocks-panel has-blocks-loading\">\n\t\t\t\t\t<Spinner />\n\t\t\t\t</div>\n\t\t\t</>\n\t\t);\n\t}\n\n\tif ( false === hasPermission ) {\n\t\tif ( ! hasLocalBlocks ) {\n\t\t\treturn <DownloadableBlocksNoResults />;\n\t\t}\n\n\t\treturn null;\n\t}\n\n\tif ( downloadableBlocks.length === 0 ) {\n\t\treturn hasLocalBlocks ? null : <DownloadableBlocksNoResults />;\n\t}\n\n\treturn (\n\t\t<DownloadableBlocksInserterPanel\n\t\t\tdownloadableItems={ downloadableBlocks }\n\t\t\thasLocalBlocks={ hasLocalBlocks }\n\t\t>\n\t\t\t<DownloadableBlocksList\n\t\t\t\titems={ downloadableBlocks }\n\t\t\t\tonSelect={ onSelect }\n\t\t\t\tonHover={ onHover }\n\t\t\t/>\n\t\t</DownloadableBlocksInserterPanel>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAKA,IAAAK,uBAAA,GAAAC,sBAAA,CAAAN,OAAA;AACA,IAAAO,cAAA,GAAAD,sBAAA,CAAAN,OAAA;AACA,IAAAQ,UAAA,GAAAF,sBAAA,CAAAN,OAAA;AACA,IAAAS,MAAA,GAAAT,OAAA;AAfA;AACA;AACA;;AAOA;AACA;AACA;;AAMA,MAAMU,WAAW,GAAG,EAAE;AAEtB,MAAMC,qBAAqB,GAAKC,WAAW,IAC1C,IAAAC,eAAS,EACNC,MAAM,IAAM;EACb,MAAM;IACLC,qBAAqB;IACrBC,8BAA8B;IAC9BC;EACD,CAAC,GAAGH,MAAM,CAAEI,YAAoB,CAAC;EAEjC,MAAMC,aAAa,GAAGL,MAAM,CAAEM,eAAU,CAAC,CAACC,OAAO,CAChD,MAAM,EACN,wBACD,CAAC;EAED,IAAIC,kBAAkB,GAAGZ,WAAW;EACpC,IAAKS,aAAa,EAAG;IACpBG,kBAAkB,GAAGP,qBAAqB,CAAEH,WAAY,CAAC;;IAEzD;IACA,MAAMW,mBAAmB,GAAGN,sBAAsB,CAAC,CAAC;IACpD,MAAMO,iBAAiB,GAAGF,kBAAkB,CAACG,MAAM,CAClD,CAAE;MAAEC;IAAK,CAAC,KAAM;MACf;MACA;MACA;MACA;MACA,MAAMC,eAAe,GAAGJ,mBAAmB,CAACK,IAAI,CAC7CC,SAAS,IAAMA,SAAS,CAACH,IAAI,KAAKA,IACrC,CAAC;MACD,MAAMI,qBAAqB,GAAG,IAAAC,oBAAY,EAAEL,IAAK,CAAC;MAClD,OAAOC,eAAe,IAAI,CAAEG,qBAAqB;IAClD,CACD,CAAC;;IAED;IACA,IAAKN,iBAAiB,CAACQ,MAAM,KAAKV,kBAAkB,CAACU,MAAM,EAAG;MAC7DV,kBAAkB,GAAGE,iBAAiB;IACvC;;IAEA;IACA,IAAKF,kBAAkB,CAACU,MAAM,KAAK,CAAC,EAAG;MACtCV,kBAAkB,GAAGZ,WAAW;IACjC;EACD;EAEA,OAAO;IACNS,aAAa;IACbG,kBAAkB;IAClBW,SAAS,EAAEjB,8BAA8B,CAAEJ,WAAY;EACxD,CAAC;AACF,CAAC,EACD,CAAEA,WAAW,CACd,CAAC;AAEa,SAASsB,uBAAuBA,CAAE;EAChDC,QAAQ;EACRC,OAAO;EACPC,cAAc;EACdC,QAAQ;EACR1B;AACD,CAAC,EAAG;EACH,MAAM;IAAEO,aAAa;IAAEG,kBAAkB;IAAEW;EAAU,CAAC,GACrDtB,qBAAqB,CAAEC,WAAY,CAAC;EAErC,IAAKO,aAAa,KAAKoB,SAAS,IAAIN,SAAS,IAAIK,QAAQ,EAAG;IAC3D,OACC,IAAAE,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACGvB,aAAa,IAAI,CAAEkB,cAAc,IAClC,IAAAG,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACC,IAAAF,MAAA,CAAAC,aAAA;MAAGE,SAAS,EAAC;IAAqD,GAC/D,IAAAC,QAAE,EACH,kDACD,CACE,CAAC,EACJ,IAAAJ,MAAA,CAAAC,aAAA;MAAKE,SAAS,EAAC;IAAiD,CAAE,CACjE,CACF,EACD,IAAAH,MAAA,CAAAC,aAAA;MAAKE,SAAS,EAAC;IAA8D,GAC5E,IAAAH,MAAA,CAAAC,aAAA,EAACxC,WAAA,CAAA4C,OAAO,MAAE,CACN,CACJ,CAAC;EAEL;EAEA,IAAK,KAAK,KAAK1B,aAAa,EAAG;IAC9B,IAAK,CAAEkB,cAAc,EAAG;MACvB,OAAO,IAAAG,MAAA,CAAAC,aAAA,EAACjC,UAAA,CAAAsC,OAA2B,MAAE,CAAC;IACvC;IAEA,OAAO,IAAI;EACZ;EAEA,IAAKxB,kBAAkB,CAACU,MAAM,KAAK,CAAC,EAAG;IACtC,OAAOK,cAAc,GAAG,IAAI,GAAG,IAAAG,MAAA,CAAAC,aAAA,EAACjC,UAAA,CAAAsC,OAA2B,MAAE,CAAC;EAC/D;EAEA,OACC,IAAAN,MAAA,CAAAC,aAAA,EAAClC,cAAA,CAAAuC,OAA+B;IAC/BC,iBAAiB,EAAGzB,kBAAoB;IACxCe,cAAc,EAAGA;EAAgB,GAEjC,IAAAG,MAAA,CAAAC,aAAA,EAACpC,uBAAA,CAAAyC,OAAsB;IACtBE,KAAK,EAAG1B,kBAAoB;IAC5Ba,QAAQ,EAAGA,QAAU;IACrBC,OAAO,EAAGA;EAAS,CACnB,CAC+B,CAAC;AAEpC"}
|
|
@@ -25,8 +25,7 @@ function InserterMenuDownloadableBlocksPanel() {
|
|
|
25
25
|
onSelect,
|
|
26
26
|
onHover,
|
|
27
27
|
filterValue,
|
|
28
|
-
hasItems
|
|
29
|
-
rootClientId
|
|
28
|
+
hasItems
|
|
30
29
|
}) => {
|
|
31
30
|
if (debouncedFilterValue !== filterValue) {
|
|
32
31
|
debouncedSetFilterValue(filterValue);
|
|
@@ -37,7 +36,6 @@ function InserterMenuDownloadableBlocksPanel() {
|
|
|
37
36
|
return (0, _react.createElement)(_downloadableBlocksPanel.default, {
|
|
38
37
|
onSelect: onSelect,
|
|
39
38
|
onHover: onHover,
|
|
40
|
-
rootClientId: rootClientId,
|
|
41
39
|
filterValue: debouncedFilterValue,
|
|
42
40
|
hasLocalBlocks: hasItems,
|
|
43
41
|
isTyping: filterValue !== debouncedFilterValue
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_blockEditor","require","_compose","_element","_downloadableBlocksPanel","_interopRequireDefault","InserterMenuDownloadableBlocksPanel","debouncedFilterValue","setFilterValue","useState","debouncedSetFilterValue","debounce","_react","createElement","__unstableInserterMenuExtension","onSelect","onHover","filterValue","hasItems","
|
|
1
|
+
{"version":3,"names":["_blockEditor","require","_compose","_element","_downloadableBlocksPanel","_interopRequireDefault","InserterMenuDownloadableBlocksPanel","debouncedFilterValue","setFilterValue","useState","debouncedSetFilterValue","debounce","_react","createElement","__unstableInserterMenuExtension","onSelect","onHover","filterValue","hasItems","default","hasLocalBlocks","isTyping","_default","exports"],"sources":["@wordpress/block-directory/src/plugins/inserter-menu-downloadable-blocks-panel/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __unstableInserterMenuExtension } from '@wordpress/block-editor';\nimport { debounce } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DownloadableBlocksPanel from '../../components/downloadable-blocks-panel';\n\nfunction InserterMenuDownloadableBlocksPanel() {\n\tconst [ debouncedFilterValue, setFilterValue ] = useState( '' );\n\tconst debouncedSetFilterValue = debounce( setFilterValue, 400 );\n\n\treturn (\n\t\t<__unstableInserterMenuExtension>\n\t\t\t{ ( { onSelect, onHover, filterValue, hasItems } ) => {\n\t\t\t\tif ( debouncedFilterValue !== filterValue ) {\n\t\t\t\t\tdebouncedSetFilterValue( filterValue );\n\t\t\t\t}\n\n\t\t\t\tif ( ! debouncedFilterValue ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<DownloadableBlocksPanel\n\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\t\tfilterValue={ debouncedFilterValue }\n\t\t\t\t\t\thasLocalBlocks={ hasItems }\n\t\t\t\t\t\tisTyping={ filterValue !== debouncedFilterValue }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t</__unstableInserterMenuExtension>\n\t);\n}\n\nexport default InserterMenuDownloadableBlocksPanel;\n"],"mappings":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,wBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAVA;AACA;AACA;;AAKA;AACA;AACA;;AAGA,SAASK,mCAAmCA,CAAA,EAAG;EAC9C,MAAM,CAAEC,oBAAoB,EAAEC,cAAc,CAAE,GAAG,IAAAC,iBAAQ,EAAE,EAAG,CAAC;EAC/D,MAAMC,uBAAuB,GAAG,IAAAC,iBAAQ,EAAEH,cAAc,EAAE,GAAI,CAAC;EAE/D,OACC,IAAAI,MAAA,CAAAC,aAAA,EAACb,YAAA,CAAAc,+BAA+B,QAC7B,CAAE;IAAEC,QAAQ;IAAEC,OAAO;IAAEC,WAAW;IAAEC;EAAS,CAAC,KAAM;IACrD,IAAKX,oBAAoB,KAAKU,WAAW,EAAG;MAC3CP,uBAAuB,CAAEO,WAAY,CAAC;IACvC;IAEA,IAAK,CAAEV,oBAAoB,EAAG;MAC7B,OAAO,IAAI;IACZ;IAEA,OACC,IAAAK,MAAA,CAAAC,aAAA,EAACT,wBAAA,CAAAe,OAAuB;MACvBJ,QAAQ,EAAGA,QAAU;MACrBC,OAAO,EAAGA,OAAS;MACnBC,WAAW,EAAGV,oBAAsB;MACpCa,cAAc,EAAGF,QAAU;MAC3BG,QAAQ,EAAGJ,WAAW,KAAKV;IAAsB,CACjD,CAAC;EAEJ,CACgC,CAAC;AAEpC;AAAC,IAAAe,QAAA,GAEchB,mCAAmC;AAAAiB,OAAA,CAAAJ,OAAA,GAAAG,QAAA"}
|
|
@@ -4,9 +4,8 @@ import { createElement, Fragment } from "react";
|
|
|
4
4
|
*/
|
|
5
5
|
import { __ } from '@wordpress/i18n';
|
|
6
6
|
import { Spinner } from '@wordpress/components';
|
|
7
|
-
import { compose } from '@wordpress/compose';
|
|
8
7
|
import { store as coreStore } from '@wordpress/core-data';
|
|
9
|
-
import {
|
|
8
|
+
import { useSelect } from '@wordpress/data';
|
|
10
9
|
import { getBlockType } from '@wordpress/blocks';
|
|
11
10
|
|
|
12
11
|
/**
|
|
@@ -17,16 +16,60 @@ import DownloadableBlocksInserterPanel from './inserter-panel';
|
|
|
17
16
|
import DownloadableBlocksNoResults from './no-results';
|
|
18
17
|
import { store as blockDirectoryStore } from '../../store';
|
|
19
18
|
const EMPTY_ARRAY = [];
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
const useDownloadableBlocks = filterValue => useSelect(select => {
|
|
20
|
+
const {
|
|
21
|
+
getDownloadableBlocks,
|
|
22
|
+
isRequestingDownloadableBlocks,
|
|
23
|
+
getInstalledBlockTypes
|
|
24
|
+
} = select(blockDirectoryStore);
|
|
25
|
+
const hasPermission = select(coreStore).canUser('read', 'block-directory/search');
|
|
26
|
+
let downloadableBlocks = EMPTY_ARRAY;
|
|
27
|
+
if (hasPermission) {
|
|
28
|
+
downloadableBlocks = getDownloadableBlocks(filterValue);
|
|
29
|
+
|
|
30
|
+
// Filter out blocks that are already installed.
|
|
31
|
+
const installedBlockTypes = getInstalledBlockTypes();
|
|
32
|
+
const installableBlocks = downloadableBlocks.filter(({
|
|
33
|
+
name
|
|
34
|
+
}) => {
|
|
35
|
+
// Check if the block has just been installed, in which case it
|
|
36
|
+
// should still show in the list to avoid suddenly disappearing.
|
|
37
|
+
// `installedBlockTypes` only returns blocks stored in state
|
|
38
|
+
// immediately after installation, not all installed blocks.
|
|
39
|
+
const isJustInstalled = installedBlockTypes.some(blockType => blockType.name === name);
|
|
40
|
+
const isPreviouslyInstalled = getBlockType(name);
|
|
41
|
+
return isJustInstalled || !isPreviouslyInstalled;
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
// Keep identity of the `downloadableBlocks` array if nothing was filtered out
|
|
45
|
+
if (installableBlocks.length !== downloadableBlocks.length) {
|
|
46
|
+
downloadableBlocks = installableBlocks;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// Return identical empty array when there are no blocks
|
|
50
|
+
if (downloadableBlocks.length === 0) {
|
|
51
|
+
downloadableBlocks = EMPTY_ARRAY;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
return {
|
|
55
|
+
hasPermission,
|
|
56
|
+
downloadableBlocks,
|
|
57
|
+
isLoading: isRequestingDownloadableBlocks(filterValue)
|
|
58
|
+
};
|
|
59
|
+
}, [filterValue]);
|
|
60
|
+
export default function DownloadableBlocksPanel({
|
|
22
61
|
onSelect,
|
|
23
62
|
onHover,
|
|
24
63
|
hasLocalBlocks,
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
isTyping
|
|
64
|
+
isTyping,
|
|
65
|
+
filterValue
|
|
28
66
|
}) {
|
|
29
|
-
|
|
67
|
+
const {
|
|
68
|
+
hasPermission,
|
|
69
|
+
downloadableBlocks,
|
|
70
|
+
isLoading
|
|
71
|
+
} = useDownloadableBlocks(filterValue);
|
|
72
|
+
if (hasPermission === undefined || isLoading || isTyping) {
|
|
30
73
|
return createElement(Fragment, null, hasPermission && !hasLocalBlocks && createElement(Fragment, null, createElement("p", {
|
|
31
74
|
className: "block-directory-downloadable-blocks-panel__no-local"
|
|
32
75
|
}, __('No results available from your installed blocks.')), createElement("div", {
|
|
@@ -41,51 +84,16 @@ function DownloadableBlocksPanel({
|
|
|
41
84
|
}
|
|
42
85
|
return null;
|
|
43
86
|
}
|
|
44
|
-
|
|
45
|
-
|
|
87
|
+
if (downloadableBlocks.length === 0) {
|
|
88
|
+
return hasLocalBlocks ? null : createElement(DownloadableBlocksNoResults, null);
|
|
89
|
+
}
|
|
90
|
+
return createElement(DownloadableBlocksInserterPanel, {
|
|
91
|
+
downloadableItems: downloadableBlocks,
|
|
46
92
|
hasLocalBlocks: hasLocalBlocks
|
|
47
93
|
}, createElement(DownloadableBlocksList, {
|
|
48
|
-
items:
|
|
94
|
+
items: downloadableBlocks,
|
|
49
95
|
onSelect: onSelect,
|
|
50
96
|
onHover: onHover
|
|
51
|
-
}))
|
|
97
|
+
}));
|
|
52
98
|
}
|
|
53
|
-
export default compose([withSelect((select, {
|
|
54
|
-
filterValue
|
|
55
|
-
}) => {
|
|
56
|
-
const {
|
|
57
|
-
getDownloadableBlocks,
|
|
58
|
-
isRequestingDownloadableBlocks,
|
|
59
|
-
getInstalledBlockTypes
|
|
60
|
-
} = select(blockDirectoryStore);
|
|
61
|
-
const hasPermission = select(coreStore).canUser('read', 'block-directory/search');
|
|
62
|
-
function getInstallableBlocks(term) {
|
|
63
|
-
const downloadableBlocks = getDownloadableBlocks(term);
|
|
64
|
-
const installedBlockTypes = getInstalledBlockTypes();
|
|
65
|
-
// Filter out blocks that are already installed.
|
|
66
|
-
const installableBlocks = downloadableBlocks.filter(block => {
|
|
67
|
-
// Check if the block has just been installed, in which case it
|
|
68
|
-
// should still show in the list to avoid suddenly disappearing.
|
|
69
|
-
// `installedBlockTypes` only returns blocks stored in state
|
|
70
|
-
// immediately after installation, not all installed blocks.
|
|
71
|
-
const isJustInstalled = !!installedBlockTypes.find(blockType => blockType.name === block.name);
|
|
72
|
-
const isPreviouslyInstalled = getBlockType(block.name);
|
|
73
|
-
return isJustInstalled || !isPreviouslyInstalled;
|
|
74
|
-
});
|
|
75
|
-
if (downloadableBlocks.length === installableBlocks.length) {
|
|
76
|
-
return downloadableBlocks;
|
|
77
|
-
}
|
|
78
|
-
return installableBlocks;
|
|
79
|
-
}
|
|
80
|
-
let downloadableItems = hasPermission ? getInstallableBlocks(filterValue) : [];
|
|
81
|
-
if (downloadableItems.length === 0) {
|
|
82
|
-
downloadableItems = EMPTY_ARRAY;
|
|
83
|
-
}
|
|
84
|
-
const isLoading = isRequestingDownloadableBlocks(filterValue);
|
|
85
|
-
return {
|
|
86
|
-
downloadableItems,
|
|
87
|
-
hasPermission,
|
|
88
|
-
isLoading
|
|
89
|
-
};
|
|
90
|
-
})])(DownloadableBlocksPanel);
|
|
91
99
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__","Spinner","
|
|
1
|
+
{"version":3,"names":["__","Spinner","store","coreStore","useSelect","getBlockType","DownloadableBlocksList","DownloadableBlocksInserterPanel","DownloadableBlocksNoResults","blockDirectoryStore","EMPTY_ARRAY","useDownloadableBlocks","filterValue","select","getDownloadableBlocks","isRequestingDownloadableBlocks","getInstalledBlockTypes","hasPermission","canUser","downloadableBlocks","installedBlockTypes","installableBlocks","filter","name","isJustInstalled","some","blockType","isPreviouslyInstalled","length","isLoading","DownloadableBlocksPanel","onSelect","onHover","hasLocalBlocks","isTyping","undefined","createElement","Fragment","className","downloadableItems","items"],"sources":["@wordpress/block-directory/src/components/downloadable-blocks-panel/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Spinner } from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { getBlockType } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport DownloadableBlocksList from '../downloadable-blocks-list';\nimport DownloadableBlocksInserterPanel from './inserter-panel';\nimport DownloadableBlocksNoResults from './no-results';\nimport { store as blockDirectoryStore } from '../../store';\n\nconst EMPTY_ARRAY = [];\n\nconst useDownloadableBlocks = ( filterValue ) =>\n\tuseSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetDownloadableBlocks,\n\t\t\t\tisRequestingDownloadableBlocks,\n\t\t\t\tgetInstalledBlockTypes,\n\t\t\t} = select( blockDirectoryStore );\n\n\t\t\tconst hasPermission = select( coreStore ).canUser(\n\t\t\t\t'read',\n\t\t\t\t'block-directory/search'\n\t\t\t);\n\n\t\t\tlet downloadableBlocks = EMPTY_ARRAY;\n\t\t\tif ( hasPermission ) {\n\t\t\t\tdownloadableBlocks = getDownloadableBlocks( filterValue );\n\n\t\t\t\t// Filter out blocks that are already installed.\n\t\t\t\tconst installedBlockTypes = getInstalledBlockTypes();\n\t\t\t\tconst installableBlocks = downloadableBlocks.filter(\n\t\t\t\t\t( { name } ) => {\n\t\t\t\t\t\t// Check if the block has just been installed, in which case it\n\t\t\t\t\t\t// should still show in the list to avoid suddenly disappearing.\n\t\t\t\t\t\t// `installedBlockTypes` only returns blocks stored in state\n\t\t\t\t\t\t// immediately after installation, not all installed blocks.\n\t\t\t\t\t\tconst isJustInstalled = installedBlockTypes.some(\n\t\t\t\t\t\t\t( blockType ) => blockType.name === name\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst isPreviouslyInstalled = getBlockType( name );\n\t\t\t\t\t\treturn isJustInstalled || ! isPreviouslyInstalled;\n\t\t\t\t\t}\n\t\t\t\t);\n\n\t\t\t\t// Keep identity of the `downloadableBlocks` array if nothing was filtered out\n\t\t\t\tif ( installableBlocks.length !== downloadableBlocks.length ) {\n\t\t\t\t\tdownloadableBlocks = installableBlocks;\n\t\t\t\t}\n\n\t\t\t\t// Return identical empty array when there are no blocks\n\t\t\t\tif ( downloadableBlocks.length === 0 ) {\n\t\t\t\t\tdownloadableBlocks = EMPTY_ARRAY;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\thasPermission,\n\t\t\t\tdownloadableBlocks,\n\t\t\t\tisLoading: isRequestingDownloadableBlocks( filterValue ),\n\t\t\t};\n\t\t},\n\t\t[ filterValue ]\n\t);\n\nexport default function DownloadableBlocksPanel( {\n\tonSelect,\n\tonHover,\n\thasLocalBlocks,\n\tisTyping,\n\tfilterValue,\n} ) {\n\tconst { hasPermission, downloadableBlocks, isLoading } =\n\t\tuseDownloadableBlocks( filterValue );\n\n\tif ( hasPermission === undefined || isLoading || isTyping ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ hasPermission && ! hasLocalBlocks && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<p className=\"block-directory-downloadable-blocks-panel__no-local\">\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'No results available from your installed blocks.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<div className=\"block-editor-inserter__quick-inserter-separator\" />\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t\t<div className=\"block-directory-downloadable-blocks-panel has-blocks-loading\">\n\t\t\t\t\t<Spinner />\n\t\t\t\t</div>\n\t\t\t</>\n\t\t);\n\t}\n\n\tif ( false === hasPermission ) {\n\t\tif ( ! hasLocalBlocks ) {\n\t\t\treturn <DownloadableBlocksNoResults />;\n\t\t}\n\n\t\treturn null;\n\t}\n\n\tif ( downloadableBlocks.length === 0 ) {\n\t\treturn hasLocalBlocks ? null : <DownloadableBlocksNoResults />;\n\t}\n\n\treturn (\n\t\t<DownloadableBlocksInserterPanel\n\t\t\tdownloadableItems={ downloadableBlocks }\n\t\t\thasLocalBlocks={ hasLocalBlocks }\n\t\t>\n\t\t\t<DownloadableBlocksList\n\t\t\t\titems={ downloadableBlocks }\n\t\t\t\tonSelect={ onSelect }\n\t\t\t\tonHover={ onHover }\n\t\t\t/>\n\t\t</DownloadableBlocksInserterPanel>\n\t);\n}\n"],"mappings":"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"}
|
|
@@ -17,8 +17,7 @@ function InserterMenuDownloadableBlocksPanel() {
|
|
|
17
17
|
onSelect,
|
|
18
18
|
onHover,
|
|
19
19
|
filterValue,
|
|
20
|
-
hasItems
|
|
21
|
-
rootClientId
|
|
20
|
+
hasItems
|
|
22
21
|
}) => {
|
|
23
22
|
if (debouncedFilterValue !== filterValue) {
|
|
24
23
|
debouncedSetFilterValue(filterValue);
|
|
@@ -29,7 +28,6 @@ function InserterMenuDownloadableBlocksPanel() {
|
|
|
29
28
|
return createElement(DownloadableBlocksPanel, {
|
|
30
29
|
onSelect: onSelect,
|
|
31
30
|
onHover: onHover,
|
|
32
|
-
rootClientId: rootClientId,
|
|
33
31
|
filterValue: debouncedFilterValue,
|
|
34
32
|
hasLocalBlocks: hasItems,
|
|
35
33
|
isTyping: filterValue !== debouncedFilterValue
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__unstableInserterMenuExtension","debounce","useState","DownloadableBlocksPanel","InserterMenuDownloadableBlocksPanel","debouncedFilterValue","setFilterValue","debouncedSetFilterValue","createElement","onSelect","onHover","filterValue","hasItems","
|
|
1
|
+
{"version":3,"names":["__unstableInserterMenuExtension","debounce","useState","DownloadableBlocksPanel","InserterMenuDownloadableBlocksPanel","debouncedFilterValue","setFilterValue","debouncedSetFilterValue","createElement","onSelect","onHover","filterValue","hasItems","hasLocalBlocks","isTyping"],"sources":["@wordpress/block-directory/src/plugins/inserter-menu-downloadable-blocks-panel/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __unstableInserterMenuExtension } from '@wordpress/block-editor';\nimport { debounce } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DownloadableBlocksPanel from '../../components/downloadable-blocks-panel';\n\nfunction InserterMenuDownloadableBlocksPanel() {\n\tconst [ debouncedFilterValue, setFilterValue ] = useState( '' );\n\tconst debouncedSetFilterValue = debounce( setFilterValue, 400 );\n\n\treturn (\n\t\t<__unstableInserterMenuExtension>\n\t\t\t{ ( { onSelect, onHover, filterValue, hasItems } ) => {\n\t\t\t\tif ( debouncedFilterValue !== filterValue ) {\n\t\t\t\t\tdebouncedSetFilterValue( filterValue );\n\t\t\t\t}\n\n\t\t\t\tif ( ! debouncedFilterValue ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<DownloadableBlocksPanel\n\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\t\tfilterValue={ debouncedFilterValue }\n\t\t\t\t\t\thasLocalBlocks={ hasItems }\n\t\t\t\t\t\tisTyping={ filterValue !== debouncedFilterValue }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t</__unstableInserterMenuExtension>\n\t);\n}\n\nexport default InserterMenuDownloadableBlocksPanel;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,QAAQ,QAAQ,oBAAoB;;AAE7C;AACA;AACA;AACA,OAAOC,uBAAuB,MAAM,4CAA4C;AAEhF,SAASC,mCAAmCA,CAAA,EAAG;EAC9C,MAAM,CAAEC,oBAAoB,EAAEC,cAAc,CAAE,GAAGJ,QAAQ,CAAE,EAAG,CAAC;EAC/D,MAAMK,uBAAuB,GAAGN,QAAQ,CAAEK,cAAc,EAAE,GAAI,CAAC;EAE/D,OACCE,aAAA,CAACR,+BAA+B,QAC7B,CAAE;IAAES,QAAQ;IAAEC,OAAO;IAAEC,WAAW;IAAEC;EAAS,CAAC,KAAM;IACrD,IAAKP,oBAAoB,KAAKM,WAAW,EAAG;MAC3CJ,uBAAuB,CAAEI,WAAY,CAAC;IACvC;IAEA,IAAK,CAAEN,oBAAoB,EAAG;MAC7B,OAAO,IAAI;IACZ;IAEA,OACCG,aAAA,CAACL,uBAAuB;MACvBM,QAAQ,EAAGA,QAAU;MACrBC,OAAO,EAAGA,OAAS;MACnBC,WAAW,EAAGN,oBAAsB;MACpCQ,cAAc,EAAGD,QAAU;MAC3BE,QAAQ,EAAGH,WAAW,KAAKN;IAAsB,CACjD,CAAC;EAEJ,CACgC,CAAC;AAEpC;AAEA,eAAeD,mCAAmC"}
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
--wp-block-synced-color: #7a00df;
|
|
98
98
|
--wp-block-synced-color--rgb: 122, 0, 223;
|
|
99
99
|
}
|
|
100
|
-
@media (
|
|
100
|
+
@media (min-resolution: 192dpi) {
|
|
101
101
|
:root {
|
|
102
102
|
--wp-admin-border-width-focus: 1.5px;
|
|
103
103
|
}
|
|
@@ -168,6 +168,7 @@
|
|
|
168
168
|
.block-directory-downloadable-block-list-item.is-busy .block-directory-downloadable-block-list-item__author {
|
|
169
169
|
border: 0;
|
|
170
170
|
clip: rect(1px, 1px, 1px, 1px);
|
|
171
|
+
-webkit-clip-path: inset(50%);
|
|
171
172
|
clip-path: inset(50%);
|
|
172
173
|
height: 1px;
|
|
173
174
|
margin: -1px;
|
package/build-style/style.css
CHANGED
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
--wp-block-synced-color: #7a00df;
|
|
98
98
|
--wp-block-synced-color--rgb: 122, 0, 223;
|
|
99
99
|
}
|
|
100
|
-
@media (
|
|
100
|
+
@media (min-resolution: 192dpi) {
|
|
101
101
|
:root {
|
|
102
102
|
--wp-admin-border-width-focus: 1.5px;
|
|
103
103
|
}
|
|
@@ -168,6 +168,7 @@
|
|
|
168
168
|
.block-directory-downloadable-block-list-item.is-busy .block-directory-downloadable-block-list-item__author {
|
|
169
169
|
border: 0;
|
|
170
170
|
clip: rect(1px, 1px, 1px, 1px);
|
|
171
|
+
-webkit-clip-path: inset(50%);
|
|
171
172
|
clip-path: inset(50%);
|
|
172
173
|
height: 1px;
|
|
173
174
|
margin: -1px;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/block-directory",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.27.0",
|
|
4
4
|
"description": "Extend editor with block directory features to search, download and install blocks.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -26,25 +26,25 @@
|
|
|
26
26
|
"react-native": "src/index",
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@babel/runtime": "^7.16.0",
|
|
29
|
-
"@wordpress/a11y": "^3.
|
|
30
|
-
"@wordpress/api-fetch": "^6.
|
|
31
|
-
"@wordpress/block-editor": "^12.
|
|
32
|
-
"@wordpress/blocks": "^12.
|
|
33
|
-
"@wordpress/components": "^25.
|
|
34
|
-
"@wordpress/compose": "^6.
|
|
35
|
-
"@wordpress/core-data": "^6.
|
|
36
|
-
"@wordpress/data": "^9.
|
|
37
|
-
"@wordpress/edit-post": "^7.
|
|
38
|
-
"@wordpress/editor": "^13.
|
|
39
|
-
"@wordpress/element": "^5.
|
|
40
|
-
"@wordpress/hooks": "^3.
|
|
41
|
-
"@wordpress/html-entities": "^3.
|
|
42
|
-
"@wordpress/i18n": "^4.
|
|
43
|
-
"@wordpress/icons": "^9.
|
|
44
|
-
"@wordpress/notices": "^4.
|
|
45
|
-
"@wordpress/plugins": "^6.
|
|
46
|
-
"@wordpress/private-apis": "^0.
|
|
47
|
-
"@wordpress/url": "^3.
|
|
29
|
+
"@wordpress/a11y": "^3.50.0",
|
|
30
|
+
"@wordpress/api-fetch": "^6.47.0",
|
|
31
|
+
"@wordpress/block-editor": "^12.18.0",
|
|
32
|
+
"@wordpress/blocks": "^12.27.0",
|
|
33
|
+
"@wordpress/components": "^25.16.0",
|
|
34
|
+
"@wordpress/compose": "^6.27.0",
|
|
35
|
+
"@wordpress/core-data": "^6.27.0",
|
|
36
|
+
"@wordpress/data": "^9.20.0",
|
|
37
|
+
"@wordpress/edit-post": "^7.27.0",
|
|
38
|
+
"@wordpress/editor": "^13.27.0",
|
|
39
|
+
"@wordpress/element": "^5.27.0",
|
|
40
|
+
"@wordpress/hooks": "^3.50.0",
|
|
41
|
+
"@wordpress/html-entities": "^3.50.0",
|
|
42
|
+
"@wordpress/i18n": "^4.50.0",
|
|
43
|
+
"@wordpress/icons": "^9.41.0",
|
|
44
|
+
"@wordpress/notices": "^4.18.0",
|
|
45
|
+
"@wordpress/plugins": "^6.18.0",
|
|
46
|
+
"@wordpress/private-apis": "^0.32.0",
|
|
47
|
+
"@wordpress/url": "^3.51.0",
|
|
48
48
|
"change-case": "^4.1.2"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"publishConfig": {
|
|
55
55
|
"access": "public"
|
|
56
56
|
},
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "45de2cb4212fed7f2763e95f10300d1ff9d0ec08"
|
|
58
58
|
}
|
|
@@ -3,9 +3,8 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { __ } from '@wordpress/i18n';
|
|
5
5
|
import { Spinner } from '@wordpress/components';
|
|
6
|
-
import { compose } from '@wordpress/compose';
|
|
7
6
|
import { store as coreStore } from '@wordpress/core-data';
|
|
8
|
-
import {
|
|
7
|
+
import { useSelect } from '@wordpress/data';
|
|
9
8
|
import { getBlockType } from '@wordpress/blocks';
|
|
10
9
|
|
|
11
10
|
/**
|
|
@@ -18,16 +17,71 @@ import { store as blockDirectoryStore } from '../../store';
|
|
|
18
17
|
|
|
19
18
|
const EMPTY_ARRAY = [];
|
|
20
19
|
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
const useDownloadableBlocks = ( filterValue ) =>
|
|
21
|
+
useSelect(
|
|
22
|
+
( select ) => {
|
|
23
|
+
const {
|
|
24
|
+
getDownloadableBlocks,
|
|
25
|
+
isRequestingDownloadableBlocks,
|
|
26
|
+
getInstalledBlockTypes,
|
|
27
|
+
} = select( blockDirectoryStore );
|
|
28
|
+
|
|
29
|
+
const hasPermission = select( coreStore ).canUser(
|
|
30
|
+
'read',
|
|
31
|
+
'block-directory/search'
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
let downloadableBlocks = EMPTY_ARRAY;
|
|
35
|
+
if ( hasPermission ) {
|
|
36
|
+
downloadableBlocks = getDownloadableBlocks( filterValue );
|
|
37
|
+
|
|
38
|
+
// Filter out blocks that are already installed.
|
|
39
|
+
const installedBlockTypes = getInstalledBlockTypes();
|
|
40
|
+
const installableBlocks = downloadableBlocks.filter(
|
|
41
|
+
( { name } ) => {
|
|
42
|
+
// Check if the block has just been installed, in which case it
|
|
43
|
+
// should still show in the list to avoid suddenly disappearing.
|
|
44
|
+
// `installedBlockTypes` only returns blocks stored in state
|
|
45
|
+
// immediately after installation, not all installed blocks.
|
|
46
|
+
const isJustInstalled = installedBlockTypes.some(
|
|
47
|
+
( blockType ) => blockType.name === name
|
|
48
|
+
);
|
|
49
|
+
const isPreviouslyInstalled = getBlockType( name );
|
|
50
|
+
return isJustInstalled || ! isPreviouslyInstalled;
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
|
|
54
|
+
// Keep identity of the `downloadableBlocks` array if nothing was filtered out
|
|
55
|
+
if ( installableBlocks.length !== downloadableBlocks.length ) {
|
|
56
|
+
downloadableBlocks = installableBlocks;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// Return identical empty array when there are no blocks
|
|
60
|
+
if ( downloadableBlocks.length === 0 ) {
|
|
61
|
+
downloadableBlocks = EMPTY_ARRAY;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
return {
|
|
66
|
+
hasPermission,
|
|
67
|
+
downloadableBlocks,
|
|
68
|
+
isLoading: isRequestingDownloadableBlocks( filterValue ),
|
|
69
|
+
};
|
|
70
|
+
},
|
|
71
|
+
[ filterValue ]
|
|
72
|
+
);
|
|
73
|
+
|
|
74
|
+
export default function DownloadableBlocksPanel( {
|
|
23
75
|
onSelect,
|
|
24
76
|
onHover,
|
|
25
77
|
hasLocalBlocks,
|
|
26
|
-
hasPermission,
|
|
27
|
-
isLoading,
|
|
28
78
|
isTyping,
|
|
79
|
+
filterValue,
|
|
29
80
|
} ) {
|
|
30
|
-
|
|
81
|
+
const { hasPermission, downloadableBlocks, isLoading } =
|
|
82
|
+
useDownloadableBlocks( filterValue );
|
|
83
|
+
|
|
84
|
+
if ( hasPermission === undefined || isLoading || isTyping ) {
|
|
31
85
|
return (
|
|
32
86
|
<>
|
|
33
87
|
{ hasPermission && ! hasLocalBlocks && (
|
|
@@ -55,71 +109,20 @@ function DownloadableBlocksPanel( {
|
|
|
55
109
|
return null;
|
|
56
110
|
}
|
|
57
111
|
|
|
58
|
-
|
|
112
|
+
if ( downloadableBlocks.length === 0 ) {
|
|
113
|
+
return hasLocalBlocks ? null : <DownloadableBlocksNoResults />;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
return (
|
|
59
117
|
<DownloadableBlocksInserterPanel
|
|
60
|
-
downloadableItems={
|
|
118
|
+
downloadableItems={ downloadableBlocks }
|
|
61
119
|
hasLocalBlocks={ hasLocalBlocks }
|
|
62
120
|
>
|
|
63
121
|
<DownloadableBlocksList
|
|
64
|
-
items={
|
|
122
|
+
items={ downloadableBlocks }
|
|
65
123
|
onSelect={ onSelect }
|
|
66
124
|
onHover={ onHover }
|
|
67
125
|
/>
|
|
68
126
|
</DownloadableBlocksInserterPanel>
|
|
69
|
-
) : (
|
|
70
|
-
! hasLocalBlocks && <DownloadableBlocksNoResults />
|
|
71
127
|
);
|
|
72
128
|
}
|
|
73
|
-
|
|
74
|
-
export default compose( [
|
|
75
|
-
withSelect( ( select, { filterValue } ) => {
|
|
76
|
-
const {
|
|
77
|
-
getDownloadableBlocks,
|
|
78
|
-
isRequestingDownloadableBlocks,
|
|
79
|
-
getInstalledBlockTypes,
|
|
80
|
-
} = select( blockDirectoryStore );
|
|
81
|
-
|
|
82
|
-
const hasPermission = select( coreStore ).canUser(
|
|
83
|
-
'read',
|
|
84
|
-
'block-directory/search'
|
|
85
|
-
);
|
|
86
|
-
|
|
87
|
-
function getInstallableBlocks( term ) {
|
|
88
|
-
const downloadableBlocks = getDownloadableBlocks( term );
|
|
89
|
-
const installedBlockTypes = getInstalledBlockTypes();
|
|
90
|
-
// Filter out blocks that are already installed.
|
|
91
|
-
const installableBlocks = downloadableBlocks.filter( ( block ) => {
|
|
92
|
-
// Check if the block has just been installed, in which case it
|
|
93
|
-
// should still show in the list to avoid suddenly disappearing.
|
|
94
|
-
// `installedBlockTypes` only returns blocks stored in state
|
|
95
|
-
// immediately after installation, not all installed blocks.
|
|
96
|
-
const isJustInstalled = !! installedBlockTypes.find(
|
|
97
|
-
( blockType ) => blockType.name === block.name
|
|
98
|
-
);
|
|
99
|
-
const isPreviouslyInstalled = getBlockType( block.name );
|
|
100
|
-
return isJustInstalled || ! isPreviouslyInstalled;
|
|
101
|
-
} );
|
|
102
|
-
|
|
103
|
-
if ( downloadableBlocks.length === installableBlocks.length ) {
|
|
104
|
-
return downloadableBlocks;
|
|
105
|
-
}
|
|
106
|
-
return installableBlocks;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
let downloadableItems = hasPermission
|
|
110
|
-
? getInstallableBlocks( filterValue )
|
|
111
|
-
: [];
|
|
112
|
-
|
|
113
|
-
if ( downloadableItems.length === 0 ) {
|
|
114
|
-
downloadableItems = EMPTY_ARRAY;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
const isLoading = isRequestingDownloadableBlocks( filterValue );
|
|
118
|
-
|
|
119
|
-
return {
|
|
120
|
-
downloadableItems,
|
|
121
|
-
hasPermission,
|
|
122
|
-
isLoading,
|
|
123
|
-
};
|
|
124
|
-
} ),
|
|
125
|
-
] )( DownloadableBlocksPanel );
|
|
@@ -16,13 +16,7 @@ function InserterMenuDownloadableBlocksPanel() {
|
|
|
16
16
|
|
|
17
17
|
return (
|
|
18
18
|
<__unstableInserterMenuExtension>
|
|
19
|
-
{ ( {
|
|
20
|
-
onSelect,
|
|
21
|
-
onHover,
|
|
22
|
-
filterValue,
|
|
23
|
-
hasItems,
|
|
24
|
-
rootClientId,
|
|
25
|
-
} ) => {
|
|
19
|
+
{ ( { onSelect, onHover, filterValue, hasItems } ) => {
|
|
26
20
|
if ( debouncedFilterValue !== filterValue ) {
|
|
27
21
|
debouncedSetFilterValue( filterValue );
|
|
28
22
|
}
|
|
@@ -35,7 +29,6 @@ function InserterMenuDownloadableBlocksPanel() {
|
|
|
35
29
|
<DownloadableBlocksPanel
|
|
36
30
|
onSelect={ onSelect }
|
|
37
31
|
onHover={ onHover }
|
|
38
|
-
rootClientId={ rootClientId }
|
|
39
32
|
filterValue={ debouncedFilterValue }
|
|
40
33
|
hasLocalBlocks={ hasItems }
|
|
41
34
|
isTyping={ filterValue !== debouncedFilterValue }
|