@wordpress/block-editor 15.6.1 → 15.7.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.
Files changed (158) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/build/components/background-image-control/index.js +2 -2
  3. package/build/components/background-image-control/index.js.map +2 -2
  4. package/build/components/block-quick-navigation/index.js +1 -0
  5. package/build/components/block-quick-navigation/index.js.map +2 -2
  6. package/build/components/block-toolbar/switch-section-style.js +2 -5
  7. package/build/components/block-toolbar/switch-section-style.js.map +2 -2
  8. package/build/components/global-styles/border-panel.js +2 -1
  9. package/build/components/global-styles/border-panel.js.map +2 -2
  10. package/build/components/global-styles/color-panel.js +2 -1
  11. package/build/components/global-styles/color-panel.js.map +2 -2
  12. package/build/components/global-styles/dimensions-panel.js +3 -2
  13. package/build/components/global-styles/dimensions-panel.js.map +2 -2
  14. package/build/components/global-styles/filters-panel.js +2 -1
  15. package/build/components/global-styles/filters-panel.js.map +2 -2
  16. package/build/components/global-styles/hooks.js +0 -179
  17. package/build/components/global-styles/hooks.js.map +3 -3
  18. package/build/components/global-styles/index.js +0 -29
  19. package/build/components/global-styles/index.js.map +2 -2
  20. package/build/components/global-styles/typography-panel.js +2 -1
  21. package/build/components/global-styles/typography-panel.js.map +2 -2
  22. package/build/components/global-styles/typography-utils.js +2 -49
  23. package/build/components/global-styles/typography-utils.js.map +2 -2
  24. package/build/components/global-styles/utils.js +0 -396
  25. package/build/components/global-styles/utils.js.map +3 -3
  26. package/build/components/inserter/media-tab/media-tab.js +33 -1
  27. package/build/components/inserter/media-tab/media-tab.js.map +3 -3
  28. package/build/components/inserter/tips.js +0 -2
  29. package/build/components/inserter/tips.js.map +2 -2
  30. package/build/components/media-placeholder/index.js +31 -1
  31. package/build/components/media-placeholder/index.js.map +3 -3
  32. package/build/components/media-replace-flow/index.js +29 -1
  33. package/build/components/media-replace-flow/index.js.map +3 -3
  34. package/build/components/{global-styles/context.js → media-upload-modal/index.js} +8 -23
  35. package/build/components/media-upload-modal/index.js.map +7 -0
  36. package/build/hooks/allowed-blocks.js +3 -8
  37. package/build/hooks/allowed-blocks.js.map +3 -3
  38. package/build/hooks/block-style-variation.js +10 -23
  39. package/build/hooks/block-style-variation.js.map +2 -2
  40. package/build/hooks/duotone.js +3 -3
  41. package/build/hooks/duotone.js.map +2 -2
  42. package/build/hooks/fit-text.js +2 -2
  43. package/build/hooks/fit-text.js.map +2 -2
  44. package/build/hooks/font-size.js +2 -2
  45. package/build/hooks/font-size.js.map +2 -2
  46. package/build/hooks/use-typography-props.js +2 -2
  47. package/build/hooks/use-typography-props.js.map +2 -2
  48. package/build/private-apis.js +3 -1
  49. package/build/private-apis.js.map +3 -3
  50. package/build-module/components/background-image-control/index.js +1 -1
  51. package/build-module/components/background-image-control/index.js.map +2 -2
  52. package/build-module/components/block-quick-navigation/index.js +1 -0
  53. package/build-module/components/block-quick-navigation/index.js.map +2 -2
  54. package/build-module/components/block-toolbar/switch-section-style.js +2 -5
  55. package/build-module/components/block-toolbar/switch-section-style.js.map +2 -2
  56. package/build-module/components/global-styles/border-panel.js +2 -1
  57. package/build-module/components/global-styles/border-panel.js.map +2 -2
  58. package/build-module/components/global-styles/color-panel.js +2 -1
  59. package/build-module/components/global-styles/color-panel.js.map +2 -2
  60. package/build-module/components/global-styles/dimensions-panel.js +2 -1
  61. package/build-module/components/global-styles/dimensions-panel.js.map +2 -2
  62. package/build-module/components/global-styles/filters-panel.js +2 -1
  63. package/build-module/components/global-styles/filters-panel.js.map +2 -2
  64. package/build-module/components/global-styles/hooks.js +1 -167
  65. package/build-module/components/global-styles/hooks.js.map +2 -2
  66. package/build-module/components/global-styles/index.js +1 -29
  67. package/build-module/components/global-styles/index.js.map +2 -2
  68. package/build-module/components/global-styles/typography-panel.js +2 -1
  69. package/build-module/components/global-styles/typography-panel.js.map +2 -2
  70. package/build-module/components/global-styles/typography-utils.js +1 -49
  71. package/build-module/components/global-styles/typography-utils.js.map +2 -2
  72. package/build-module/components/global-styles/utils.js +0 -372
  73. package/build-module/components/global-styles/utils.js.map +2 -2
  74. package/build-module/components/inserter/media-tab/media-tab.js +34 -2
  75. package/build-module/components/inserter/media-tab/media-tab.js.map +2 -2
  76. package/build-module/components/inserter/tips.js +0 -2
  77. package/build-module/components/inserter/tips.js.map +2 -2
  78. package/build-module/components/media-placeholder/index.js +31 -1
  79. package/build-module/components/media-placeholder/index.js.map +2 -2
  80. package/build-module/components/media-replace-flow/index.js +29 -1
  81. package/build-module/components/media-replace-flow/index.js.map +2 -2
  82. package/build-module/components/media-upload-modal/index.js +7 -0
  83. package/build-module/components/media-upload-modal/index.js.map +7 -0
  84. package/build-module/hooks/allowed-blocks.js +3 -8
  85. package/build-module/hooks/allowed-blocks.js.map +2 -2
  86. package/build-module/hooks/block-style-variation.js +8 -25
  87. package/build-module/hooks/block-style-variation.js.map +2 -2
  88. package/build-module/hooks/duotone.js +3 -3
  89. package/build-module/hooks/duotone.js.map +2 -2
  90. package/build-module/hooks/fit-text.js +2 -2
  91. package/build-module/hooks/fit-text.js.map +2 -2
  92. package/build-module/hooks/font-size.js +1 -1
  93. package/build-module/hooks/font-size.js.map +2 -2
  94. package/build-module/hooks/use-typography-props.js +1 -1
  95. package/build-module/hooks/use-typography-props.js.map +2 -2
  96. package/build-module/private-apis.js +3 -1
  97. package/build-module/private-apis.js.map +2 -2
  98. package/build-style/style-rtl.css +10 -6
  99. package/build-style/style.css +10 -6
  100. package/package.json +36 -35
  101. package/src/components/background-image-control/index.js +1 -1
  102. package/src/components/block-card/style.scss +1 -1
  103. package/src/components/block-navigation/style.scss +1 -1
  104. package/src/components/block-quick-navigation/index.js +1 -0
  105. package/src/components/block-quick-navigation/style.scss +5 -0
  106. package/src/components/block-switcher/style.scss +1 -1
  107. package/src/components/block-toolbar/switch-section-style.js +2 -5
  108. package/src/components/color-palette/test/__snapshots__/control.js.snap +1 -1
  109. package/src/components/global-styles/border-panel.js +2 -1
  110. package/src/components/global-styles/color-panel.js +2 -1
  111. package/src/components/global-styles/color-panel.native.js +1 -1
  112. package/src/components/global-styles/dimensions-panel.js +2 -1
  113. package/src/components/global-styles/filters-panel.js +2 -1
  114. package/src/components/global-styles/hooks.js +1 -200
  115. package/src/components/global-styles/index.js +1 -17
  116. package/src/components/global-styles/test/typography-utils.js +0 -806
  117. package/src/components/global-styles/typography-panel.js +2 -1
  118. package/src/components/global-styles/typography-utils.js +0 -133
  119. package/src/components/global-styles/utils.js +0 -568
  120. package/src/components/inserter/media-tab/media-tab.js +44 -2
  121. package/src/components/inserter/style.scss +2 -2
  122. package/src/components/inserter/tips.js +0 -2
  123. package/src/components/media-placeholder/index.js +41 -1
  124. package/src/components/media-replace-flow/index.js +39 -1
  125. package/src/components/media-upload-modal/index.js +18 -0
  126. package/src/components/multi-selection-inspector/style.scss +1 -1
  127. package/src/hooks/allowed-blocks.js +3 -11
  128. package/src/hooks/block-style-variation.js +8 -28
  129. package/src/hooks/duotone.js +3 -3
  130. package/src/hooks/fit-text.js +2 -2
  131. package/src/hooks/font-size.js +1 -1
  132. package/src/hooks/use-typography-props.js +1 -1
  133. package/src/private-apis.js +2 -0
  134. package/src/style.scss +1 -0
  135. package/tsconfig.json +2 -0
  136. package/build/components/global-styles/context.js.map +0 -7
  137. package/build/components/global-styles/get-block-css-selector.js +0 -78
  138. package/build/components/global-styles/get-block-css-selector.js.map +0 -7
  139. package/build/components/global-styles/get-global-styles-changes.js +0 -216
  140. package/build/components/global-styles/get-global-styles-changes.js.map +0 -7
  141. package/build/components/global-styles/use-global-styles-output.js +0 -998
  142. package/build/components/global-styles/use-global-styles-output.js.map +0 -7
  143. package/build-module/components/global-styles/context.js +0 -17
  144. package/build-module/components/global-styles/context.js.map +0 -7
  145. package/build-module/components/global-styles/get-block-css-selector.js +0 -54
  146. package/build-module/components/global-styles/get-block-css-selector.js.map +0 -7
  147. package/build-module/components/global-styles/get-global-styles-changes.js +0 -182
  148. package/build-module/components/global-styles/get-global-styles-changes.js.map +0 -7
  149. package/build-module/components/global-styles/use-global-styles-output.js +0 -979
  150. package/build-module/components/global-styles/use-global-styles-output.js.map +0 -7
  151. package/src/components/global-styles/README.md +0 -190
  152. package/src/components/global-styles/context.js +0 -16
  153. package/src/components/global-styles/get-block-css-selector.js +0 -114
  154. package/src/components/global-styles/get-global-styles-changes.js +0 -252
  155. package/src/components/global-styles/test/get-global-styles-changes.js +0 -290
  156. package/src/components/global-styles/test/use-global-styles-output.js +0 -1131
  157. package/src/components/global-styles/test/utils.js +0 -499
  158. package/src/components/global-styles/use-global-styles-output.js +0 -1487
