@wordpress/block-editor 12.4.0 → 12.5.0

package/build-module/private-apis.js

@@ -5,6 +5,7 @@ import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import { getRichTextValues } from './components/rich-text/content';
+import { kebabCase } from './utils/object';
 import ResizableBoxPopover from './components/resizable-box-popover';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { PrivateListView } from './components/list-view';
@@ -16,6 +17,8 @@ import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
 import { BlockRemovalWarningModal } from './components/block-removal-warning-modal';
 import { useLayoutClasses, useLayoutStyles } from './hooks';
+import DimensionsTool from './components/dimensions-tool';
+import ResolutionTool from './components/resolution-tool';
 /**
  * Private @wordpress/block-editor APIs.
  */
@@ -24,6 +27,7 @@ export const privateApis = {};
 lock(privateApis, { ...globalStyles,
   ExperimentalBlockEditorProvider,
   getRichTextValues,
+  kebabCase,
   PrivateInserter,
   PrivateListView,
   ResizableBoxPopover,
@@ -35,6 +39,8 @@ lock(privateApis, { ...globalStyles,
   LayoutStyle,
   BlockRemovalWarningModal,
   useLayoutClasses,
-  useLayoutStyles
+  useLayoutStyles,
+  DimensionsTool,
+  ResolutionTool
 });
 //# sourceMappingURL=private-apis.js.map

package/build-module/private-apis.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/private-apis.js"],"names":["globalStyles","ExperimentalBlockEditorProvider","lock","getRichTextValues","ResizableBoxPopover","ComposedPrivateInserter","PrivateInserter","PrivateListView","BlockInfo","useShouldContextualToolbarShow","cleanEmptyObject","useBlockEditingMode","BlockQuickNavigation","LayoutStyle","BlockRemovalWarningModal","useLayoutClasses","useLayoutStyles","privateApis"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,YAAZ,MAA8B,4BAA9B;AACA,SAASC,+BAAT,QAAgD,uBAAhD;AACA,SAASC,IAAT,QAAqB,eAArB;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AACA,OAAOC,mBAAP,MAAgC,oCAAhC;AACA,SAASC,uBAAuB,IAAIC,eAApC,QAA2D,uBAA3D;AACA,SAASC,eAAT,QAAgC,wBAAhC;AACA,OAAOC,SAAP,MAAsB,mCAAtB;AACA,SAASC,8BAAT,QAA+C,4CAA/C;AACA,SAASC,gBAAT,QAAiC,eAAjC;AACA,SAASC,mBAAT,QAAoC,iCAApC;AACA,OAAOC,oBAAP,MAAiC,qCAAjC;AACA,SAASC,WAAT,QAA4B,gCAA5B;AACA,SAASC,wBAAT,QAAyC,0CAAzC;AACA,SAASC,gBAAT,EAA2BC,eAA3B,QAAkD,SAAlD;AAEA;AACA;AACA;;AACA,OAAO,MAAMC,WAAW,GAAG,EAApB;AACPf,IAAI,CAAEe,WAAF,EAAe,EAClB,GAAGjB,YADe;AAElBC,EAAAA,+BAFkB;AAGlBE,EAAAA,iBAHkB;AAIlBG,EAAAA,eAJkB;AAKlBC,EAAAA,eALkB;AAMlBH,EAAAA,mBANkB;AAOlBI,EAAAA,SAPkB;AAQlBC,EAAAA,8BARkB;AASlBC,EAAAA,gBATkB;AAUlBC,EAAAA,mBAVkB;AAWlBC,EAAAA,oBAXkB;AAYlBC,EAAAA,WAZkB;AAalBC,EAAAA,wBAbkB;AAclBC,EAAAA,gBAdkB;AAelBC,EAAAA;AAfkB,CAAf,CAAJ","sourcesContent":["/**\n * Internal dependencies\n */\nimport * as globalStyles from './components/global-styles';\nimport { ExperimentalBlockEditorProvider } from './components/provider';\nimport { lock } from './lock-unlock';\nimport { getRichTextValues } from './components/rich-text/content';\nimport ResizableBoxPopover from './components/resizable-box-popover';\nimport { ComposedPrivateInserter as PrivateInserter } from './components/inserter';\nimport { PrivateListView } from './components/list-view';\nimport BlockInfo from './components/block-info-slot-fill';\nimport { useShouldContextualToolbarShow } from './utils/use-should-contextual-toolbar-show';\nimport { cleanEmptyObject } from './hooks/utils';\nimport { useBlockEditingMode } from './components/block-editing-mode';\nimport BlockQuickNavigation from './components/block-quick-navigation';\nimport { LayoutStyle } from './components/block-list/layout';\nimport { BlockRemovalWarningModal } from './components/block-removal-warning-modal';\nimport { useLayoutClasses, useLayoutStyles } from './hooks';\n\n/**\n * Private @wordpress/block-editor APIs.\n */\nexport const privateApis = {};\nlock( privateApis, {\n\t...globalStyles,\n\tExperimentalBlockEditorProvider,\n\tgetRichTextValues,\n\tPrivateInserter,\n\tPrivateListView,\n\tResizableBoxPopover,\n\tBlockInfo,\n\tuseShouldContextualToolbarShow,\n\tcleanEmptyObject,\n\tuseBlockEditingMode,\n\tBlockQuickNavigation,\n\tLayoutStyle,\n\tBlockRemovalWarningModal,\n\tuseLayoutClasses,\n\tuseLayoutStyles,\n} );\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/private-apis.js"],"names":["globalStyles","ExperimentalBlockEditorProvider","lock","getRichTextValues","kebabCase","ResizableBoxPopover","ComposedPrivateInserter","PrivateInserter","PrivateListView","BlockInfo","useShouldContextualToolbarShow","cleanEmptyObject","useBlockEditingMode","BlockQuickNavigation","LayoutStyle","BlockRemovalWarningModal","useLayoutClasses","useLayoutStyles","DimensionsTool","ResolutionTool","privateApis"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,YAAZ,MAA8B,4BAA9B;AACA,SAASC,+BAAT,QAAgD,uBAAhD;AACA,SAASC,IAAT,QAAqB,eAArB;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AACA,SAASC,SAAT,QAA0B,gBAA1B;AACA,OAAOC,mBAAP,MAAgC,oCAAhC;AACA,SAASC,uBAAuB,IAAIC,eAApC,QAA2D,uBAA3D;AACA,SAASC,eAAT,QAAgC,wBAAhC;AACA,OAAOC,SAAP,MAAsB,mCAAtB;AACA,SAASC,8BAAT,QAA+C,4CAA/C;AACA,SAASC,gBAAT,QAAiC,eAAjC;AACA,SAASC,mBAAT,QAAoC,iCAApC;AACA,OAAOC,oBAAP,MAAiC,qCAAjC;AACA,SAASC,WAAT,QAA4B,gCAA5B;AACA,SAASC,wBAAT,QAAyC,0CAAzC;AACA,SAASC,gBAAT,EAA2BC,eAA3B,QAAkD,SAAlD;AACA,OAAOC,cAAP,MAA2B,8BAA3B;AACA,OAAOC,cAAP,MAA2B,8BAA3B;AAEA;AACA;AACA;;AACA,OAAO,MAAMC,WAAW,GAAG,EAApB;AACPlB,IAAI,CAAEkB,WAAF,EAAe,EAClB,GAAGpB,YADe;AAElBC,EAAAA,+BAFkB;AAGlBE,EAAAA,iBAHkB;AAIlBC,EAAAA,SAJkB;AAKlBG,EAAAA,eALkB;AAMlBC,EAAAA,eANkB;AAOlBH,EAAAA,mBAPkB;AAQlBI,EAAAA,SARkB;AASlBC,EAAAA,8BATkB;AAUlBC,EAAAA,gBAVkB;AAWlBC,EAAAA,mBAXkB;AAYlBC,EAAAA,oBAZkB;AAalBC,EAAAA,WAbkB;AAclBC,EAAAA,wBAdkB;AAelBC,EAAAA,gBAfkB;AAgBlBC,EAAAA,eAhBkB;AAiBlBC,EAAAA,cAjBkB;AAkBlBC,EAAAA;AAlBkB,CAAf,CAAJ","sourcesContent":["/**\n * Internal dependencies\n */\nimport * as globalStyles from './components/global-styles';\nimport { ExperimentalBlockEditorProvider } from './components/provider';\nimport { lock } from './lock-unlock';\nimport { getRichTextValues } from './components/rich-text/content';\nimport { kebabCase } from './utils/object';\nimport ResizableBoxPopover from './components/resizable-box-popover';\nimport { ComposedPrivateInserter as PrivateInserter } from './components/inserter';\nimport { PrivateListView } from './components/list-view';\nimport BlockInfo from './components/block-info-slot-fill';\nimport { useShouldContextualToolbarShow } from './utils/use-should-contextual-toolbar-show';\nimport { cleanEmptyObject } from './hooks/utils';\nimport { useBlockEditingMode } from './components/block-editing-mode';\nimport BlockQuickNavigation from './components/block-quick-navigation';\nimport { LayoutStyle } from './components/block-list/layout';\nimport { BlockRemovalWarningModal } from './components/block-removal-warning-modal';\nimport { useLayoutClasses, useLayoutStyles } from './hooks';\nimport DimensionsTool from './components/dimensions-tool';\nimport ResolutionTool from './components/resolution-tool';\n\n/**\n * Private @wordpress/block-editor APIs.\n */\nexport const privateApis = {};\nlock( privateApis, {\n\t...globalStyles,\n\tExperimentalBlockEditorProvider,\n\tgetRichTextValues,\n\tkebabCase,\n\tPrivateInserter,\n\tPrivateListView,\n\tResizableBoxPopover,\n\tBlockInfo,\n\tuseShouldContextualToolbarShow,\n\tcleanEmptyObject,\n\tuseBlockEditingMode,\n\tBlockQuickNavigation,\n\tLayoutStyle,\n\tBlockRemovalWarningModal,\n\tuseLayoutClasses,\n\tuseLayoutStyles,\n\tDimensionsTool,\n\tResolutionTool,\n} );\n"]}

package/build-module/private-apis.native.js

@@ -3,6 +3,7 @@
  */
 import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
+import { kebabCase } from './utils/object';
 import { lock } from './lock-unlock';
 /**
  * Private @wordpress/block-editor APIs.
@@ -10,6 +11,7 @@ import { lock } from './lock-unlock';
 
 export const privateApis = {};
 lock(privateApis, { ...globalStyles,
+  kebabCase,
   ExperimentalBlockEditorProvider
 });
 //# sourceMappingURL=private-apis.native.js.map

package/build-module/private-apis.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/private-apis.native.js"],"names":["globalStyles","ExperimentalBlockEditorProvider","lock","privateApis"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,YAAZ,MAA8B,4BAA9B;AACA,SAASC,+BAAT,QAAgD,uBAAhD;AACA,SAASC,IAAT,QAAqB,eAArB;AAEA;AACA;AACA;;AACA,OAAO,MAAMC,WAAW,GAAG,EAApB;AACPD,IAAI,CAAEC,WAAF,EAAe,EAClB,GAAGH,YADe;AAElBC,EAAAA;AAFkB,CAAf,CAAJ","sourcesContent":["/**\n * Internal dependencies\n */\nimport * as globalStyles from './components/global-styles';\nimport { ExperimentalBlockEditorProvider } from './components/provider';\nimport { lock } from './lock-unlock';\n\n/**\n * Private @wordpress/block-editor APIs.\n */\nexport const privateApis = {};\nlock( privateApis, {\n\t...globalStyles,\n\tExperimentalBlockEditorProvider,\n} );\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/private-apis.native.js"],"names":["globalStyles","ExperimentalBlockEditorProvider","kebabCase","lock","privateApis"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,YAAZ,MAA8B,4BAA9B;AACA,SAASC,+BAAT,QAAgD,uBAAhD;AACA,SAASC,SAAT,QAA0B,gBAA1B;AACA,SAASC,IAAT,QAAqB,eAArB;AAEA;AACA;AACA;;AACA,OAAO,MAAMC,WAAW,GAAG,EAApB;AACPD,IAAI,CAAEC,WAAF,EAAe,EAClB,GAAGJ,YADe;AAElBE,EAAAA,SAFkB;AAGlBD,EAAAA;AAHkB,CAAf,CAAJ","sourcesContent":["/**\n * Internal dependencies\n */\nimport * as globalStyles from './components/global-styles';\nimport { ExperimentalBlockEditorProvider } from './components/provider';\nimport { kebabCase } from './utils/object';\nimport { lock } from './lock-unlock';\n\n/**\n * Private @wordpress/block-editor APIs.\n */\nexport const privateApis = {};\nlock( privateApis, {\n\t...globalStyles,\n\tkebabCase,\n\tExperimentalBlockEditorProvider,\n} );\n"]}

package/build-module/store/actions.js

@@ -1,3 +1,5 @@
+/* eslint no-console: [ 'error', { allow: [ 'error', 'warn' ] } ] */
+
 /**
  * WordPress dependencies
  */
@@ -1183,7 +1185,9 @@ export function updateBlockListSettings(clientId, settings) {
  */
 
 export function updateSettings(settings) {
-  return __experimentalUpdateSettings(settings, true);
+  return __experimentalUpdateSettings(settings, {
+    stripExperimentalSettings: true
+  });
 }
 /**
  * Action that signals that a temporary reusable block has been saved
@@ -1466,4 +1470,190 @@ export function __unstableSetTemporarilyEditingAsBlocks(temporarilyEditingAsBloc
     temporarilyEditingAsBlocks
   };
 }
+/**
+ * Interface for inserter media requests.
+ *
+ * @typedef {Object} InserterMediaRequest
+ * @property {number} per_page How many items to fetch per page.
+ * @property {string} search   The search term to use for filtering the results.
+ */
+
+/**
+ * Interface for inserter media responses. Any media resource should
+ * map their response to this interface, in order to create the core
+ * WordPress media blocks (image, video, audio).
+ *
+ * @typedef {Object} InserterMediaItem
+ * @property {string}        title        The title of the media item.
+ * @property {string}        url          The source url of the media item.
+ * @property {string}        [previewUrl] The preview source url of the media item to display in the media list.
+ * @property {number}        [id]         The WordPress id of the media item.
+ * @property {number|string} [sourceId]   The id of the media item from external source.
+ * @property {string}        [alt]        The alt text of the media item.
+ * @property {string}        [caption]    The caption of the media item.
+ */
+
+/**
+ * Registers a new inserter media category. Once registered, the media category is
+ * available in the inserter's media tab.
+ *
+ * The following interfaces are used:
+ *
+ * _Type Definition_
+ *
+ * - _InserterMediaRequest_ `Object`: Interface for inserter media requests.
+ *
+ * _Properties_
+ *
+ * - _per_page_ `number`: How many items to fetch per page.
+ * - _search_ `string`: The search term to use for filtering the results.
+ *
+ * _Type Definition_
+ *
+ * - _InserterMediaItem_ `Object`: Interface for inserter media responses. Any media resource should
+ * map their response to this interface, in order to create the core
+ * WordPress media blocks (image, video, audio).
+ *
+ * _Properties_
+ *
+ * - _title_ `string`: The title of the media item.
+ * - _url_ `string: The source url of the media item.
+ * - _previewUrl_ `[string]`: The preview source url of the media item to display in the media list.
+ * - _id_ `[number]`: The WordPress id of the media item.
+ * - _sourceId_ `[number|string]`: The id of the media item from external source.
+ * - _alt_ `[string]`: The alt text of the media item.
+ * - _caption_ `[string]`: The caption of the media item.
+ *
+ * @param    {InserterMediaCategory}                                  category                       The inserter media category to register.
+ *
+ * @example
+ * ```js
+ *
+ * wp.data.dispatch('core/block-editor').registerInserterMediaCategory( {
+ * 	 name: 'openverse',
+ * 	 labels: {
+ * 	 	name: 'Openverse',
+ * 	 	search_items: 'Search Openverse',
+ * 	 },
+ * 	 mediaType: 'image',
+ * 	 async fetch( query = {} ) {
+ * 	 	const defaultArgs = {
+ * 	 		mature: false,
+ * 	 		excluded_source: 'flickr,inaturalist,wikimedia',
+ * 	 		license: 'pdm,cc0',
+ * 	 	};
+ * 	 	const finalQuery = { ...query, ...defaultArgs };
+ * 	 	// Sometimes you might need to map the supported request params according to `InserterMediaRequest`.
+ * 	 	// interface. In this example the `search` query param is named `q`.
+ * 	 	const mapFromInserterMediaRequest = {
+ * 	 		per_page: 'page_size',
+ * 	 		search: 'q',
+ * 	 	};
+ * 	 	const url = new URL( 'https://api.openverse.engineering/v1/images/' );
+ * 	 	Object.entries( finalQuery ).forEach( ( [ key, value ] ) => {
+ * 	 		const queryKey = mapFromInserterMediaRequest[ key ] || key;
+ * 	 		url.searchParams.set( queryKey, value );
+ * 	 	} );
+ * 	 	const response = await window.fetch( url, {
+ * 	 		headers: {
+ * 	 			'User-Agent': 'WordPress/inserter-media-fetch',
+ * 	 		},
+ * 	 	} );
+ * 	 	const jsonResponse = await response.json();
+ * 	 	const results = jsonResponse.results;
+ * 	 	return results.map( ( result ) => ( {
+ * 	 		...result,
+ * 	 		// If your response result includes an `id` prop that you want to access later, it should
+ * 	 		// be mapped to `InserterMediaItem`'s `sourceId` prop. This can be useful if you provide
+ * 	 		// a report URL getter.
+ * 	 		// Additionally you should always clear the `id` value of your response results because
+ * 	 		// it is used to identify WordPress media items.
+ * 	 		sourceId: result.id,
+ * 	 		id: undefined,
+ * 	 		caption: result.caption,
+ * 	 		previewUrl: result.thumbnail,
+ * 	 	} ) );
+ * 	 },
+ * 	 getReportUrl: ( { sourceId } ) =>
+ * 	 	`https://wordpress.org/openverse/image/${ sourceId }/report/`,
+ * 	 isExternalResource: true,
+ * } );
+ * ```
+ *
+ * @typedef {Object} InserterMediaCategory Interface for inserter media category.
+ * @property {string}                                                 name                           The name of the media category, that should be unique among all media categories.
+ * @property {Object}                                                 labels                         Labels for the media category.
+ * @property {string}                                                 labels.name                    General name of the media category. It's used in the inserter media items list.
+ * @property {string}                                                 [labels.search_items='Search'] Label for searching items. Default is ‘Search Posts’ / ‘Search Pages’.
+ * @property {('image'|'audio'|'video')}                              mediaType                      The media type of the media category.
+ * @property {(InserterMediaRequest) => Promise<InserterMediaItem[]>} fetch                          The function to fetch media items for the category.
+ * @property {(InserterMediaItem) => string}                          [getReportUrl]                 If the media category supports reporting media items, this function should return
+ *                                                                                                   the report url for the media item. It accepts the `InserterMediaItem` as an argument.
+ * @property {boolean}                                                [isExternalResource]           If the media category is an external resource, this should be set to true.
+ *                                                                                                   This is used to avoid making a request to the external resource when the user
+ *
+ */
+
+export const registerInserterMediaCategory = category => ({
+  select,
+  dispatch
+}) => {
+  if (!category || typeof category !== 'object') {
+    console.error('Category should be an `InserterMediaCategory` object.');
+    return;
+  }
+
+  if (!category.name) {
+    console.error('Category should have a `name` that should be unique among all media categories.');
+    return;
+  }
+
+  if (!category.labels?.name) {
+    console.error('Category should have a `labels.name`.');
+    return;
+  }
+
+  if (!['image', 'audio', 'video'].includes(category.mediaType)) {
+    console.error('Category should have `mediaType` property that is one of `image|audio|video`.');
+    return;
+  }
+
+  if (!category.fetch || typeof category.fetch !== 'function') {
+    console.error('Category should have a `fetch` function defined with the following signature `(InserterMediaRequest) => Promise<InserterMediaItem[]>`.');
+    return;
+  }
+
+  const {
+    inserterMediaCategories = []
+  } = select.getSettings();
+
+  if (inserterMediaCategories.some(({
+    name
+  }) => name === category.name)) {
+    console.error(`A category is already registered with the same name: "${category.name}".`);
+    return;
+  }
+
+  if (inserterMediaCategories.some(({
+    labels: {
+      name
+    }
+  }) => name === category.labels?.name)) {
+    console.error(`A category is already registered with the same labels.name: "${category.labels.name}".`);
+    return;
+  } // `inserterMediaCategories` is a private block editor setting, which means it cannot
+  // be updated through the public `updateSettings` action. We preserve this setting as
+  // private, so extenders can only add new inserter media categories and don't have any
+  // control over the core media categories.
+
+
+  dispatch({
+    type: 'UPDATE_SETTINGS',
+    settings: {
+      inserterMediaCategories: [...inserterMediaCategories, { ...category,
+        isExternalResource: true
+      }]
+    }
+  });
+};
 //# sourceMappingURL=actions.js.map