Nenhuma Descrição

list-reusable-blocks.js 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410
  1. /******/ (function() { // webpackBootstrap
  2. /******/ "use strict";
  3. /******/ // The require scope
  4. /******/ var __webpack_require__ = {};
  5. /******/
  6. /************************************************************************/
  7. /******/ /* webpack/runtime/compat get default export */
  8. /******/ !function() {
  9. /******/ // getDefaultExport function for compatibility with non-harmony modules
  10. /******/ __webpack_require__.n = function(module) {
  11. /******/ var getter = module && module.__esModule ?
  12. /******/ function() { return module['default']; } :
  13. /******/ function() { return module; };
  14. /******/ __webpack_require__.d(getter, { a: getter });
  15. /******/ return getter;
  16. /******/ };
  17. /******/ }();
  18. /******/
  19. /******/ /* webpack/runtime/define property getters */
  20. /******/ !function() {
  21. /******/ // define getter functions for harmony exports
  22. /******/ __webpack_require__.d = function(exports, definition) {
  23. /******/ for(var key in definition) {
  24. /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
  25. /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
  26. /******/ }
  27. /******/ }
  28. /******/ };
  29. /******/ }();
  30. /******/
  31. /******/ /* webpack/runtime/hasOwnProperty shorthand */
  32. /******/ !function() {
  33. /******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
  34. /******/ }();
  35. /******/
  36. /******/ /* webpack/runtime/make namespace object */
  37. /******/ !function() {
  38. /******/ // define __esModule on exports
  39. /******/ __webpack_require__.r = function(exports) {
  40. /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  41. /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  42. /******/ }
  43. /******/ Object.defineProperty(exports, '__esModule', { value: true });
  44. /******/ };
  45. /******/ }();
  46. /******/
  47. /************************************************************************/
  48. var __webpack_exports__ = {};
  49. // ESM COMPAT FLAG
  50. __webpack_require__.r(__webpack_exports__);
  51. ;// CONCATENATED MODULE: external ["wp","element"]
  52. var external_wp_element_namespaceObject = window["wp"]["element"];
  53. ;// CONCATENATED MODULE: external ["wp","i18n"]
  54. var external_wp_i18n_namespaceObject = window["wp"]["i18n"];
  55. ;// CONCATENATED MODULE: external "lodash"
  56. var external_lodash_namespaceObject = window["lodash"];
  57. ;// CONCATENATED MODULE: external ["wp","apiFetch"]
  58. var external_wp_apiFetch_namespaceObject = window["wp"]["apiFetch"];
  59. var external_wp_apiFetch_default = /*#__PURE__*/__webpack_require__.n(external_wp_apiFetch_namespaceObject);
  60. ;// CONCATENATED MODULE: ./node_modules/@wordpress/list-reusable-blocks/build-module/utils/file.js
  61. /**
  62. * Downloads a file.
  63. *
  64. * @param {string} fileName File Name.
  65. * @param {string} content File Content.
  66. * @param {string} contentType File mime type.
  67. */
  68. function download(fileName, content, contentType) {
  69. const file = new window.Blob([content], {
  70. type: contentType
  71. }); // IE11 can't use the click to download technique
  72. // we use a specific IE11 technique instead.
  73. if (window.navigator.msSaveOrOpenBlob) {
  74. window.navigator.msSaveOrOpenBlob(file, fileName);
  75. } else {
  76. const a = document.createElement('a');
  77. a.href = URL.createObjectURL(file);
  78. a.download = fileName;
  79. a.style.display = 'none';
  80. document.body.appendChild(a);
  81. a.click();
  82. document.body.removeChild(a);
  83. }
  84. }
  85. /**
  86. * Reads the textual content of the given file.
  87. *
  88. * @param {File} file File.
  89. * @return {Promise<string>} Content of the file.
  90. */
  91. function readTextFile(file) {
  92. const reader = new window.FileReader();
  93. return new Promise(resolve => {
  94. reader.onload = () => {
  95. resolve(reader.result);
  96. };
  97. reader.readAsText(file);
  98. });
  99. }
  100. ;// CONCATENATED MODULE: ./node_modules/@wordpress/list-reusable-blocks/build-module/utils/export.js
  101. /**
  102. * External dependencies
  103. */
  104. /**
  105. * WordPress dependencies
  106. */
  107. /**
  108. * Internal dependencies
  109. */
  110. /**
  111. * Export a reusable block as a JSON file.
  112. *
  113. * @param {number} id
  114. */
  115. async function exportReusableBlock(id) {
  116. const postType = await external_wp_apiFetch_default()({
  117. path: `/wp/v2/types/wp_block`
  118. });
  119. const post = await external_wp_apiFetch_default()({
  120. path: `/wp/v2/${postType.rest_base}/${id}?context=edit`
  121. });
  122. const title = post.title.raw;
  123. const content = post.content.raw;
  124. const fileContent = JSON.stringify({
  125. __file: 'wp_block',
  126. title,
  127. content
  128. }, null, 2);
  129. const fileName = (0,external_lodash_namespaceObject.kebabCase)(title) + '.json';
  130. download(fileName, fileContent, 'application/json');
  131. }
  132. /* harmony default export */ var utils_export = (exportReusableBlock);
  133. ;// CONCATENATED MODULE: external ["wp","components"]
  134. var external_wp_components_namespaceObject = window["wp"]["components"];
  135. ;// CONCATENATED MODULE: external ["wp","compose"]
  136. var external_wp_compose_namespaceObject = window["wp"]["compose"];
  137. ;// CONCATENATED MODULE: ./node_modules/@wordpress/list-reusable-blocks/build-module/utils/import.js
  138. /**
  139. * External dependencies
  140. */
  141. /**
  142. * WordPress dependencies
  143. */
  144. /**
  145. * Internal dependencies
  146. */
  147. /**
  148. * Import a reusable block from a JSON file.
  149. *
  150. * @param {File} file File.
  151. * @return {Promise} Promise returning the imported reusable block.
  152. */
  153. async function importReusableBlock(file) {
  154. const fileContent = await readTextFile(file);
  155. let parsedContent;
  156. try {
  157. parsedContent = JSON.parse(fileContent);
  158. } catch (e) {
  159. throw new Error('Invalid JSON file');
  160. }
  161. if (parsedContent.__file !== 'wp_block' || !parsedContent.title || !parsedContent.content || !(0,external_lodash_namespaceObject.isString)(parsedContent.title) || !(0,external_lodash_namespaceObject.isString)(parsedContent.content)) {
  162. throw new Error('Invalid Reusable block JSON file');
  163. }
  164. const postType = await external_wp_apiFetch_default()({
  165. path: `/wp/v2/types/wp_block`
  166. });
  167. const reusableBlock = await external_wp_apiFetch_default()({
  168. path: `/wp/v2/${postType.rest_base}`,
  169. data: {
  170. title: parsedContent.title,
  171. content: parsedContent.content,
  172. status: 'publish'
  173. },
  174. method: 'POST'
  175. });
  176. return reusableBlock;
  177. }
  178. /* harmony default export */ var utils_import = (importReusableBlock);
  179. ;// CONCATENATED MODULE: ./node_modules/@wordpress/list-reusable-blocks/build-module/components/import-form/index.js
  180. /**
  181. * WordPress dependencies
  182. */
  183. /**
  184. * Internal dependencies
  185. */
  186. function ImportForm(_ref) {
  187. let {
  188. instanceId,
  189. onUpload
  190. } = _ref;
  191. const inputId = 'list-reusable-blocks-import-form-' + instanceId;
  192. const formRef = (0,external_wp_element_namespaceObject.useRef)();
  193. const [isLoading, setIsLoading] = (0,external_wp_element_namespaceObject.useState)(false);
  194. const [error, setError] = (0,external_wp_element_namespaceObject.useState)(null);
  195. const [file, setFile] = (0,external_wp_element_namespaceObject.useState)(null);
  196. const onChangeFile = event => {
  197. setFile(event.target.files[0]);
  198. setError(null);
  199. };
  200. const onSubmit = event => {
  201. event.preventDefault();
  202. if (!file) {
  203. return;
  204. }
  205. setIsLoading({
  206. isLoading: true
  207. });
  208. utils_import(file).then(reusableBlock => {
  209. if (!formRef) {
  210. return;
  211. }
  212. setIsLoading(false);
  213. onUpload(reusableBlock);
  214. }).catch(errors => {
  215. if (!formRef) {
  216. return;
  217. }
  218. let uiMessage;
  219. switch (errors.message) {
  220. case 'Invalid JSON file':
  221. uiMessage = (0,external_wp_i18n_namespaceObject.__)('Invalid JSON file');
  222. break;
  223. case 'Invalid Reusable block JSON file':
  224. uiMessage = (0,external_wp_i18n_namespaceObject.__)('Invalid Reusable block JSON file');
  225. break;
  226. default:
  227. uiMessage = (0,external_wp_i18n_namespaceObject.__)('Unknown error');
  228. }
  229. setIsLoading(false);
  230. setError(uiMessage);
  231. });
  232. };
  233. const onDismissError = () => {
  234. setError(null);
  235. };
  236. return (0,external_wp_element_namespaceObject.createElement)("form", {
  237. className: "list-reusable-blocks-import-form",
  238. onSubmit: onSubmit,
  239. ref: formRef
  240. }, error && (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.Notice, {
  241. status: "error",
  242. onRemove: () => onDismissError()
  243. }, error), (0,external_wp_element_namespaceObject.createElement)("label", {
  244. htmlFor: inputId,
  245. className: "list-reusable-blocks-import-form__label"
  246. }, (0,external_wp_i18n_namespaceObject.__)('File')), (0,external_wp_element_namespaceObject.createElement)("input", {
  247. id: inputId,
  248. type: "file",
  249. onChange: onChangeFile
  250. }), (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.Button, {
  251. type: "submit",
  252. isBusy: isLoading,
  253. disabled: !file || isLoading,
  254. variant: "secondary",
  255. className: "list-reusable-blocks-import-form__button"
  256. }, (0,external_wp_i18n_namespaceObject._x)('Import', 'button label')));
  257. }
  258. /* harmony default export */ var import_form = ((0,external_wp_compose_namespaceObject.withInstanceId)(ImportForm));
  259. ;// CONCATENATED MODULE: ./node_modules/@wordpress/list-reusable-blocks/build-module/components/import-dropdown/index.js
  260. /**
  261. * External dependencies
  262. */
  263. /**
  264. * WordPress dependencies
  265. */
  266. /**
  267. * Internal dependencies
  268. */
  269. function ImportDropdown(_ref) {
  270. let {
  271. onUpload
  272. } = _ref;
  273. return (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.Dropdown, {
  274. position: "bottom right",
  275. contentClassName: "list-reusable-blocks-import-dropdown__content",
  276. renderToggle: _ref2 => {
  277. let {
  278. isOpen,
  279. onToggle
  280. } = _ref2;
  281. return (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.Button, {
  282. "aria-expanded": isOpen,
  283. onClick: onToggle,
  284. variant: "primary"
  285. }, (0,external_wp_i18n_namespaceObject.__)('Import from JSON'));
  286. },
  287. renderContent: _ref3 => {
  288. let {
  289. onClose
  290. } = _ref3;
  291. return (0,external_wp_element_namespaceObject.createElement)(import_form, {
  292. onUpload: (0,external_lodash_namespaceObject.flow)(onClose, onUpload)
  293. });
  294. }
  295. });
  296. }
  297. /* harmony default export */ var import_dropdown = (ImportDropdown);
  298. ;// CONCATENATED MODULE: ./node_modules/@wordpress/list-reusable-blocks/build-module/index.js
  299. /**
  300. * WordPress dependencies
  301. */
  302. /**
  303. * Internal dependencies
  304. */
  305. // Setup Export Links.
  306. document.body.addEventListener('click', event => {
  307. if (!event.target.classList.contains('wp-list-reusable-blocks__export')) {
  308. return;
  309. }
  310. event.preventDefault();
  311. utils_export(event.target.dataset.id);
  312. }); // Setup Import Form.
  313. document.addEventListener('DOMContentLoaded', () => {
  314. const button = document.querySelector('.page-title-action');
  315. if (!button) {
  316. return;
  317. }
  318. const showNotice = () => {
  319. const notice = document.createElement('div');
  320. notice.className = 'notice notice-success is-dismissible';
  321. notice.innerHTML = `<p>${(0,external_wp_i18n_namespaceObject.__)('Reusable block imported successfully!')}</p>`;
  322. const headerEnd = document.querySelector('.wp-header-end');
  323. if (!headerEnd) {
  324. return;
  325. }
  326. headerEnd.parentNode.insertBefore(notice, headerEnd);
  327. };
  328. const container = document.createElement('div');
  329. container.className = 'list-reusable-blocks__container';
  330. button.parentNode.insertBefore(container, button);
  331. (0,external_wp_element_namespaceObject.render)((0,external_wp_element_namespaceObject.createElement)(import_dropdown, {
  332. onUpload: showNotice
  333. }), container);
  334. });
  335. (window.wp = window.wp || {}).listReusableBlocks = __webpack_exports__;
  336. /******/ })()
  337. ;