@wordpress/block-editor 14.18.0 → 14.19.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 (20) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/build/components/background-image-control/index.js +21 -11
  3. package/build/components/background-image-control/index.js.map +1 -1
  4. package/build/components/media-placeholder/index.js +3 -4
  5. package/build/components/media-placeholder/index.js.map +1 -1
  6. package/build-module/components/background-image-control/index.js +21 -11
  7. package/build-module/components/background-image-control/index.js.map +1 -1
  8. package/build-module/components/media-placeholder/index.js +3 -4
  9. package/build-module/components/media-placeholder/index.js.map +1 -1
  10. package/build-style/content-rtl.css +130 -9
  11. package/build-style/content.css +130 -9
  12. package/build-style/default-editor-styles-rtl.css +130 -9
  13. package/build-style/default-editor-styles.css +130 -9
  14. package/build-style/style-rtl.css +130 -9
  15. package/build-style/style.css +130 -9
  16. package/package.json +34 -34
  17. package/src/components/background-image-control/index.js +21 -13
  18. package/src/components/media-placeholder/index.js +4 -4
  19. package/src/components/rich-text/README.md +1 -1
  20. package/src/components/url-popover/stories/index.story.js +9 -1
package/build-style/style-rtl.css CHANGED
@@ -1,15 +1,57 @@
1
- /**
2
- * Converts a hex value into the rgb equivalent.
3
- *
4
- * @param {string} hex - the hexadecimal value to convert
5
- * @return {string} comma separated rgb values
6
- */
7
1
  /**
8
2
  * Colors
9
3
  */
10
4
  /**
11
5
  * Breakpoints & Media Queries
12
6
  */
7
+ /**
8
+ * Colors
9
+ */
10
+ /**
11
+ * SCSS Variables.
12
+ *
13
+ * Please use variables from this sheet to ensure consistency across the UI.
14
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
15
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
16
+ */
17
+ /**
18
+ * Fonts & basic variables.
19
+ */
20
+ /**
21
+ * Typography
22
+ */
23
+ /**
24
+ * Grid System.
25
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
26
+ */
27
+ /**
28
+ * Radius scale.
29
+ */
30
+ /**
31
+ * Elevation scale.
32
+ */
33
+ /**
34
+ * Dimensions.
35
+ */
36
+ /**
37
+ * Mobile specific styles
38
+ */
39
+ /**
40
+ * Editor styles.
41
+ */
42
+ /**
43
+ * Block & Editor UI.
44
+ */
45
+ /**
46
+ * Block paddings.
47
+ */
48
+ /**
49
+ * React Native specific.
50
+ * These variables do not appear to be used anywhere else.
51
+ */
52
+ /**
53
+ * Colors
54
+ */
13
55
  /**
14
56
  * SCSS Variables.
15
57
  *
@@ -17,15 +59,91 @@
17
59
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
18
60
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
19
61
  */
62
+ /**
63
+ * Fonts & basic variables.
64
+ */
65
+ /**
66
+ * Typography
67
+ */
68
+ /**
69
+ * Grid System.
70
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
71
+ */
72
+ /**
73
+ * Radius scale.
74
+ */
75
+ /**
76
+ * Elevation scale.
77
+ */
78
+ /**
79
+ * Dimensions.
80
+ */
81
+ /**
82
+ * Mobile specific styles
83
+ */
84
+ /**
85
+ * Editor styles.
86
+ */
87
+ /**
88
+ * Block & Editor UI.
89
+ */
90
+ /**
91
+ * Block paddings.
92
+ */
93
+ /**
94
+ * React Native specific.
95
+ * These variables do not appear to be used anywhere else.
96
+ */
97
+ /**
98
+ * Breakpoints & Media Queries
99
+ */
20
100
  /**
21
101
  * Converts a hex value into the rgb equivalent.
22
102
  *
23
103
  * @param {string} hex - the hexadecimal value to convert
24
104
  * @return {string} comma separated rgb values
25
105
  */
106
+ /**
107
+ * Long content fade mixin
108
+ *
109
+ * Creates a fading overlay to signify that the content is longer
110
+ * than the space allows.
111
+ */
112
+ /**
113
+ * Typography
114
+ */
115
+ /**
116
+ * Breakpoint mixins
117
+ */
118
+ /**
119
+ * Focus styles.
120
+ */
121
+ /**
122
+ * Applies editor left position to the selector passed as argument
123
+ */
124
+ /**
125
+ * Styles that are reused verbatim in a few places
126
+ */
127
+ /**
128
+ * Allows users to opt-out of animations via OS-level preferences.
129
+ */
130
+ /**
131
+ * Reset default styles for JavaScript UI based pages.
132
+ * This is a WP-admin agnostic reset
133
+ */
134
+ /**
135
+ * Reset the WP Admin page styles for Gutenberg-like pages.
136
+ */
26
137
  /**
27
138
  * Colors
28
139
  */
