@wordpress/block-library 9.22.0 → 9.23.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 (68) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/build/calendar/index.js +1 -0
  3. package/build/calendar/index.js.map +1 -1
  4. package/build/comments/edit/comments-inspector-controls.js +13 -13
  5. package/build/comments/edit/comments-inspector-controls.js.map +1 -1
  6. package/build/comments/edit/index.js +4 -2
  7. package/build/comments/edit/index.js.map +1 -1
  8. package/build/cover/edit/inspector-controls.js +9 -12
  9. package/build/cover/edit/inspector-controls.js.map +1 -1
  10. package/build/group/edit.js +17 -13
  11. package/build/group/edit.js.map +1 -1
  12. package/build/image/edit.js +0 -6
  13. package/build/image/edit.js.map +1 -1
  14. package/build/latest-posts/edit.js +100 -54
  15. package/build/latest-posts/edit.js.map +1 -1
  16. package/build/query/edit/query-content.js +11 -12
  17. package/build/query/edit/query-content.js.map +1 -1
  18. package/build/separator/edit.js +13 -12
  19. package/build/separator/edit.js.map +1 -1
  20. package/build/template-part/edit/advanced-controls.js +14 -12
  21. package/build/template-part/edit/advanced-controls.js.map +1 -1
  22. package/build/template-part/edit/index.js +2 -1
  23. package/build/template-part/edit/index.js.map +1 -1
  24. package/build-module/calendar/index.js +1 -0
  25. package/build-module/calendar/index.js.map +1 -1
  26. package/build-module/comments/edit/comments-inspector-controls.js +14 -14
  27. package/build-module/comments/edit/comments-inspector-controls.js.map +1 -1
  28. package/build-module/comments/edit/index.js +4 -2
  29. package/build-module/comments/edit/index.js.map +1 -1
  30. package/build-module/cover/edit/inspector-controls.js +10 -13
  31. package/build-module/cover/edit/inspector-controls.js.map +1 -1
  32. package/build-module/group/edit.js +16 -14
  33. package/build-module/group/edit.js.map +1 -1
  34. package/build-module/image/edit.js +0 -6
  35. package/build-module/image/edit.js.map +1 -1
  36. package/build-module/latest-posts/edit.js +100 -54
  37. package/build-module/latest-posts/edit.js.map +1 -1
  38. package/build-module/query/edit/query-content.js +12 -13
  39. package/build-module/query/edit/query-content.js.map +1 -1
  40. package/build-module/separator/edit.js +15 -14
  41. package/build-module/separator/edit.js.map +1 -1
  42. package/build-module/template-part/edit/advanced-controls.js +14 -12
  43. package/build-module/template-part/edit/advanced-controls.js.map +1 -1
  44. package/build-module/template-part/edit/index.js +2 -1
  45. package/build-module/template-part/edit/index.js.map +1 -1
  46. package/package.json +35 -35
  47. package/src/calendar/block.json +1 -0
  48. package/src/comments/edit/comments-inspector-controls.js +14 -12
  49. package/src/comments/edit/index.js +2 -1
  50. package/src/cover/edit/inspector-controls.js +9 -12
  51. package/src/group/edit.js +11 -10
  52. package/src/image/edit.js +0 -4
  53. package/src/latest-posts/edit.js +113 -81
  54. package/src/loginout/index.php +5 -1
  55. package/src/navigation/index.php +0 -1
  56. package/src/navigation-link/index.php +1 -1
  57. package/src/navigation-submenu/index.php +1 -1
  58. package/src/post-author/index.php +1 -1
  59. package/src/post-author-name/index.php +1 -1
  60. package/src/query/edit/query-content.js +10 -11
  61. package/src/separator/edit.js +16 -12
  62. package/src/template-part/edit/advanced-controls.js +9 -8
  63. package/src/template-part/edit/index.js +1 -0
  64. package/build/utils/messages.js +0 -22
  65. package/build/utils/messages.js.map +0 -1
  66. package/build-module/utils/messages.js +0 -15
  67. package/build-module/utils/messages.js.map +0 -1
  68. package/src/utils/messages.js +0 -31