@@ -25,6 +25,7 @@ import deprecated from '@wordpress/deprecated';
25
25
  * Internal dependencies
26
26
  */
27
27
  import MediaUpload from '../media-upload';
28
+ import MediaUploadModal from '../media-upload-modal';
28
29
  import MediaUploadCheck from '../media-upload/check';
29
30
  import URLPopover from '../url-popover';
30
31
  import { store as blockEditorStore } from '../../store';
@@ -32,6 +33,45 @@ import { parseDropEvent } from '../use-on-block-drop';
32
33
 
33
34
  const noop = () => {};
34
35
 
36
+ /**
37
+ * Conditional Media component that uses MediaUploadModal when experiment is enabled,
38
+ * otherwise falls back to MediaUpload.
39
+ *
40
+ * @param {Object} root0 Component props.
41
+ * @param {Function} root0.render Render prop function that receives { open } object.
42
+ * @return {JSX.Element} The component.
43
+ */
44
+ function ConditionalMediaUpload( { render, ...props } ) {
45
+ const [ isModalOpen, setIsModalOpen ] = useState( false );
46
+ const mediaUpload = useSelect( ( select ) => {
47
+ const { getSettings } = select( blockEditorStore );
48
+ return getSettings().mediaUpload;
49
+ }, [] );
50
+
51
+ if ( window.__experimentalDataViewsMediaModal ) {
52
+ return (
53
+ <>
54
+ { render && render( { open: () => setIsModalOpen( true ) } ) }
55
+ <MediaUploadModal
56
+ { ...props }
57
+ isOpen={ isModalOpen }
58
+ onClose={ () => {
59
+ setIsModalOpen( false );
60
+ props.onClose?.();
61
+ } }
62
+ onSelect={ ( media ) => {
63
+ setIsModalOpen( false );
64
+ props.onSelect?.( media );
65
+ } }
66
+ onUpload={ mediaUpload }
67
+ />
68
+ </>
69
+ );
70
+ }
71
+
72
+ return <MediaUpload { ...props } render={ render } />;
73
+ }
74
+
35
75
  const InsertFromURLPopover = ( {
36
76
  src,
37
77
  onChange,
@@ -448,7 +488,7 @@ export function MediaPlaceholder( {
448
488
  };
449
489
  const libraryButton = mediaLibraryButton ?? defaultButton;
450
490
  const uploadMediaLibraryButton = (
451
- <MediaUpload
491
+ <ConditionalMediaUpload
452
492
  addToGallery={ addToGallery }
453
493
  gallery={ multiple && onlyAllowsImages() }
454
494
  multiple={ multiple }
@@ -12,6 +12,7 @@ import {
12
12
  ToolbarButton,
13
13
  } from '@wordpress/components';
14
14
  import { useSelect, withDispatch } from '@wordpress/data';
15
+ import { useState } from '@wordpress/element';
15
16
  import { DOWN } from '@wordpress/keycodes';
16
17
  import {
17
18
  postFeaturedImage,
@@ -26,6 +27,7 @@ import { store as noticesStore } from '@wordpress/notices';
26
27
  * Internal dependencies
27
28
  */
28
29
  import MediaUpload from '../media-upload';
30
+ import MediaUploadModal from '../media-upload-modal';
29
31
  import MediaUploadCheck from '../media-upload/check';
30
32
  import LinkControl from '../link-control';
31
33
  import { store as blockEditorStore } from '../../store';
@@ -33,6 +35,42 @@ import { store as blockEditorStore } from '../../store';
33
35
  const noop = () => {};
34
36
  let uniqueId = 0;
35
37
 
38
+ /**
39
+ * Conditional Media component that uses MediaUploadModal when experiment is enabled,
40
+ * otherwise falls back to MediaUpload.
41
+ *
42
+ * @param {Object} root0 Component props.
43
+ * @param {Function} root0.render Render prop function that receives { open } object.
44
+ * @return {JSX.Element} The component.
45
+ */
46
+ function ConditionalMediaUpload( { render, ...props } ) {
47
+ const [ isModalOpen, setIsModalOpen ] = useState( false );
48
+ const { getSettings } = useSelect( blockEditorStore );
49
+
50
+ if ( window.__experimentalDataViewsMediaModal ) {
51
+ return (
52
+ <>
53
+ { render && render( { open: () => setIsModalOpen( true ) } ) }
54
+ <MediaUploadModal
55
+ { ...props }
56
+ isOpen={ isModalOpen }
57
+ onClose={ () => {
58
+ setIsModalOpen( false );
59
+ props.onClose?.();
60
+ } }
61
+ onSelect={ ( media ) => {
62
+ setIsModalOpen( false );
63
+ props.onSelect?.( media );
64
+ } }
65
+ onUpload={ getSettings().mediaUpload }
66
+ />
67
+ </>
68
+ );
69
+ }
70
+
71
+ return <MediaUpload { ...props } render={ render } />;
72
+ }
73
+
36
74
  const MediaReplaceFlow = ( {
37
75
  mediaURL,
38
76
  mediaId,
@@ -157,7 +195,7 @@ const MediaReplaceFlow = ( {
157
195
  <>
158
196
  <NavigableMenu className="block-editor-media-replace-flow__media-upload-menu">
159
197
  <MediaUploadCheck>
160
- <MediaUpload
198
+ <ConditionalMediaUpload
161
199
  gallery={ gallery }
162
200
  addToGallery={ addToGallery }
163
201
  multiple={ multiple }
@@ -0,0 +1,18 @@
1
+ /**
2
+ * WordPress dependencies
3
+ */
4
+ import { withFilters } from '@wordpress/components';
5
+
6
+ /**
7
+ * This is a placeholder for the media upload modal component necessary to make it possible to provide
8
+ * an integration with the core blocks that handle media files. By default it renders nothing but
9
+ * it provides a way to have it overridden with the `editor.MediaUploadModal` filter.
10
+ *
11
+ * @return {Component} The component to be rendered.
12
+ */
13
+ const MediaUploadModal = () => null;
14
+
15
+ /**
16
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-upload-modal/README.md
17
+ */
18
+ export default withFilters( 'editor.MediaUploadModal' )( MediaUploadModal );
@@ -5,7 +5,7 @@
5
5
  }
6
6
 
7
7
  .block-editor-multi-selection-inspector__card-title {
8
- font-weight: 500;
8
+ font-weight: $font-weight-medium;
9
9
  }
10
10
 
11
11
  .block-editor-multi-selection-inspector__card .block-editor-block-icon {
@@ -3,25 +3,17 @@
3
3
  */
4
4
  import { addFilter } from '@wordpress/hooks';
5
5
  import { hasBlockSupport } from '@wordpress/blocks';
6
- import { useSelect } from '@wordpress/data';
7
6
 
8
7
  /**
9
8
  * Internal dependencies
10
9
  */
11
- import { store as blockEditorStore } from '../store';
12
10
  import { PrivateInspectorControlsAllowedBlocks } from '../components/inspector-controls/groups';
13
11
  import BlockAllowedBlocksControl from '../components/block-allowed-blocks/allowed-blocks-control';
12
+ import { useBlockEditingMode } from '../components/block-editing-mode';
14
13
 
15
14
  function BlockEditAllowedBlocksControlPure( { clientId } ) {
16
- const isContentOnly = useSelect(
17
- ( select ) => {
18
- return (
19
- select( blockEditorStore ).getBlockEditingMode( clientId ) ===
20
- 'contentOnly'
21
- );
22
- },
23
- [ clientId ]
24
- );
15
+ const blockEditingMode = useBlockEditingMode();
16
+ const isContentOnly = blockEditingMode === 'contentOnly';
25
17
 
26
18
  if ( isContentOnly ) {
27
19
  return null;
@@ -3,16 +3,12 @@
3
3
  */
4
4
  import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
5
5
  import { useSelect } from '@wordpress/data';
6
- import { useContext, useMemo } from '@wordpress/element';
6
+ import { useMemo } from '@wordpress/element';
7
+ import { toStyles, getBlockSelectors } from '@wordpress/global-styles-engine';
7
8
 
8
9
  /**
9
10
  * Internal dependencies
10
11
  */
11
- import {
12
- GlobalStylesContext,
13
- toStyles,
14
- getBlockSelectors,
15
- } from '../components/global-styles';
16
12
  import { usePrivateStyleOverride } from './utils';
17
13
  import { getValueFromObjectPath } from '../utils/object';
18
14
  import { store as blockEditorStore } from '../store';
@@ -127,7 +123,6 @@ export function __unstableBlockStyleVariationOverridesWithConfig( { config } ) {
127
123
  };
128
124
  const blockSelectors = getBlockSelectors(
129
125
  getBlockTypes(),
130
- getBlockStyles,
131
126
  override.clientId
132
127
  );
133
128
  const hasBlockGapSupport = false;
@@ -253,10 +248,6 @@ export function getVariationStylesWithRefValues(
253
248
  }
254
249
 
255
250
  function useBlockStyleVariation( name, variation, clientId ) {
256
- // Prefer global styles data in GlobalStylesContext, which are available
257
- // if in the site editor. Otherwise fall back to whatever is in the
258
- // editor settings and available in the post editor.
259
- const { merged: mergedConfig } = useContext( GlobalStylesContext );
260
251
  const { globalSettings, globalStyles } = useSelect( ( select ) => {
261
252
  const settings = select( blockEditorStore ).getSettings();
262
253
  return {
@@ -268,15 +259,15 @@ function useBlockStyleVariation( name, variation, clientId ) {
268
259
  return useMemo( () => {
269
260
  const variationStyles = getVariationStylesWithRefValues(
270
261
  {
271
- settings: mergedConfig?.settings ?? globalSettings,
272
- styles: mergedConfig?.styles ?? globalStyles,
262
+ settings: globalSettings,
263
+ styles: globalStyles,
273
264
  },
274
265
  name,
275
266
  variation
276
267
  );
277
268
 
278
269
  return {
279
- settings: mergedConfig?.settings ?? globalSettings,
270
+ settings: globalSettings,
280
271
  // The variation style data is all that is needed to generate
281
272
  // the styles for the current application to a block. The variation
282
273
  // name is updated to match the instance specific class name.
@@ -290,14 +281,7 @@ function useBlockStyleVariation( name, variation, clientId ) {
290
281
  },
291
282
  },
292
283
  };
293
- }, [
294
- mergedConfig,
295
- globalSettings,
296
- globalStyles,
297
- variation,
298
- clientId,
299
- name,
300
- ] );
284
+ }, [ globalSettings, globalStyles, variation, clientId, name ] );
301
285
  }
302
286
 
303
287
  // Rather than leveraging `useInstanceId` here, the `clientId` is used.
@@ -322,11 +306,7 @@ function useBlockProps( { name, className, clientId } ) {
322
306
  }
323
307
 
324
308
  const variationConfig = { settings, styles };
325
- const blockSelectors = getBlockSelectors(
326
- getBlockTypes(),
327
- getBlockStyles,
328
- clientId
329
- );
309
+ const blockSelectors = getBlockSelectors( getBlockTypes(), clientId );
330
310
  const hasBlockGapSupport = false;
331
311
  const hasFallbackGapSupport = true;
332
312
  const disableLayoutStyles = true;
@@ -349,7 +329,7 @@ function useBlockProps( { name, className, clientId } ) {
349
329
  variationStyles: true,
350
330
  }
351
331
  );
352
- }, [ variation, settings, styles, getBlockStyles, clientId ] );
332
+ }, [ variation, settings, styles, clientId ] );
353
333
 
354
334
  usePrivateStyleOverride( {
355
335
  id: `variation-${ clientId }`,
@@ -15,6 +15,7 @@ import {
15
15
  import { useInstanceId } from '@wordpress/compose';
16
16
  import { addFilter } from '@wordpress/hooks';
17
17
  import { useMemo, useEffect } from '@wordpress/element';
18
+ import { getBlockSelector } from '@wordpress/global-styles-engine';
18
19
 
19
20
  /**
20
21
  * Internal dependencies
@@ -30,7 +31,6 @@ import {
30
31
  getDuotoneStylesheet,
31
32
  getDuotoneUnsetStylesheet,
32
33
  } from '../components/duotone/utils';
33
- import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
34
34
  import { scopeSelector } from '../components/global-styles/utils';
35
35
  import {
36
36
  cleanEmptyObject,
@@ -354,14 +354,14 @@ function useBlockProps( { clientId, name, style } ) {
354
354
  false
355
355
  );
356
356
  if ( experimentalDuotone ) {
357
- const rootSelector = getBlockCSSSelector( blockType );
357
+ const rootSelector = getBlockSelector( blockType );
358
358
  return typeof experimentalDuotone === 'string'
359
359
  ? scopeSelector( rootSelector, experimentalDuotone )
360
360
  : rootSelector;
361
361
  }
362
362
 
363
363
  // Regular filter.duotone support uses filter.duotone selectors with fallbacks.
364
- return getBlockCSSSelector( blockType, 'filter.duotone', {
364
+ return getBlockSelector( blockType, 'filter.duotone', {
365
365
  fallback: true,
366
366
  } );
367
367
  }
@@ -66,12 +66,12 @@ function useFitText( { fitText, name, clientId } ) {
66
66
  // Any attribute may change the available space.
67
67
  const blockAttributes = useSelect(
68
68
  ( select ) => {
69
- if ( ! clientId ) {
69
+ if ( ! clientId || ! hasFitTextSupport || ! fitText ) {
70
70
  return;
71
71
  }
72
72
  return select( blockEditorStore ).getBlockAttributes( clientId );
73
73
  },
74
- [ clientId ]
74
+ [ clientId, hasFitTextSupport, fitText ]
75
75
  );
76
76
 
77
77
  const applyFitText = useCallback( () => {
@@ -4,6 +4,7 @@
4
4
  import { addFilter } from '@wordpress/hooks';
5
5
  import { hasBlockSupport } from '@wordpress/blocks';
6
6
  import TokenList from '@wordpress/token-list';
7
+ import { getTypographyFontSizeValue } from '@wordpress/global-styles-engine';
7
8
 
8
9
  /**
9
10
  * Internal dependencies
@@ -21,7 +22,6 @@ import {
21
22
  shouldSkipSerialization,
22
23
  } from './utils';
23
24
  import { useSettings } from '../components/use-settings';
24
- import { getTypographyFontSizeValue } from '../components/global-styles/typography-utils';
25
25
 
26
26
  export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
27
27
 
@@ -7,13 +7,13 @@ import clsx from 'clsx';
7
7
  * WordPress dependencies
8
8
  */
9
9
  import { privateApis as componentsPrivateApis } from '@wordpress/components';
10
+ import { getTypographyFontSizeValue } from '@wordpress/global-styles-engine';
10
11
 
11
12
  /**
12
13
  * Internal dependencies
13
14
  */
14
15
  import { getInlineStyles } from './style';
15
16
  import { getFontSizeClass } from '../components/font-sizes';
16
- import { getTypographyFontSizeValue } from '../components/global-styles/typography-utils';
17
17
  import { unlock } from '../lock-unlock';
18
18
 
19
19
  const { kebabCase } = unlock( componentsPrivateApis );
@@ -57,6 +57,7 @@ import {
57
57
  useBlockElementRef,
58
58
  useBlockElement,
59
59
  } from './components/block-list/use-block-props/use-block-refs';
60
+ import { default as MediaUploadModal } from './components/media-upload-modal';
60
61
 
61
62
  /**
62
63
  * Private @wordpress/block-editor APIs.
@@ -110,4 +111,5 @@ lock( privateApis, {
110
111
  essentialFormatKey,
111
112
  useBlockElement,
112
113
  useBlockElementRef,
114
+ MediaUploadModal,
113
115
  } );
package/src/style.scss CHANGED
@@ -20,6 +20,7 @@
20
20
  @use "./components/block-patterns-paging/style.scss" as *;
21
21
  @use "./components/block-popover/style.scss" as *;
22
22
  @use "./components/block-preview/style.scss" as *;
23
+ @use "./components/block-quick-navigation/style.scss" as *;
23
24
  @use "./components/block-rename/style.scss" as *;
24
25
  @use "./components/block-styles/style.scss" as *;
25
26
  @use "./components/block-switcher/style.scss" as *;
package/tsconfig.json CHANGED
@@ -14,6 +14,8 @@
14
14
  { "path": "../dom" },
15
15
  { "path": "../element" },
16
16
  { "path": "../escape-html" },
17
+ { "path": "../preferences" },
18
+ { "path": "../global-styles-engine" },
17
19
  { "path": "../priority-queue" },
18
20
  { "path": "../private-apis" },
19
21
  { "path": "../hooks" },
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/components/global-styles/context.js"],
4
- "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nexport const DEFAULT_GLOBAL_STYLES_CONTEXT = {\n\tuser: {},\n\tbase: {},\n\tmerged: {},\n\tsetUserConfig: () => {},\n};\n\nexport const GlobalStylesContext = createContext(\n\tDEFAULT_GLOBAL_STYLES_CONTEXT\n);\nGlobalStylesContext.displayName = 'GlobalStylesContext';\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8B;AAEvB,MAAM,gCAAgC;AAAA,EAC5C,MAAM,CAAC;AAAA,EACP,MAAM,CAAC;AAAA,EACP,QAAQ,CAAC;AAAA,EACT,eAAe,MAAM;AAAA,EAAC;AACvB;AAEO,MAAM,0BAAsB;AAAA,EAClC;AACD;AACA,oBAAoB,cAAc;",
6
- "names": []
7
- }
@@ -1,78 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
- var get_block_css_selector_exports = {};
20
- __export(get_block_css_selector_exports, {
21
- getBlockCSSSelector: () => getBlockCSSSelector
22
- });
23
- module.exports = __toCommonJS(get_block_css_selector_exports);
24
- var import_utils = require("./utils");
25
- var import_object = require("../../utils/object");
26
- function getBlockCSSSelector(blockType, target = "root", options = {}) {
27
- if (!target) {
28
- return null;
29
- }
30
- const { fallback = false } = options;
31
- const { name, selectors, supports } = blockType;
32
- const hasSelectors = selectors && Object.keys(selectors).length > 0;
33
- const path = Array.isArray(target) ? target.join(".") : target;
34
- let rootSelector = null;
35
- if (hasSelectors && selectors.root) {
36
- rootSelector = selectors?.root;
37
- } else if (supports?.__experimentalSelector) {
38
- rootSelector = supports.__experimentalSelector;
39
- } else {
40
- rootSelector = ".wp-block-" + name.replace("core/", "").replace("/", "-");
41
- }
42
- if (path === "root") {
43
- return rootSelector;
44
- }
45
- const pathArray = Array.isArray(target) ? target : target.split(".");
46
- if (pathArray.length === 1) {
47
- const fallbackSelector = fallback ? rootSelector : null;
48
- if (hasSelectors) {
49
- const featureSelector2 = (0, import_object.getValueFromObjectPath)(selectors, `${path}.root`, null) || (0, import_object.getValueFromObjectPath)(selectors, path, null);
50
- return featureSelector2 || fallbackSelector;
51
- }
52
- const featureSelector = (0, import_object.getValueFromObjectPath)(
53
- supports,
54
- `${path}.__experimentalSelector`,
55
- null
56
- );
57
- if (!featureSelector) {
58
- return fallbackSelector;
59
- }
60
- return (0, import_utils.scopeSelector)(rootSelector, featureSelector);
61
- }
62
- let subfeatureSelector;
63
- if (hasSelectors) {
64
- subfeatureSelector = (0, import_object.getValueFromObjectPath)(selectors, path, null);
65
- }
66
- if (subfeatureSelector) {
67
- return subfeatureSelector;
68
- }
69
- if (fallback) {
70
- return getBlockCSSSelector(blockType, pathArray[0], options);
71
- }
72
- return null;
73
- }
74
- // Annotate the CommonJS export names for ESM import in node:
75
- 0 && (module.exports = {
76
- getBlockCSSSelector
77
- });
78
- //# sourceMappingURL=get-block-css-selector.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/components/global-styles/get-block-css-selector.js"],
4
- "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { scopeSelector } from './utils';\nimport { getValueFromObjectPath } from '../../utils/object';\n\n/**\n * Determine the CSS selector for the block type and target provided, returning\n * it if available.\n *\n * @param {import('@wordpress/blocks').Block} blockType The block's type.\n * @param {string|string[]} target The desired selector's target e.g. `root`, delimited string, or array path.\n * @param {Object} options Options object.\n * @param {boolean} options.fallback Whether or not to fallback to broader selector.\n *\n * @return {?string} The CSS selector or `null` if no selector available.\n */\nexport function getBlockCSSSelector(\n\tblockType,\n\ttarget = 'root',\n\toptions = {}\n) {\n\tif ( ! target ) {\n\t\treturn null;\n\t}\n\n\tconst { fallback = false } = options;\n\tconst { name, selectors, supports } = blockType;\n\n\tconst hasSelectors = selectors && Object.keys( selectors ).length > 0;\n\tconst path = Array.isArray( target ) ? target.join( '.' ) : target;\n\n\t// Root selector.\n\n\t// Calculated before returning as it can be used as a fallback for feature\n\t// selectors later on.\n\tlet rootSelector = null;\n\n\tif ( hasSelectors && selectors.root ) {\n\t\t// Use the selectors API if available.\n\t\trootSelector = selectors?.root;\n\t} else if ( supports?.__experimentalSelector ) {\n\t\t// Use the old experimental selector supports property if set.\n\t\trootSelector = supports.__experimentalSelector;\n\t} else {\n\t\t// If no root selector found, generate default block class selector.\n\t\trootSelector =\n\t\t\t'.wp-block-' + name.replace( 'core/', '' ).replace( '/', '-' );\n\t}\n\n\t// Return selector if it's the root target we are looking for.\n\tif ( path === 'root' ) {\n\t\treturn rootSelector;\n\t}\n\n\t// If target is not `root` or `duotone` we have a feature or subfeature\n\t// as the target. If the target is a string convert to an array.\n\tconst pathArray = Array.isArray( target ) ? target : target.split( '.' );\n\n\t// Feature selectors ( may fallback to root selector );\n\tif ( pathArray.length === 1 ) {\n\t\tconst fallbackSelector = fallback ? rootSelector : null;\n\n\t\t// Prefer the selectors API if available.\n\t\tif ( hasSelectors ) {\n\t\t\t// Get selector from either `feature.root` or shorthand path.\n\t\t\tconst featureSelector =\n\t\t\t\tgetValueFromObjectPath( selectors, `${ path }.root`, null ) ||\n\t\t\t\tgetValueFromObjectPath( selectors, path, null );\n\n\t\t\t// Return feature selector if found or any available fallback.\n\t\t\treturn featureSelector || fallbackSelector;\n\t\t}\n\n\t\t// Try getting old experimental supports selector value.\n\t\tconst featureSelector = getValueFromObjectPath(\n\t\t\tsupports,\n\t\t\t`${ path }.__experimentalSelector`,\n\t\t\tnull\n\t\t);\n\n\t\t// If nothing to work with, provide fallback selector if available.\n\t\tif ( ! featureSelector ) {\n\t\t\treturn fallbackSelector;\n\t\t}\n\n\t\t// Scope the feature selector by the block's root selector.\n\t\treturn scopeSelector( rootSelector, featureSelector );\n\t}\n\n\t// Subfeature selector.\n\t// This may fallback either to parent feature or root selector.\n\tlet subfeatureSelector;\n\n\t// Use selectors API if available.\n\tif ( hasSelectors ) {\n\t\tsubfeatureSelector = getValueFromObjectPath( selectors, path, null );\n\t}\n\n\t// Only return if we have a subfeature selector.\n\tif ( subfeatureSelector ) {\n\t\treturn subfeatureSelector;\n\t}\n\n\t// To this point we don't have a subfeature selector. If a fallback has been\n\t// requested, remove subfeature from target path and return results of a\n\t// call for the parent feature's selector.\n\tif ( fallback ) {\n\t\treturn getBlockCSSSelector( blockType, pathArray[ 0 ], options );\n\t}\n\n\t// We tried.\n\treturn null;\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAA8B;AAC9B,oBAAuC;AAahC,SAAS,oBACf,WACA,SAAS,QACT,UAAU,CAAC,GACV;AACD,MAAK,CAAE,QAAS;AACf,WAAO;AAAA,EACR;AAEA,QAAM,EAAE,WAAW,MAAM,IAAI;AAC7B,QAAM,EAAE,MAAM,WAAW,SAAS,IAAI;AAEtC,QAAM,eAAe,aAAa,OAAO,KAAM,SAAU,EAAE,SAAS;AACpE,QAAM,OAAO,MAAM,QAAS,MAAO,IAAI,OAAO,KAAM,GAAI,IAAI;AAM5D,MAAI,eAAe;AAEnB,MAAK,gBAAgB,UAAU,MAAO;AAErC,mBAAe,WAAW;AAAA,EAC3B,WAAY,UAAU,wBAAyB;AAE9C,mBAAe,SAAS;AAAA,EACzB,OAAO;AAEN,mBACC,eAAe,KAAK,QAAS,SAAS,EAAG,EAAE,QAAS,KAAK,GAAI;AAAA,EAC/D;AAGA,MAAK,SAAS,QAAS;AACtB,WAAO;AAAA,EACR;AAIA,QAAM,YAAY,MAAM,QAAS,MAAO,IAAI,SAAS,OAAO,MAAO,GAAI;AAGvE,MAAK,UAAU,WAAW,GAAI;AAC7B,UAAM,mBAAmB,WAAW,eAAe;AAGnD,QAAK,cAAe;AAEnB,YAAMA,uBACL,sCAAwB,WAAW,GAAI,IAAK,SAAS,IAAK,SAC1D,sCAAwB,WAAW,MAAM,IAAK;AAG/C,aAAOA,oBAAmB;AAAA,IAC3B;AAGA,UAAM,sBAAkB;AAAA,MACvB;AAAA,MACA,GAAI,IAAK;AAAA,MACT;AAAA,IACD;AAGA,QAAK,CAAE,iBAAkB;AACxB,aAAO;AAAA,IACR;AAGA,eAAO,4BAAe,cAAc,eAAgB;AAAA,EACrD;AAIA,MAAI;AAGJ,MAAK,cAAe;AACnB,6BAAqB,sCAAwB,WAAW,MAAM,IAAK;AAAA,EACpE;AAGA,MAAK,oBAAqB;AACzB,WAAO;AAAA,EACR;AAKA,MAAK,UAAW;AACf,WAAO,oBAAqB,WAAW,UAAW,CAAE,GAAG,OAAQ;AAAA,EAChE;AAGA,SAAO;AACR;",
6
- "names": ["featureSelector"]
7
- }