140
+ /**
141
+ * SCSS Variables.
142
+ *
143
+ * Please use variables from this sheet to ensure consistency across the UI.
144
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
145
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
146
+ */
29
147
  /**
30
148
  * Fonts & basic variables.
31
149
  */
@@ -61,6 +179,9 @@
61
179
  * React Native specific.
62
180
  * These variables do not appear to be used anywhere else.
63
181
  */
182
+ /**
183
+ * Breakpoints & Media Queries
184
+ */
64
185
  /**
65
186
  * Converts a hex value into the rgb equivalent.
66
187
  *
@@ -99,6 +220,9 @@
99
220
  * Reset the WP Admin page styles for Gutenberg-like pages.
100
221
  */
101
222
  :root {
223
+ --wp-block-synced-color: #7a00df;
224
+ --wp-block-synced-color--rgb: 122, 0, 223;
225
+ --wp-bound-block-color: var(--wp-block-synced-color);
102
226
  --wp-admin-theme-color: #007cba;
103
227
  --wp-admin-theme-color--rgb: 0, 124, 186;
104
228
  --wp-admin-theme-color-darker-10: #006ba1;
@@ -106,9 +230,6 @@
106
230
  --wp-admin-theme-color-darker-20: #005a87;
107
231
  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
108
232
  --wp-admin-border-width-focus: 2px;
109
- --wp-block-synced-color: #7a00df;
110
- --wp-block-synced-color--rgb: 122, 0, 223;
111
- --wp-bound-block-color: var(--wp-block-synced-color);
112
233
  }