@@ -60,6 +60,7 @@ import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
60
60
  */
61
61
  const CATEGORIES_LIST_QUERY = {
62
62
  per_page: -1,
63
+ _fields: 'id,name',
63
64
  context: 'view',
64
65
  };
65
66
  const USERS_LIST_QUERY = {
@@ -67,6 +68,28 @@ const USERS_LIST_QUERY = {
67
68
  has_published_posts: [ 'post' ],
68
69
  context: 'view',
69
70
  };
71
+ const imageAlignmentOptions = [
72
+ {
73
+ value: 'none',
74
+ icon: alignNone,
75
+ label: __( 'None' ),
76
+ },
77
+ {
78
+ value: 'left',
79
+ icon: positionLeft,
80
+ label: __( 'Left' ),
81
+ },
82
+ {
83
+ value: 'center',
84
+ icon: positionCenter,
85
+ label: __( 'Center' ),
86
+ },
87
+ {
88
+ value: 'right',
89
+ icon: positionRight,
90
+ label: __( 'Right' ),
91
+ },
92
+ ];
70
93
 
71
94
  function getFeaturedImageDetails( post, size ) {
72
95
  const image = post._embedded?.[ 'wp:featuredmedia' ]?.[ '0' ];
@@ -79,10 +102,11 @@ function getFeaturedImageDetails( post, size ) {
79
102
  };
80
103
  }
81
104
 
82
- export default function LatestPostsEdit( { attributes, setAttributes } ) {
83
- const instanceId = useInstanceId( LatestPostsEdit );
84
- const dropdownMenuProps = useToolsPanelDropdownMenuProps();
105
+ function getCurrentAuthor( post ) {
106
+ return post._embedded?.author?.[ 0 ];
107
+ }
85
108
 
109
+ function Controls( { attributes, setAttributes, postCount } ) {
86
110
  const {
87
111
  postsToShow,
88
112
  order,
@@ -105,7 +129,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
105
129
  } = attributes;
106
130
  const {
107
131
  imageSizes,
108
- latestPosts,
109
132
  defaultImageWidth,
110
133
  defaultImageHeight,
111
134
  categoriesList,
@@ -114,21 +137,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
114
137
  ( select ) => {
115
138
  const { getEntityRecords, getUsers } = select( coreStore );
116
139
  const settings = select( blockEditorStore ).getSettings();
117
- const catIds =
118
- categories && categories.length > 0
119
- ? categories.map( ( cat ) => cat.id )
120
- : [];
121
- const latestPostsQuery = Object.fromEntries(
122
- Object.entries( {
123
- categories: catIds,
124
- author: selectedAuthor,
125
- order,
126
- orderby: orderBy,
127
- per_page: postsToShow,
128
- _embed: 'wp:featuredmedia',
129
- ignore_sticky: true,
130
- } ).filter( ( [ , value ] ) => typeof value !== 'undefined' )
131
- );
132
140
 
133
141
  return {
134
142
  defaultImageWidth:
@@ -138,11 +146,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
138
146
  settings.imageDimensions?.[ featuredImageSizeSlug ]
139
147
  ?.height ?? 0,
140
148
  imageSizes: settings.imageSizes,
141
- latestPosts: getEntityRecords(
142
- 'postType',
143
- 'post',
144
- latestPostsQuery
145
- ),
146
149
  categoriesList: getEntityRecords(
147
150
  'taxonomy',
148
151
  'category',
@@ -151,25 +154,10 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
151
154
  authorList: getUsers( USERS_LIST_QUERY ),
152
155
  };
153
156
  },
154
- [
155
- featuredImageSizeSlug,
156
- postsToShow,
157
- order,
158
- orderBy,
159
- categories,
160
- selectedAuthor,
161
- ]
157
+ [ featuredImageSizeSlug ]
162
158
  );
163
159
 
164
- // If a user clicks to a link prevent redirection and show a warning.
165
- const { createWarningNotice } = useDispatch( noticeStore );
166
- const showRedirectionPreventedNotice = ( event ) => {
167
- event.preventDefault();
168
- createWarningNotice( __( 'Links are disabled in the editor.' ), {
169
- id: `block-library/core/latest-posts/redirection-prevented/${ instanceId }`,
170
- type: 'snackbar',
171
- } );
172
- };
160
+ const dropdownMenuProps = useToolsPanelDropdownMenuProps();
173
161
 
174
162
  const imageSizeOptions = imageSizes
175
163
  .filter( ( { slug } ) => slug !== 'full' )
@@ -208,32 +196,8 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
208
196
  setAttributes( { categories: allCategories } );
209
197
  };
210
198
 
211
- const imageAlignmentOptions = [
212
- {
213
- value: 'none',
214
- icon: alignNone,
215
- label: __( 'None' ),
216
- },
217
- {
218
- value: 'left',
219
- icon: positionLeft,
220
- label: __( 'Left' ),
221
- },
222
- {
223
- value: 'center',
224
- icon: positionCenter,
225
- label: __( 'Center' ),
226
- },
227
- {
228
- value: 'right',
229
- icon: positionRight,
230
- label: __( 'Right' ),
231
- },
232
- ];
233
-
234
- const hasPosts = !! latestPosts?.length;
235
- const inspectorControls = (
236
- <InspectorControls>
199
+ return (
200
+ <>
237
201
  <ToolsPanel
238
202
  label={ __( 'Post content' ) }
239
203
  resetAll={ () =>
@@ -247,7 +211,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
247
211
  >
248
212
  <ToolsPanelItem
249
213
  hasValue={ () => !! displayPostContent }
250
- label={ __( 'Post content' ) }
214
+ label={ __( 'Display post content' ) }
251
215
  onDeselect={ () =>
252
216
  setAttributes( { displayPostContent: false } )
253
217
  }
@@ -255,7 +219,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
255
219
  >
256
220
  <ToggleControl
257
221
  __nextHasNoMarginBottom
258
- label={ __( 'Post content' ) }
222
+ label={ __( 'Display post content' ) }
259
223
  checked={ displayPostContent }
260
224
  onChange={ ( value ) =>
261
225
  setAttributes( { displayPostContent: value } )
@@ -265,7 +229,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
265
229
  { displayPostContent && (
266
230
  <ToolsPanelItem
267
231
  hasValue={ () => displayPostContentRadio !== 'excerpt' }
268
- label={ __( 'Show' ) }
232
+ label={ __( 'Content length' ) }
269
233
  onDeselect={ () =>
270
234
  setAttributes( {
271
235
  displayPostContentRadio: 'excerpt',
@@ -274,7 +238,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
274
238
  isShownByDefault
275
239
  >
276
240
  <RadioControl
277
- label={ __( 'Show' ) }
241
+ label={ __( 'Content length' ) }
278
242
  selected={ displayPostContentRadio }
279
243
  options={ [
280
244
  { label: __( 'Excerpt' ), value: 'excerpt' },
@@ -319,7 +283,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
319
283
  </ToolsPanelItem>
320
284
  ) }
321
285
  </ToolsPanel>
322
-
323
286
  <ToolsPanel
324
287
  label={ __( 'Post meta' ) }
325
288
  resetAll={ () =>
@@ -445,7 +408,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
445
408
  </>
446
409
  ) }
447
410
  </PanelBody>
448
-
449
411
  <PanelBody title={ __( 'Sorting and filtering' ) }>
450
412
  <QueryControls
451
413
  { ...{ order, orderBy } }
@@ -483,17 +445,89 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
483
445
  }
484
446
  min={ 2 }
485
447
  max={
486
- ! hasPosts
448
+ ! postCount
487
449
  ? MAX_POSTS_COLUMNS
488
- : Math.min(
489
- MAX_POSTS_COLUMNS,
490
- latestPosts.length
491
- )
450
+ : Math.min( MAX_POSTS_COLUMNS, postCount )
492
451
  }
493
452
  required
494
453
  />
495
454
  ) }
496
455
  </PanelBody>
456
+ </>
457
+ );
458
+ }
459
+
460
+ export default function LatestPostsEdit( { attributes, setAttributes } ) {
461
+ const instanceId = useInstanceId( LatestPostsEdit );
462
+
463
+ const {
464
+ postsToShow,
465
+ order,
466
+ orderBy,
467
+ categories,
468
+ selectedAuthor,
469
+ displayFeaturedImage,
470
+ displayPostContentRadio,
471
+ displayPostContent,
472
+ displayPostDate,
473
+ displayAuthor,
474
+ postLayout,
475
+ columns,
476
+ excerptLength,
477
+ featuredImageAlign,
478
+ featuredImageSizeSlug,
479
+ featuredImageSizeWidth,
480
+ featuredImageSizeHeight,
481
+ addLinkToFeaturedImage,
482
+ } = attributes;
483
+ const { latestPosts } = useSelect(
484
+ ( select ) => {
485
+ const { getEntityRecords } = select( coreStore );
486
+ const catIds =
487
+ categories && categories.length > 0
488
+ ? categories.map( ( cat ) => cat.id )
489
+ : [];
490
+ const latestPostsQuery = Object.fromEntries(
491
+ Object.entries( {
492
+ categories: catIds,
493
+ author: selectedAuthor,
494
+ order,
495
+ orderby: orderBy,
496
+ per_page: postsToShow,
497
+ _embed: 'author,wp:featuredmedia',
498
+ ignore_sticky: true,
499
+ } ).filter( ( [ , value ] ) => typeof value !== 'undefined' )
500
+ );
501
+
502
+ return {
503
+ latestPosts: getEntityRecords(
504
+ 'postType',
505
+ 'post',
506
+ latestPostsQuery
507
+ ),
508
+ };
509
+ },
510
+ [ postsToShow, order, orderBy, categories, selectedAuthor ]
511
+ );
512
+
513
+ // If a user clicks to a link prevent redirection and show a warning.
514
+ const { createWarningNotice } = useDispatch( noticeStore );
515
+ const showRedirectionPreventedNotice = ( event ) => {
516
+ event.preventDefault();
517
+ createWarningNotice( __( 'Links are disabled in the editor.' ), {
518
+ id: `block-library/core/latest-posts/redirection-prevented/${ instanceId }`,
519
+ type: 'snackbar',
520
+ } );
521
+ };
522
+
523
+ const hasPosts = !! latestPosts?.length;
524
+ const inspectorControls = (
525
+ <InspectorControls>
526
+ <Controls
527
+ attributes={ attributes }
528
+ setAttributes={ setAttributes }
529
+ postCount={ latestPosts?.length ?? 0 }
530
+ />
497
531
  </InspectorControls>
498
532
  );
499
533
 
@@ -555,9 +589,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
555
589
  { displayPosts.map( ( post ) => {
556
590
  const titleTrimmed = post.title.rendered.trim();
557
591
  let excerpt = post.excerpt.rendered;
558
- const currentAuthor = authorList?.find(
559
- ( author ) => author.id === post.author
560
- );
592
+ const currentAuthor = getCurrentAuthor( post );
561
593
 
562
594
  const excerptElement = document.createElement( 'div' );
563
595
  excerptElement.innerHTML = excerpt;
@@ -16,7 +16,11 @@
16
16
  */
17
17
  function render_block_core_loginout( $attributes ) {
18
18
 
19
- // Build the redirect URL.
19
+ /*
20
+ * Build the redirect URL. This current url fetching logic matches with the core.
21
+ *
22
+ * @see https://github.com/WordPress/wordpress-develop/blob/6bf62e58d21739938f3bb3f9e16ba702baf9c2cc/src/wp-includes/general-template.php#L528.
23
+ */
20
24
  $current_url = ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
21
25
 
22
26
  $classes = is_user_logged_in() ? 'logged-in' : 'logged-out';
@@ -133,7 +133,6 @@ class WP_Navigation_Block_Renderer {
133
133
  * @since 6.5.0
134
134
  *
135
135
  * @param array $needs_list_item_wrapper The list of blocks that need a list item wrapper.
136
- * @return array The list of blocks that need a list item wrapper.
137
136
  */
138
137
  $needs_list_item_wrapper = apply_filters( 'block_core_navigation_listable_blocks', static::$needs_list_item_wrapper );
139
138
 
@@ -213,7 +213,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
213
213
  $kind = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
214
214
  $is_active = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
215
215
 
216
- if ( is_post_type_archive() ) {
216
+ if ( is_post_type_archive() && ! empty( $attributes['url'] ) ) {
217
217
  $queried_archive_link = get_post_type_archive_link( get_queried_object()->name );
218
218
  if ( $attributes['url'] === $queried_archive_link ) {
219
219
  $is_active = true;
@@ -86,7 +86,7 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
86
86
  $kind = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
87
87
  $is_active = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
88
88
 
89
- if ( is_post_type_archive() ) {
89
+ if ( is_post_type_archive() && ! empty( $attributes['url'] ) ) {
90
90
  $queried_archive_link = get_post_type_archive_link( get_queried_object()->name );
91
91
  if ( $attributes['url'] === $queried_archive_link ) {
92
92
  $is_active = true;
@@ -26,7 +26,7 @@ function render_block_core_post_author( $attributes, $content, $block ) {
26
26
  return '';
27
27
  }
28
28
 
29
- if ( ! post_type_supports( $block->context['postType'], 'author' ) ) {
29
+ if ( isset( $block->context['postType'] ) && ! post_type_supports( $block->context['postType'], 'author' ) ) {
30
30
  return '';
31
31
  }
32
32
 
@@ -26,7 +26,7 @@ function render_block_core_post_author_name( $attributes, $content, $block ) {
26
26
  return '';
27
27
  }
28
28
 
29
- if ( ! post_type_supports( $block->context['postType'], 'author' ) ) {
29
+ if ( isset( $block->context['postType'] ) && ! post_type_supports( $block->context['postType'], 'author' ) ) {
30
30
  return '';
31
31
  }
32
32
 
@@ -10,8 +10,8 @@ import {
10
10
  useBlockProps,
11
11
  store as blockEditorStore,
12
12
  useInnerBlocksProps,
13
+ privateApis as blockEditorPrivateApis,
13
14
  } from '@wordpress/block-editor';
14
- import { SelectControl } from '@wordpress/components';
15
15
  import { __ } from '@wordpress/i18n';
16
16
  import { store as coreStore } from '@wordpress/core-data';
17
17
 
@@ -19,11 +19,13 @@ import { store as coreStore } from '@wordpress/core-data';
19
19
  * Internal dependencies
20
20
  */
21
21
  import EnhancedPaginationControl from './inspector-controls/enhanced-pagination-control';
22
+ import { unlock } from '../../lock-unlock';
22
23
  import QueryInspectorControls from './inspector-controls';
23
24
  import EnhancedPaginationModal from './enhanced-pagination-modal';
24
25
  import { getQueryContextFromTemplate } from '../utils';
25
26
  import QueryToolbar from './query-toolbar';
26
- import { htmlElementMessages } from '../../utils/messages';
27
+
28
+ const { HTMLElementControl } = unlock( blockEditorPrivateApis );
27
29
 
28
30
  const DEFAULTS_POSTS_PER_PAGE = 3;
29
31
 
@@ -147,21 +149,18 @@ export default function QueryContent( {
147
149
  <QueryToolbar attributes={ attributes } clientId={ clientId } />
148
150
  </BlockControls>
149
151
  <InspectorControls group="advanced">
150
- <SelectControl
151
- __nextHasNoMarginBottom
152
- __next40pxDefaultSize
153
- label={ __( 'HTML element' ) }
152
+ <HTMLElementControl
153
+ tagName={ TagName }
154
+ onChange={ ( value ) =>
155
+ setAttributes( { tagName: value } )
156
+ }
157
+ clientId={ clientId }
154
158
  options={ [
155
159
  { label: __( 'Default (<div>)' ), value: 'div' },
156
160
  { label: '<main>', value: 'main' },
157
161
  { label: '<section>', value: 'section' },
158
162
  { label: '<aside>', value: 'aside' },
159
163
  ] }
160
- value={ TagName }
161
- onChange={ ( value ) =>
162
- setAttributes( { tagName: value } )
163
- }
164
- help={ htmlElementMessages[ TagName ] }
165
164
  />
166
165
  <EnhancedPaginationControl
167
166
  enhancedPagination={ enhancedPagination }
@@ -6,12 +6,13 @@ import clsx from 'clsx';
6
6
  /**
7
7
  * WordPress dependencies
8
8
  */
9
- import { HorizontalRule, SelectControl } from '@wordpress/components';
9
+ import { HorizontalRule } from '@wordpress/components';
10
10
  import {
11
11
  useBlockProps,
12
12
  getColorClassName,
13
13
  __experimentalUseColorProps as useColorProps,
14
14
  InspectorControls,
15
+ privateApis as blockEditorPrivateApis,
15
16
  } from '@wordpress/block-editor';
16
17
  import { __ } from '@wordpress/i18n';
17
18
 
@@ -19,9 +20,15 @@ import { __ } from '@wordpress/i18n';
19
20
  * Internal dependencies
20
21
  */
21
22
  import useDeprecatedOpacity from './use-deprecated-opacity';
22
- import { htmlElementMessages } from '../utils/messages';
23
+ import { unlock } from '../lock-unlock';
23
24
 
24
- export default function SeparatorEdit( { attributes, setAttributes } ) {
25
+ const { HTMLElementControl } = unlock( blockEditorPrivateApis );
26
+
27
+ export default function SeparatorEdit( {
28
+ attributes,
29
+ setAttributes,
30
+ clientId,
31
+ } ) {
25
32
  const { backgroundColor, opacity, style, tagName } = attributes;
26
33
  const colorProps = useColorProps( attributes );
27
34
  const currentColor = colorProps?.style?.backgroundColor;
@@ -52,19 +59,16 @@ export default function SeparatorEdit( { attributes, setAttributes } ) {
52
59
  return (
53
60
  <>
54
61
  <InspectorControls group="advanced">
55
- <SelectControl
56
- __nextHasNoMarginBottom
57
- __next40pxDefaultSize
58
- label={ __( 'HTML element' ) }
62
+ <HTMLElementControl
63
+ tagName={ tagName }
64
+ onChange={ ( value ) =>
65
+ setAttributes( { tagName: value } )
66
+ }
67
+ clientId={ clientId }
59
68
  options={ [
60
69
  { label: __( 'Default (<hr>)' ), value: 'hr' },
61
70
  { label: '<div>', value: 'div' },
62
71
  ] }
63
- value={ tagName }
64
- onChange={ ( value ) =>
65
- setAttributes( { tagName: value } )
66
- }
67
- help={ htmlElementMessages[ tagName ] }
68
72
  />
69
73
  </InspectorControls>
70
74
  <Wrapper
@@ -5,12 +5,15 @@ import { useEntityProp, store as coreStore } from '@wordpress/core-data';
5
5
  import { SelectControl, TextControl } from '@wordpress/components';
6
6
  import { sprintf, __ } from '@wordpress/i18n';
7
7
  import { useSelect } from '@wordpress/data';
8
+ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
8
9
 
9
10
  /**
10
11
  * Internal dependencies
11
12
  */
12
13
  import { TemplatePartImportControls } from './import-controls';
13
- import { htmlElementMessages } from '../../utils/messages';
14
+ import { unlock } from '../../lock-unlock';
15
+
16
+ const { HTMLElementControl } = unlock( blockEditorPrivateApis );
14
17
 
15
18
  export function TemplatePartAdvancedControls( {
16
19
  tagName,
@@ -19,6 +22,7 @@ export function TemplatePartAdvancedControls( {
19
22
  templatePartId,
20
23
  defaultWrapper,
21
24
  hasInnerBlocks,
25
+ clientId,
22
26
  } ) {
23
27
  const [ area, setArea ] = useEntityProp(
24
28
  'postType',
@@ -73,10 +77,10 @@ export function TemplatePartAdvancedControls( {
73
77
  />
74
78
  </>
75
79
  ) }
76
- <SelectControl
77
- __nextHasNoMarginBottom
78
- __next40pxDefaultSize
79
- label={ __( 'HTML element' ) }
80
+ <HTMLElementControl
81
+ tagName={ tagName || '' }
82
+ onChange={ ( value ) => setAttributes( { tagName: value } ) }
83
+ clientId={ clientId }
80
84
  options={ [
81
85
  {
82
86
  label: sprintf(
@@ -94,9 +98,6 @@ export function TemplatePartAdvancedControls( {
94
98
  { label: '<footer>', value: 'footer' },
95
99
  { label: '<div>', value: 'div' },
96
100
  ] }
97
- value={ tagName || '' }
98
- onChange={ ( value ) => setAttributes( { tagName: value } ) }
99
- help={ htmlElementMessages[ tagName ] }
100
101
  />
101
102
  { ! hasInnerBlocks && (
102
103
  <TemplatePartImportControls
@@ -260,6 +260,7 @@ export default function TemplatePartEdit( {
260
260
  templatePartId={ templatePartId }
261
261
  defaultWrapper={ areaObject.tagName }
262
262
  hasInnerBlocks={ hasInnerBlocks }
263
+ clientId={ clientId }
263
264
  />
264
265
  </InspectorControls>
265
266
  ) }
@@ -1,22 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.htmlElementMessages = void 0;
7
- var _i18n = require("@wordpress/i18n");
8
- /**
9
- * WordPress dependencies
10
- */
11
-
12
- const htmlElementMessages = exports.htmlElementMessages = {
13
- article: (0, _i18n.__)('The <article> element should represent a self-contained, syndicatable portion of the document.'),
14
- aside: (0, _i18n.__)("The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."),
15
- div: (0, _i18n.__)('The <div> element should only be used if the block is a design element with no semantic meaning.'),
16
- footer: (0, _i18n.__)('The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'),
17
- header: (0, _i18n.__)('The <header> element should represent introductory content, typically a group of introductory or navigational aids.'),
18
- main: (0, _i18n.__)('The <main> element should be used for the primary content of your document only.'),
19
- nav: (0, _i18n.__)('The <nav> element should be used to identify groups of links that are intended to be used for website or page content navigation.'),
20
- section: (0, _i18n.__)("The <section> element should represent a standalone portion of the document that can't be better represented by another element.")
21
- };
22
- //# sourceMappingURL=messages.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["_i18n","require","htmlElementMessages","exports","article","__","aside","div","footer","header","main","nav","section"],"sources":["@wordpress/block-library/src/utils/messages.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nexport const htmlElementMessages = {\n\tarticle: __(\n\t\t'The <article> element should represent a self-contained, syndicatable portion of the document.'\n\t),\n\taside: __(\n\t\t\"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content.\"\n\t),\n\tdiv: __(\n\t\t'The <div> element should only be used if the block is a design element with no semantic meaning.'\n\t),\n\tfooter: __(\n\t\t'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'\n\t),\n\theader: __(\n\t\t'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'\n\t),\n\tmain: __(\n\t\t'The <main> element should be used for the primary content of your document only.'\n\t),\n\tnav: __(\n\t\t'The <nav> element should be used to identify groups of links that are intended to be used for website or page content navigation.'\n\t),\n\tsection: __(\n\t\t\"The <section> element should represent a standalone portion of the document that can't be better represented by another element.\"\n\t),\n};\n"],"mappings":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGO,MAAMC,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG;EAClCE,OAAO,EAAE,IAAAC,QAAE,EACV,gGACD,CAAC;EACDC,KAAK,EAAE,IAAAD,QAAE,EACR,uIACD,CAAC;EACDE,GAAG,EAAE,IAAAF,QAAE,EACN,kGACD,CAAC;EACDG,MAAM,EAAE,IAAAH,QAAE,EACT,8HACD,CAAC;EACDI,MAAM,EAAE,IAAAJ,QAAE,EACT,qHACD,CAAC;EACDK,IAAI,EAAE,IAAAL,QAAE,EACP,kFACD,CAAC;EACDM,GAAG,EAAE,IAAAN,QAAE,EACN,mIACD,CAAC;EACDO,OAAO,EAAE,IAAAP,QAAE,EACV,kIACD;AACD,CAAC","ignoreList":[]}
@@ -1,15 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { __ } from '@wordpress/i18n';
5
- export const htmlElementMessages = {
6
- article: __('The <article> element should represent a self-contained, syndicatable portion of the document.'),
7
- aside: __("The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."),
8
- div: __('The <div> element should only be used if the block is a design element with no semantic meaning.'),
9
- footer: __('The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'),
10
- header: __('The <header> element should represent introductory content, typically a group of introductory or navigational aids.'),
11
- main: __('The <main> element should be used for the primary content of your document only.'),
12
- nav: __('The <nav> element should be used to identify groups of links that are intended to be used for website or page content navigation.'),
13
- section: __("The <section> element should represent a standalone portion of the document that can't be better represented by another element.")
14
- };
15
- //# sourceMappingURL=messages.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["__","htmlElementMessages","article","aside","div","footer","header","main","nav","section"],"sources":["@wordpress/block-library/src/utils/messages.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nexport const htmlElementMessages = {\n\tarticle: __(\n\t\t'The <article> element should represent a self-contained, syndicatable portion of the document.'\n\t),\n\taside: __(\n\t\t\"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content.\"\n\t),\n\tdiv: __(\n\t\t'The <div> element should only be used if the block is a design element with no semantic meaning.'\n\t),\n\tfooter: __(\n\t\t'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'\n\t),\n\theader: __(\n\t\t'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'\n\t),\n\tmain: __(\n\t\t'The <main> element should be used for the primary content of your document only.'\n\t),\n\tnav: __(\n\t\t'The <nav> element should be used to identify groups of links that are intended to be used for website or page content navigation.'\n\t),\n\tsection: __(\n\t\t\"The <section> element should represent a standalone portion of the document that can't be better represented by another element.\"\n\t),\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AAEpC,OAAO,MAAMC,mBAAmB,GAAG;EAClCC,OAAO,EAAEF,EAAE,CACV,gGACD,CAAC;EACDG,KAAK,EAAEH,EAAE,CACR,uIACD,CAAC;EACDI,GAAG,EAAEJ,EAAE,CACN,kGACD,CAAC;EACDK,MAAM,EAAEL,EAAE,CACT,8HACD,CAAC;EACDM,MAAM,EAAEN,EAAE,CACT,qHACD,CAAC;EACDO,IAAI,EAAEP,EAAE,CACP,kFACD,CAAC;EACDQ,GAAG,EAAER,EAAE,CACN,mIACD,CAAC;EACDS,OAAO,EAAET,EAAE,CACV,kIACD;AACD,CAAC","ignoreList":[]}
@@ -1,31 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { __ } from '@wordpress/i18n';
5
-
6
- export const htmlElementMessages = {
7
- article: __(
8
- 'The <article> element should represent a self-contained, syndicatable portion of the document.'
9
- ),
10
- aside: __(
11
- "The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
12
- ),
13
- div: __(
14
- 'The <div> element should only be used if the block is a design element with no semantic meaning.'
15
- ),
16
- footer: __(
17
- 'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
18
- ),
19
- header: __(
20
- 'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
21
- ),
22
- main: __(
23
- 'The <main> element should be used for the primary content of your document only.'
24
- ),
25
- nav: __(
26
- 'The <nav> element should be used to identify groups of links that are intended to be used for website or page content navigation.'
27
- ),
28
- section: __(
29
- "The <section> element should represent a standalone portion of the document that can't be better represented by another element."
30
- ),
31
- };