113
234
  @media (min-resolution: 192dpi) {
114
235
  :root {
package/build-style/style.css CHANGED
@@ -1,15 +1,57 @@
1
- /**
2
- * Converts a hex value into the rgb equivalent.
3
- *
4
- * @param {string} hex - the hexadecimal value to convert
5
- * @return {string} comma separated rgb values
6
- */
7
1
  /**
8
2
  * Colors
9
3
  */
10
4
  /**
11
5
  * Breakpoints & Media Queries
12
6
  */
7
+ /**
8
+ * Colors
9
+ */
10
+ /**
11
+ * SCSS Variables.
12
+ *
13
+ * Please use variables from this sheet to ensure consistency across the UI.
14
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
15
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
16
+ */
17
+ /**
18
+ * Fonts & basic variables.
19
+ */
20
+ /**
21
+ * Typography
22
+ */
23
+ /**
24
+ * Grid System.
25
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
26
+ */
27
+ /**
28
+ * Radius scale.
29
+ */
30
+ /**
31
+ * Elevation scale.
32
+ */
33
+ /**
34
+ * Dimensions.
35
+ */
36
+ /**
37
+ * Mobile specific styles
38
+ */
39
+ /**
40
+ * Editor styles.
41
+ */
42
+ /**
43
+ * Block & Editor UI.
44
+ */
45
+ /**
46
+ * Block paddings.
47
+ */
48
+ /**
49
+ * React Native specific.
50
+ * These variables do not appear to be used anywhere else.
51
+ */
52
+ /**
53
+ * Colors
54
+ */
13
55
  /**
14
56
  * SCSS Variables.
15
57
  *
@@ -17,15 +59,91 @@
17
59
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
18
60
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
19
61
  */
62
+ /**
63
+ * Fonts & basic variables.
64
+ */
65
+ /**
66
+ * Typography
67
+ */
68
+ /**
69
+ * Grid System.
70
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
71
+ */
72
+ /**
73
+ * Radius scale.
74
+ */
75
+ /**
76
+ * Elevation scale.
77
+ */
78
+ /**
79
+ * Dimensions.
80
+ */
81
+ /**
82
+ * Mobile specific styles
83
+ */
84
+ /**
85
+ * Editor styles.
86
+ */
87
+ /**
88
+ * Block & Editor UI.
89
+ */
90
+ /**
91
+ * Block paddings.
92
+ */
93
+ /**
94
+ * React Native specific.
95
+ * These variables do not appear to be used anywhere else.
96
+ */
97
+ /**
98
+ * Breakpoints & Media Queries
99
+ */
20
100
  /**
21
101
  * Converts a hex value into the rgb equivalent.
22
102
  *
23
103
  * @param {string} hex - the hexadecimal value to convert
24
104
  * @return {string} comma separated rgb values
25
105
  */
106
+ /**
107
+ * Long content fade mixin
108
+ *
109
+ * Creates a fading overlay to signify that the content is longer
110
+ * than the space allows.
111
+ */
112
+ /**
113
+ * Typography
114
+ */
115
+ /**
116
+ * Breakpoint mixins
117
+ */
118
+ /**
119
+ * Focus styles.
120
+ */
121
+ /**
122
+ * Applies editor left position to the selector passed as argument
123
+ */
124
+ /**
125
+ * Styles that are reused verbatim in a few places
126
+ */
127
+ /**
128
+ * Allows users to opt-out of animations via OS-level preferences.
129
+ */
130
+ /**
131
+ * Reset default styles for JavaScript UI based pages.
132
+ * This is a WP-admin agnostic reset
133
+ */
134
+ /**
135
+ * Reset the WP Admin page styles for Gutenberg-like pages.
136
+ */
26
137
  /**
27
138
  * Colors
28
139
  */
140
+ /**
141
+ * SCSS Variables.
142
+ *
143
+ * Please use variables from this sheet to ensure consistency across the UI.
144
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
145
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
146
+ */
29
147
  /**
30
148
  * Fonts & basic variables.
31
149
  */
@@ -61,6 +179,9 @@
61
179
  * React Native specific.
62
180
  * These variables do not appear to be used anywhere else.
63
181
  */
182
+ /**
183
+ * Breakpoints & Media Queries
184
+ */
64
185
  /**
65
186
  * Converts a hex value into the rgb equivalent.
66
187
  *
@@ -99,6 +220,9 @@
99
220
  * Reset the WP Admin page styles for Gutenberg-like pages.
100
221
  */
101
222
  :root {
223
+ --wp-block-synced-color: #7a00df;
224
+ --wp-block-synced-color--rgb: 122, 0, 223;
225
+ --wp-bound-block-color: var(--wp-block-synced-color);
102
226
  --wp-admin-theme-color: #007cba;
103
227
  --wp-admin-theme-color--rgb: 0, 124, 186;
104
228
  --wp-admin-theme-color-darker-10: #006ba1;
@@ -106,9 +230,6 @@
106
230
  --wp-admin-theme-color-darker-20: #005a87;
107
231
  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
108
232
  --wp-admin-border-width-focus: 2px;
109
- --wp-block-synced-color: #7a00df;
110
- --wp-block-synced-color--rgb: 122, 0, 223;
111
- --wp-bound-block-color: var(--wp-block-synced-color);
112
233
  }
113
234
  @media (min-resolution: 192dpi) {
114
235
  :root {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/block-editor",
3
- "version": "14.18.0",
3
+ "version": "14.19.0",
4
4
  "description": "Generic block editor.",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -37,38 +37,38 @@
37
37
  "@emotion/react": "^11.7.1",
38
38
  "@emotion/styled": "^11.6.0",
39
39
  "@react-spring/web": "^9.4.5",
40
- "@wordpress/a11y": "^4.23.0",
41
- "@wordpress/api-fetch": "^7.23.0",
42
- "@wordpress/blob": "^4.23.0",
43
- "@wordpress/block-serialization-default-parser": "^5.23.0",
44
- "@wordpress/blocks": "^14.12.0",
45
- "@wordpress/commands": "^1.23.0",
46
- "@wordpress/components": "^29.9.0",
47
- "@wordpress/compose": "^7.23.0",
48
- "@wordpress/data": "^10.23.0",
49
- "@wordpress/date": "^5.23.0",
50
- "@wordpress/deprecated": "^4.23.0",
51
- "@wordpress/dom": "^4.23.0",
52
- "@wordpress/element": "^6.23.0",
53
- "@wordpress/escape-html": "^3.23.0",
54
- "@wordpress/hooks": "^4.23.0",
55
- "@wordpress/html-entities": "^4.23.0",
56
- "@wordpress/i18n": "^5.23.0",
57
- "@wordpress/icons": "^10.23.0",
58
- "@wordpress/is-shallow-equal": "^5.23.0",
59
- "@wordpress/keyboard-shortcuts": "^5.23.0",
60
- "@wordpress/keycodes": "^4.23.0",
61
- "@wordpress/notices": "^5.23.0",
62
- "@wordpress/preferences": "^4.23.0",
63
- "@wordpress/priority-queue": "^3.23.0",
64
- "@wordpress/private-apis": "^1.23.0",
65
- "@wordpress/rich-text": "^7.23.0",
66
- "@wordpress/style-engine": "^2.23.0",
67
- "@wordpress/token-list": "^3.23.0",
68
- "@wordpress/upload-media": "^0.8.0",
69
- "@wordpress/url": "^4.23.0",
70
- "@wordpress/warning": "^3.23.0",
71
- "@wordpress/wordcount": "^4.23.0",
40
+ "@wordpress/a11y": "^4.24.0",
41
+ "@wordpress/api-fetch": "^7.24.0",
42
+ "@wordpress/blob": "^4.24.0",
43
+ "@wordpress/block-serialization-default-parser": "^5.24.0",
44
+ "@wordpress/blocks": "^14.13.0",
45
+ "@wordpress/commands": "^1.24.0",
46
+ "@wordpress/components": "^29.10.0",
47
+ "@wordpress/compose": "^7.24.0",
48
+ "@wordpress/data": "^10.24.0",
49
+ "@wordpress/date": "^5.24.0",
50
+ "@wordpress/deprecated": "^4.24.0",
51
+ "@wordpress/dom": "^4.24.0",
52
+ "@wordpress/element": "^6.24.0",
53
+ "@wordpress/escape-html": "^3.24.0",
54
+ "@wordpress/hooks": "^4.24.0",
55
+ "@wordpress/html-entities": "^4.24.0",
56
+ "@wordpress/i18n": "^5.24.0",
57
+ "@wordpress/icons": "^10.24.0",
58
+ "@wordpress/is-shallow-equal": "^5.24.0",
59
+ "@wordpress/keyboard-shortcuts": "^5.24.0",
60
+ "@wordpress/keycodes": "^4.24.0",
61
+ "@wordpress/notices": "^5.24.0",
62
+ "@wordpress/preferences": "^4.24.0",
63
+ "@wordpress/priority-queue": "^3.24.0",
64
+ "@wordpress/private-apis": "^1.24.0",
65
+ "@wordpress/rich-text": "^7.24.0",
66
+ "@wordpress/style-engine": "^2.24.0",
67
+ "@wordpress/token-list": "^3.24.0",
68
+ "@wordpress/upload-media": "^0.9.0",
69
+ "@wordpress/url": "^4.24.0",
70
+ "@wordpress/warning": "^3.24.0",
71
+ "@wordpress/wordcount": "^4.24.0",
72
72
  "change-case": "^4.1.2",
73
73
  "clsx": "^2.1.1",
74
74
  "colord": "^2.7.0",
@@ -91,5 +91,5 @@
91
91
  "publishConfig": {
92
92
  "access": "public"
93
93
  },
94
- "gitHead": "ab5c79cd40adbb68898536c50e035b0a734338ea"
94
+ "gitHead": "9c03d1458cae76792ae15e67b421205836bf4393"
95
95
  }
package/src/components/background-image-control/index.js CHANGED
@@ -249,6 +249,7 @@ function BackgroundImageControls( {
249
249
  onResetImage = noop,
250
250
  displayInPanel,
251
251
  defaultValues,
252
+ containerRef,
252
253
  } ) {
253
254
  const [ isUploading, setIsUploading ] = useState( false );
254
255
  const { getSettings } = useSelect( blockEditorStore );
@@ -256,7 +257,6 @@ function BackgroundImageControls( {
256
257
  const { id, title, url } = style?.background?.backgroundImage || {
257
258
  ...inheritedValue?.background?.backgroundImage,
258
259
  };
259
- const replaceContainerRef = useRef();
260
260
  const { createErrorNotice } = useDispatch( noticesStore );
261
261
  const onUploadError = ( message ) => {
262
262
  createErrorNotice( message, { type: 'snackbar' } );
@@ -324,6 +324,8 @@ function BackgroundImageControls( {
324
324
  } )
325
325
  );
326
326
  setIsUploading( false );
327
+ // Close the dropdown and focus the toggle button.
328
+ closeAndFocus();
327
329
  };
328
330
 
329
331
  // Drag and drop callback, restricting image to one.
@@ -342,14 +344,19 @@ function BackgroundImageControls( {
342
344
  const hasValue = hasBackgroundImageValue( style );
343
345
 
344
346
  const closeAndFocus = () => {
345
- const [ toggleButton ] = focus.tabbable.find(
346
- replaceContainerRef.current
347
- );
348
- // Focus the toggle button and close the dropdown menu.
349
- // This ensures similar behaviour as to selecting an image, where the dropdown is
350
- // closed and focus is redirected to the dropdown toggle button.
351
- toggleButton?.focus();
352
- toggleButton?.click();
347
+ // Use requestAnimationFrame to ensure DOM updates are complete
348
+ window.requestAnimationFrame( () => {
349
+ const [ toggleButton ] = focus.tabbable.find(
350
+ containerRef?.current
351
+ );
352
+ if ( ! toggleButton ) {
353
+ return;
354
+ }
355
+ // Focus the toggle button and close the dropdown menu.
356
+ // This ensures similar behaviour as to selecting an image, where the dropdown is
357
+ // closed and focus is redirected to the dropdown toggle button.
358
+ toggleButton.focus();
359
+ } );
353
360
  };
354
361
 
355
362
  const onRemove = () =>
@@ -363,10 +370,7 @@ function BackgroundImageControls( {
363
370
  title || getFilename( url ) || __( 'Add background image' );
364
371
 
365
372
  return (
366
- <div
367
- ref={ replaceContainerRef }
368
- className="block-editor-global-styles-background-panel__image-tools-panel-item"
369
- >
373
+ <div className="block-editor-global-styles-background-panel__image-tools-panel-item">
370
374
  { isUploading && <LoadingSpinner /> }
371
375
  <MediaReplaceFlow
372
376
  mediaId={ id }
@@ -697,9 +701,11 @@ export default function BackgroundImagePanel( {
697
701
  settings?.background?.backgroundRepeat );
698
702
 
699
703
  const [ isDropDownOpen, setIsDropDownOpen ] = useState( false );
704
+ const containerRef = useRef();
700
705
 
701
706
  return (
702
707
  <div
708
+ ref={ containerRef }
703
709
  className={ clsx(
704
710
  'block-editor-global-styles-background-panel__inspector-media-replace-container',
705
711
  {
@@ -727,6 +733,7 @@ export default function BackgroundImagePanel( {
727
733
  } }
728
734
  onRemoveImage={ () => setIsDropDownOpen( false ) }
729
735
  defaultValues={ defaultValues }
736
+ containerRef={ containerRef }
730
737
  />
731
738
  <BackgroundSizeControls
732
739
  onChange={ onChange }
@@ -747,6 +754,7 @@ export default function BackgroundImagePanel( {
747
754
  resetBackground();
748
755
  } }
749
756
  onRemoveImage={ () => setIsDropDownOpen( false ) }
757
+ containerRef={ containerRef }
750
758
  />
751
759
  ) }
752
760
  </div>
package/src/components/media-placeholder/index.js CHANGED
@@ -272,11 +272,11 @@ export function MediaPlaceholder( {
272
272
  } )
273
273
  ).catch( ( err ) => onError( err ) );
274
274
 
275
- if ( multiple ) {
276
- onSelect( uploadedMediaList );
277
- } else {
278
- onSelect( uploadedMediaList[ 0 ] );
275
+ if ( ! uploadedMediaList?.length ) {
276
+ return;
279
277
  }
278
+
279
+ onSelect( multiple ? uploadedMediaList : uploadedMediaList[ 0 ] );
280
280
  }
281
281
 
282
282
  const onUpload = ( event ) => {
package/src/components/rich-text/README.md CHANGED
@@ -23,7 +23,7 @@ _Default: `div`._ The [tag name](https://www.w3.org/TR/html51/syntax.html#tag-na
23
23
  ### `placeholder: String`
24
24
 
25
25
  _Optional._ Placeholder text to show when the field is empty, similar to the
26
- [`input` and `textarea` attribute of the same name](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML5_updates#The_placeholder_attribute).
26
+ [`input` and `textarea` attribute of the same name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder).
27
27
 
28
28
  ### `disableLineBreaks: Boolean`
29
29
 
package/src/components/url-popover/stories/index.story.js CHANGED
@@ -20,6 +20,10 @@ const TestURLPopover = () => {
20
20
  const close = () => setVisiblility( false );
21
21
  const setTarget = () => {};
22
22
 
23
+ const handleUrlChange = ( event ) => {
24
+ setUrl( event.target.value );
25
+ };
26
+
23
27
  return (
24
28
  <>
25
29
  <Button
@@ -40,7 +44,11 @@ const TestURLPopover = () => {
40
44
  ) }
41
45
  >
42
46
  <form onSubmit={ close }>
43
- <input type="url" value={ url } onChange={ setUrl } />
47
+ <input
48
+ type="url"
49
+ value={ url }
50
+ onChange={ handleUrlChange }
51
+ />
44
52
  <Button
45
53
  __next40pxDefaultSize
46
54
  icon={ keyboardReturn }