@wordpress/edit-post 7.34.0 → 7.35.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 (90) hide show
  1. package/CHANGELOG.md +8 -2
  2. package/build/components/header/fullscreen-mode-close/index.js +2 -2
  3. package/build/components/header/fullscreen-mode-close/index.js.map +1 -1
  4. package/build/components/header/index.js +7 -96
  5. package/build/components/header/index.js.map +1 -1
  6. package/build/components/header/more-menu/manage-patterns-menu-item.js +1 -1
  7. package/build/components/header/more-menu/manage-patterns-menu-item.js.map +1 -1
  8. package/build/components/layout/index.js +56 -24
  9. package/build/components/layout/index.js.map +1 -1
  10. package/build/components/meta-boxes/meta-boxes-area/index.js +2 -2
  11. package/build/components/meta-boxes/meta-boxes-area/index.js.map +1 -1
  12. package/build/components/visual-editor/index.js +11 -5
  13. package/build/components/visual-editor/index.js.map +1 -1
  14. package/build/components/visual-editor/use-padding-appender.js +6 -1
  15. package/build/components/visual-editor/use-padding-appender.js.map +1 -1
  16. package/build-module/components/header/fullscreen-mode-close/index.js +2 -2
  17. package/build-module/components/header/fullscreen-mode-close/index.js.map +1 -1
  18. package/build-module/components/header/index.js +8 -97
  19. package/build-module/components/header/index.js.map +1 -1
  20. package/build-module/components/header/more-menu/manage-patterns-menu-item.js +1 -1
  21. package/build-module/components/header/more-menu/manage-patterns-menu-item.js.map +1 -1
  22. package/build-module/components/layout/index.js +57 -25
  23. package/build-module/components/layout/index.js.map +1 -1
  24. package/build-module/components/meta-boxes/meta-boxes-area/index.js +2 -2
  25. package/build-module/components/meta-boxes/meta-boxes-area/index.js.map +1 -1
  26. package/build-module/components/visual-editor/index.js +11 -5
  27. package/build-module/components/visual-editor/index.js.map +1 -1
  28. package/build-module/components/visual-editor/use-padding-appender.js +6 -1
  29. package/build-module/components/visual-editor/use-padding-appender.js.map +1 -1
  30. package/build-style/style-rtl.css +8 -268
  31. package/build-style/style.css +8 -268
  32. package/package.json +32 -32
  33. package/src/components/header/fullscreen-mode-close/index.js +2 -2
  34. package/src/components/header/index.js +9 -112
  35. package/src/components/header/more-menu/manage-patterns-menu-item.js +1 -1
  36. package/src/components/header/style.scss +4 -241
  37. package/src/components/layout/index.js +72 -19
  38. package/src/components/meta-boxes/meta-boxes-area/index.js +4 -8
  39. package/src/components/visual-editor/index.js +11 -4
  40. package/src/components/visual-editor/use-padding-appender.js +7 -1
  41. package/src/style.scss +1 -5
  42. package/build/components/sidebar/post-format/index.js +0 -21
  43. package/build/components/sidebar/post-format/index.js.map +0 -1
  44. package/build/components/sidebar/post-pending-status/index.js +0 -26
  45. package/build/components/sidebar/post-pending-status/index.js.map +0 -1
  46. package/build/components/sidebar/post-slug/index.js +0 -21
  47. package/build/components/sidebar/post-slug/index.js.map +0 -1
  48. package/build/components/sidebar/post-status/index.js +0 -92
  49. package/build/components/sidebar/post-status/index.js.map +0 -1
  50. package/build/components/sidebar/post-sticky/index.js +0 -26
  51. package/build/components/sidebar/post-sticky/index.js.map +0 -1
  52. package/build/components/sidebar/post-trash/index.js +0 -16
  53. package/build/components/sidebar/post-trash/index.js.map +0 -1
  54. package/build/components/sidebar/post-visibility/index.js +0 -78
  55. package/build/components/sidebar/post-visibility/index.js.map +0 -1
  56. package/build/components/sidebar/settings-header/index.js +0 -53
  57. package/build/components/sidebar/settings-header/index.js.map +0 -1
  58. package/build/components/sidebar/settings-sidebar/index.js +0 -193
  59. package/build/components/sidebar/settings-sidebar/index.js.map +0 -1
  60. package/build-module/components/sidebar/post-format/index.js +0 -13
  61. package/build-module/components/sidebar/post-format/index.js.map +0 -1
  62. package/build-module/components/sidebar/post-pending-status/index.js +0 -18
  63. package/build-module/components/sidebar/post-pending-status/index.js.map +0 -1
  64. package/build-module/components/sidebar/post-slug/index.js +0 -13
  65. package/build-module/components/sidebar/post-slug/index.js.map +0 -1
  66. package/build-module/components/sidebar/post-status/index.js +0 -84
  67. package/build-module/components/sidebar/post-status/index.js.map +0 -1
  68. package/build-module/components/sidebar/post-sticky/index.js +0 -18
  69. package/build-module/components/sidebar/post-sticky/index.js.map +0 -1
  70. package/build-module/components/sidebar/post-trash/index.js +0 -9
  71. package/build-module/components/sidebar/post-trash/index.js.map +0 -1
  72. package/build-module/components/sidebar/post-visibility/index.js +0 -70
  73. package/build-module/components/sidebar/post-visibility/index.js.map +0 -1
  74. package/build-module/components/sidebar/settings-header/index.js +0 -46
  75. package/build-module/components/sidebar/settings-header/index.js.map +0 -1
  76. package/build-module/components/sidebar/settings-sidebar/index.js +0 -185
  77. package/build-module/components/sidebar/settings-sidebar/index.js.map +0 -1
  78. package/src/components/sidebar/post-format/index.js +0 -20
  79. package/src/components/sidebar/post-format/style.scss +0 -5
  80. package/src/components/sidebar/post-pending-status/index.js +0 -27
  81. package/src/components/sidebar/post-slug/index.js +0 -17
  82. package/src/components/sidebar/post-slug/style.scss +0 -5
  83. package/src/components/sidebar/post-status/index.js +0 -128
  84. package/src/components/sidebar/post-sticky/index.js +0 -27
  85. package/src/components/sidebar/post-trash/index.js +0 -12
  86. package/src/components/sidebar/post-visibility/index.js +0 -88
  87. package/src/components/sidebar/post-visibility/style.scss +0 -5
  88. package/src/components/sidebar/settings-header/index.js +0 -49
  89. package/src/components/sidebar/settings-sidebar/index.js +0 -247
  90. package/src/components/sidebar/style.scss +0 -18
@@ -1,251 +1,14 @@
1
- .edit-post-header {
2
- height: $header-height;
3
- background: $white;
4
- display: flex;
5
- flex-wrap: wrap;
6
- align-items: center;
7
- // The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket.
8
- max-width: 100vw;
9
- justify-content: space-between;
10
-
11
- // Make toolbar sticky on larger breakpoints
12
- @include break-zoomed-in {
13
- flex-wrap: nowrap;
14
- }
15
- }
16
-
17
- .edit-post-header__toolbar {
18
- display: flex;
19
- // Allow this area to shrink to fit the toolbar buttons.
20
- flex-shrink: 8;
21
- // Take up the space of the toolbar so it can be justified to the left side of the toolbar.
22
- flex-grow: 3;
23
- // Hide the overflow so flex will limit its width. Block toolbar will allow scrolling on fixed toolbar.
24
- overflow: hidden;
25
- // Leave enough room for the focus ring to show.
26
- padding: 2px 0;
27
- align-items: center;
28
- // Allow focus ring to be fully visible on furthest right button.
29
- @include break-medium() {
30
- padding-right: var(--wp-admin-border-width-focus);
31
- }
32
-
33
- .table-of-contents {
34
- display: none;
35
-
36
- @include break-small() {
37
- display: block;
38
- }
39
- }
40
- }
41
-
42
- .edit-post-header__center {
43
- flex-grow: 1;
44
- display: flex;
45
- justify-content: center;
46
-
47
- &.is-collapsed {
48
- display: none;
49
- }
50
- }
51
-
52
1
  /**
53
- * Buttons on the right side
2
+ * Show icon label overrides.
54
3
  */
55
-
56
- .edit-post-header__settings {
57
- display: inline-flex;
58
- align-items: center;
59
- flex-wrap: nowrap;
60
- padding-right: $grid-unit-05;
61
-
62
- @include break-small () {
63
- padding-right: $grid-unit-10;
64
- }
65
-
66
- gap: $grid-unit-10;
67
- }
68
-
69
- /**
70
- * Show icon labels.
71
- */
72
-
73
- .show-icon-labels.interface-pinned-items,
74
- .show-icon-labels .edit-post-header,
75
- .edit-post-header__dropdown {
76
- .components-button.has-icon {
77
- width: auto;
78
-
79
- // Hide the button icons when labels are set to display...
80
- svg {
81
- display: none;
82
- }
83
- // ... and display labels.
84
- &::after {
85
- content: attr(aria-label);
86
- }
87
- &[aria-disabled="true"] {
88
- background-color: transparent;
89
- }
90
- }
91
- .is-tertiary {
92
- &:active {
93
- box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
94
- background-color: transparent;
95
- }
96
- }
97
- // Exception for drodpdown toggle buttons.
98
- // Exception for the fullscreen mode button.
99
- .edit-post-fullscreen-mode-close.has-icon,
100
- .components-button.has-icon.button-toggle {
101
- svg {
102
- display: block;
103
- }
104
- &::after {
105
- content: none;
106
- }
107
- }
108
- // Undo the width override for fullscreen mode button.
4
+ .show-icon-labels .editor-header {
109
5
  .edit-post-fullscreen-mode-close.has-icon {
110
6
  width: $header-height;
111
- }
112
- // Don't hide MenuItemsChoice check icons
113
- .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon {
114
- display: block;
115
- }
116
- .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
117
- .interface-pinned-items .components-button {
118
- padding-left: $grid-unit;
119
- padding-right: $grid-unit;
120
-
121
- @include break-small {
122
- padding-left: $grid-unit-15;
123
- padding-right: $grid-unit-15;
7
+ svg {
8
+ display: block;
124
9
  }
125
- }
126
-
127
- .editor-post-save-draft.editor-post-save-draft,
128
- .editor-post-saved-state.editor-post-saved-state {
129
10
  &::after {
130
11
  content: none;
131
12
  }
132
13
  }
133
14
  }
134
-
135
- .show-icon-labels {
136
- .edit-post-header__toolbar .block-editor-block-mover {
137
- // Modified group borders.
138
- border-left: none;
139
-
140
- &::before {
141
- content: "";
142
- width: $border-width;
143
- height: $grid-unit-30;
144
- background-color: $gray-300;
145
- margin-top: $grid-unit-05;
146
- margin-left: $grid-unit;
147
- }
148
-
149
- // Modified block movers horizontal separator.
150
- .block-editor-block-mover__move-button-container {
151
- &::before {
152
- width: calc(100% - #{$grid-unit-30});
153
- background: $gray-300;
154
- left: calc(50% + 1px);
155
- }
156
- }
157
- }
158
- }
159
-
160
- .edit-post-header__dropdown {
161
- .components-menu-item__button.components-menu-item__button,
162
- .components-button.editor-history__undo,
163
- .components-button.editor-history__redo,
164
- .table-of-contents .components-button,
165
- .components-button.block-editor-list-view {
166
- margin: 0;
167
- padding: 6px 6px 6px $grid-unit-50;
168
- width: 14.625rem;
169
- text-align: left;
170
- justify-content: flex-start;
171
- }
172
- }
173
-
174
- .show-icon-labels.interface-pinned-items {
175
- padding: 6px $grid-unit-15 $grid-unit-15;
176
- margin-top: 0;
177
- margin-bottom: 0;
178
- margin-left: -$grid-unit-15;
179
- margin-right: -$grid-unit-15;
180
- border-bottom: 1px solid $gray-400;
181
- display: block;
182
-
183
- > .components-button.has-icon {
184
- margin: 0;
185
- padding: 6px 6px 6px $grid-unit;
186
- width: 14.625rem;
187
- justify-content: flex-start;
188
-
189
- &[aria-expanded="true"] svg {
190
- display: block;
191
- max-width: $grid-unit-30;
192
- }
193
- &[aria-expanded="false"] {
194
- padding-left: $grid-unit-50;
195
- }
196
- svg {
197
- margin-right: 8px;
198
- }
199
- }
200
- }
201
-
202
- .edit-post-header__post-preview-button {
203
- @include break-small {
204
- display: none;
205
- }
206
- }
207
-
208
- .is-distraction-free {
209
- .interface-interface-skeleton__header {
210
- border-bottom: none;
211
- }
212
-
213
- .edit-post-header {
214
- background-color: $white;
215
- border-bottom: 1px solid #e0e0e0;
216
- position: absolute;
217
- width: 100%;
218
-
219
-
220
- // hide some parts
221
- & > .edit-post-header__settings > .edit-post-header__post-preview-button {
222
- visibility: hidden;
223
- }
224
-
225
- & > .edit-post-header__toolbar .editor-document-tools__document-overview-toggle,
226
- & > .edit-post-header__settings > .editor-preview-dropdown,
227
- & > .edit-post-header__settings > .interface-pinned-items {
228
- display: none;
229
- }
230
-
231
- }
232
-
233
- // We need ! important because we override inline styles
234
- // set by the motion component.
235
- .interface-interface-skeleton__header:focus-within {
236
- opacity: 1 !important;
237
- div {
238
- transform: translateX(0) translateZ(0) !important;
239
- }
240
-
241
- }
242
-
243
- .components-editor-notices__dismissible {
244
- position: absolute;
245
- z-index: 35;
246
- }
247
- }
248
-
249
- .components-popover.more-menu-dropdown__content {
250
- z-index: z-index(".components-popover.more-menu__content");
251
- }
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * External dependencies
3
3
  */
4
- import classnames from 'classnames';
4
+ import clsx from 'clsx';
5
5
 
6
6
  /**
7
7
  * WordPress dependencies
@@ -28,13 +28,14 @@ import { ScrollLock } from '@wordpress/components';
28
28
  import { useViewportMatch } from '@wordpress/compose';
29
29
  import { PluginArea } from '@wordpress/plugins';
30
30
  import { __, _x, sprintf } from '@wordpress/i18n';
31
- import { useState, useEffect, useCallback, useMemo } from '@wordpress/element';
31
+ import { useState, useCallback, useMemo } from '@wordpress/element';
32
32
  import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
33
33
  import { store as noticesStore } from '@wordpress/notices';
34
34
  import { store as preferencesStore } from '@wordpress/preferences';
35
35
  import { privateApis as commandsPrivateApis } from '@wordpress/commands';
36
36
  import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
37
37
  import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
38
+ import { addQueryArgs } from '@wordpress/url';
38
39
 
39
40
  /**
40
41
  * Internal dependencies
@@ -45,7 +46,6 @@ import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
45
46
  import InitPatternModal from '../init-pattern-modal';
46
47
  import BrowserURL from '../browser-url';
47
48
  import Header from '../header';
48
- import SettingsSidebar from '../sidebar/settings-sidebar';
49
49
  import MetaBoxes from '../meta-boxes';
50
50
  import WelcomeGuide from '../welcome-guide';
51
51
  import { store as editPostStore } from '../../store';
@@ -63,6 +63,7 @@ const {
63
63
  SavePublishPanels,
64
64
  InterfaceSkeleton,
65
65
  interfaceStore,
66
+ Sidebar,
66
67
  } = unlock( editorPrivateApis );
67
68
  const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
68
69
 
@@ -135,13 +136,11 @@ function Layout( { initialPost } ) {
135
136
  useCommonCommands();
136
137
 
137
138
  const isMobileViewport = useViewportMatch( 'medium', '<' );
138
- const isHugeViewport = useViewportMatch( 'huge', '>=' );
139
139
  const isWideViewport = useViewportMatch( 'large' );
140
140
  const isLargeViewport = useViewportMatch( 'medium' );
141
141
 
142
142
  const { closeGeneralSidebar } = useDispatch( editPostStore );
143
143
  const { createErrorNotice } = useDispatch( noticesStore );
144
- const { setIsInserterOpened } = useDispatch( editorStore );
145
144
  const {
146
145
  mode,
147
146
  isFullscreenActive,
@@ -160,6 +159,8 @@ function Layout( { initialPost } ) {
160
159
  documentLabel,
161
160
  hasHistory,
162
161
  hasBlockBreadcrumbs,
162
+ blockEditorMode,
163
+ isEditingTemplate,
163
164
  } = useSelect( ( select ) => {
164
165
  const { get } = select( preferencesStore );
165
166
  const { getEditorSettings, getPostTypeLabel } = select( editorStore );
@@ -195,6 +196,10 @@ function Layout( { initialPost } ) {
195
196
  !! select( blockEditorStore ).getBlockSelectionStart(),
196
197
  hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord,
197
198
  hasBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
199
+ blockEditorMode:
200
+ select( blockEditorStore ).__unstableGetEditorMode(),
201
+ isEditingTemplate:
202
+ select( editorStore ).getCurrentPostType() === 'wp_template',
198
203
  };
199
204
  }, [] );
200
205
 
@@ -206,18 +211,6 @@ function Layout( { initialPost } ) {
206
211
 
207
212
  const styles = useEditorStyles();
208
213
 
209
- // Inserter and Sidebars are mutually exclusive
210
- useEffect( () => {
211
- if ( sidebarIsOpened && ! isHugeViewport ) {
212
- setIsInserterOpened( false );
213
- }
214
- }, [ isHugeViewport, setIsInserterOpened, sidebarIsOpened ] );
215
- useEffect( () => {
216
- if ( isInserterOpened && ! isHugeViewport ) {
217
- closeGeneralSidebar();
218
- }
219
- }, [ closeGeneralSidebar, isInserterOpened, isHugeViewport ] );
220
-
221
214
  // Local state for save panel.
222
215
  // Note 'truthy' callback implies an open panel.
223
216
  const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
@@ -240,7 +233,7 @@ function Layout( { initialPost } ) {
240
233
  document.body.classList.remove( 'show-icon-labels' );
241
234
  }
242
235
 
243
- const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
236
+ const className = clsx( 'edit-post-layout', 'is-mode-' + mode, {
244
237
  'is-sidebar-opened': sidebarIsOpened,
245
238
  'has-metaboxes': hasActiveMetaboxes,
246
239
  'is-distraction-free': isDistractionFree && isWideViewport,
@@ -281,6 +274,58 @@ function Layout( { initialPost } ) {
281
274
  );
282
275
  }
283
276
 
277
+ const { createSuccessNotice } = useDispatch( noticesStore );
278
+
279
+ const onActionPerformed = useCallback(
280
+ ( actionId, items ) => {
281
+ switch ( actionId ) {
282
+ case 'move-to-trash':
283
+ {
284
+ document.location.href = addQueryArgs( 'edit.php', {
285
+ trashed: 1,
286
+ post_type: items[ 0 ].type,
287
+ ids: items[ 0 ].id,
288
+ } );
289
+ }
290
+ break;
291
+ case 'duplicate-post':
292
+ {
293
+ const newItem = items[ 0 ];
294
+ const title =
295
+ typeof newItem.title === 'string'
296
+ ? newItem.title
297
+ : newItem.title?.rendered;
298
+ createSuccessNotice(
299
+ sprintf(
300
+ // translators: %s: Title of the created post e.g: "Post 1".
301
+ __( '"%s" successfully created.' ),
302
+ title
303
+ ),
304
+ {
305
+ type: 'snackbar',
306
+ id: 'duplicate-post-action',
307
+ actions: [
308
+ {
309
+ label: __( 'Edit' ),
310
+ onClick: () => {
311
+ const postId = newItem.id;
312
+ document.location.href =
313
+ addQueryArgs( 'post.php', {
314
+ post: postId,
315
+ action: 'edit',
316
+ } );
317
+ },
318
+ },
319
+ ],
320
+ }
321
+ );
322
+ }
323
+ break;
324
+ }
325
+ },
326
+ [ createSuccessNotice ]
327
+ );
328
+
284
329
  return (
285
330
  <>
286
331
  <FullscreenMode isActive={ isFullscreenActive } />
@@ -342,6 +387,7 @@ function Layout( { initialPost } ) {
342
387
  ! isMobileViewport &&
343
388
  showBlockBreadcrumbs &&
344
389
  isRichEditingEnabled &&
390
+ blockEditorMode !== 'zoom-out' &&
345
391
  mode === 'visual' && (
346
392
  <div className="edit-post-layout__footer">
347
393
  <BlockBreadcrumb rootLabelText={ documentLabel } />
@@ -368,7 +414,14 @@ function Layout( { initialPost } ) {
368
414
  <WelcomeGuide />
369
415
  <InitPatternModal />
370
416
  <PluginArea onError={ onPluginAreaError } />
371
- { ! isDistractionFree && <SettingsSidebar /> }
417
+ { ! isDistractionFree && (
418
+ <Sidebar
419
+ onActionPerformed={ onActionPerformed }
420
+ extraPanels={
421
+ ! isEditingTemplate && <MetaBoxes location="side" />
422
+ }
423
+ />
424
+ ) }
372
425
  </>
373
426
  );
374
427
  }
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * External dependencies
3
3
  */
4
- import classnames from 'classnames';
4
+ import clsx from 'clsx';
5
5
 
6
6
  /**
7
7
  * WordPress dependencies
@@ -48,13 +48,9 @@ function MetaBoxesArea( { location } ) {
48
48
  return select( editPostStore ).isSavingMetaBoxes();
49
49
  }, [] );
50
50
 
51
- const classes = classnames(
52
- 'edit-post-meta-boxes-area',
53
- `is-${ location }`,
54
- {
55
- 'is-loading': isSaving,
56
- }
57
- );
51
+ const classes = clsx( 'edit-post-meta-boxes-area', `is-${ location }`, {
52
+ 'is-loading': isSaving,
53
+ } );
58
54
 
59
55
  return (
60
56
  <div className={ classes }>
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * External dependencies
3
3
  */
4
- import classnames from 'classnames';
4
+ import clsx from 'clsx';
5
5
 
6
6
  /**
7
7
  * WordPress dependencies
@@ -13,6 +13,7 @@ import {
13
13
  import { useMemo } from '@wordpress/element';
14
14
  import { useSelect } from '@wordpress/data';
15
15
  import { store as blocksStore } from '@wordpress/blocks';
16
+ import { store as blockEditorStore } from '@wordpress/block-editor';
16
17
 
17
18
  /**
18
19
  * Internal dependencies
@@ -32,12 +33,13 @@ export default function VisualEditor( { styles } ) {
32
33
  isBlockBasedTheme,
33
34
  hasV3BlocksOnly,
34
35
  isEditingTemplate,
36
+ isZoomedOutView,
35
37
  } = useSelect( ( select ) => {
36
38
  const { isFeatureActive } = select( editPostStore );
37
39
  const { getEditorSettings, getRenderingMode } = select( editorStore );
38
40
  const { getBlockTypes } = select( blocksStore );
41
+ const { __unstableGetEditorMode } = select( blockEditorStore );
39
42
  const editorSettings = getEditorSettings();
40
-
41
43
  return {
42
44
  isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
43
45
  renderingMode: getRenderingMode(),
@@ -47,6 +49,7 @@ export default function VisualEditor( { styles } ) {
47
49
  } ),
48
50
  isEditingTemplate:
49
51
  select( editorStore ).getCurrentPostType() === 'wp_template',
52
+ isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
50
53
  };
51
54
  }, [] );
52
55
  const hasMetaBoxes = useSelect(
@@ -60,7 +63,11 @@ export default function VisualEditor( { styles } ) {
60
63
 
61
64
  // Add a constant padding for the typewritter effect. When typing at the
62
65
  // bottom, there needs to be room to scroll up.
63
- if ( ! hasMetaBoxes && renderingMode === 'post-only' ) {
66
+ if (
67
+ ! isZoomedOutView &&
68
+ ! hasMetaBoxes &&
69
+ renderingMode === 'post-only'
70
+ ) {
64
71
  paddingBottom = '40vh';
65
72
  }
66
73
 
@@ -84,7 +91,7 @@ export default function VisualEditor( { styles } ) {
84
91
 
85
92
  return (
86
93
  <div
87
- className={ classnames( 'edit-post-visual-editor', {
94
+ className={ clsx( 'edit-post-visual-editor', {
88
95
  'has-inline-canvas': ! isToBeIframed,
89
96
  } ) }
90
97
  >
@@ -27,7 +27,7 @@ export function usePaddingAppender() {
27
27
  return;
28
28
  }
29
29
 
30
- // only handle clicks under the last child
30
+ // Only handle clicks under the last child.
31
31
  const lastChild = node.lastElementChild;
32
32
  if ( ! lastChild ) {
33
33
  return;
@@ -44,6 +44,12 @@ export function usePaddingAppender() {
44
44
  .select( blockEditorStore )
45
45
  .getBlockOrder( '' );
46
46
  const lastBlockClientId = blockOrder[ blockOrder.length - 1 ];
47
+
48
+ // Do nothing when only default block appender is present.
49
+ if ( ! lastBlockClientId ) {
50
+ return;
51
+ }
52
+
47
53
  const lastBlock = registry
48
54
  .select( blockEditorStore )
49
55
  .getBlock( lastBlockClientId );
package/src/style.scss CHANGED
@@ -2,10 +2,6 @@
2
2
  @import "./components/header/fullscreen-mode-close/style.scss";
3
3
  @import "./components/layout/style.scss";
4
4
  @import "./components/meta-boxes/meta-boxes-area/style.scss";
5
- @import "./components/sidebar/style.scss";
6
- @import "./components/sidebar/post-format/style.scss";
7
- @import "./components/sidebar/post-slug/style.scss";
8
- @import "./components/sidebar/post-visibility/style.scss";
9
5
  @import "./components/text-editor/style.scss";
10
6
  @import "./components/visual-editor/style.scss";
11
7
  @import "./components/welcome-guide/style.scss";
@@ -39,7 +35,7 @@ body.js.block-editor-page {
39
35
  }
40
36
 
41
37
  // Target the editor UI excluding the visual editor contents, metaboxes and custom fields areas.
42
- .edit-post-header,
38
+ .editor-header,
43
39
  .edit-post-text-editor,
44
40
  .editor-sidebar,
45
41
  .editor-post-publish-panel {
@@ -1,21 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.PostFormat = PostFormat;
7
- exports.default = void 0;
8
- var _react = require("react");
9
- var _components = require("@wordpress/components");
10
- var _editor = require("@wordpress/editor");
11
- /**
12
- * WordPress dependencies
13
- */
14
-
15
- function PostFormat() {
16
- return (0, _react.createElement)(_editor.PostFormatCheck, null, (0, _react.createElement)(_components.PanelRow, {
17
- className: "edit-post-post-format"
18
- }, (0, _react.createElement)(_editor.PostFormat, null)));
19
- }
20
- var _default = exports.default = PostFormat;
21
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["_components","require","_editor","PostFormat","_react","createElement","PostFormatCheck","PanelRow","className","_default","exports","default"],"sources":["@wordpress/edit-post/src/components/sidebar/post-format/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { PanelRow } from '@wordpress/components';\nimport {\n\tPostFormat as PostFormatForm,\n\tPostFormatCheck,\n} from '@wordpress/editor';\n\nexport function PostFormat() {\n\treturn (\n\t\t<PostFormatCheck>\n\t\t\t<PanelRow className=\"edit-post-post-format\">\n\t\t\t\t<PostFormatForm />\n\t\t\t</PanelRow>\n\t\t</PostFormatCheck>\n\t);\n}\n\nexport default PostFormat;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAOO,SAASE,UAAUA,CAAA,EAAG;EAC5B,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACH,OAAA,CAAAI,eAAe,QACf,IAAAF,MAAA,CAAAC,aAAA,EAACL,WAAA,CAAAO,QAAQ;IAACC,SAAS,EAAC;EAAuB,GAC1C,IAAAJ,MAAA,CAAAC,aAAA,EAACH,OAAA,CAAAC,UAAc,MAAE,CACR,CACM,CAAC;AAEpB;AAAC,IAAAM,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcR,UAAU","ignoreList":[]}
@@ -1,26 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.PostPendingStatus = PostPendingStatus;
7
- exports.default = void 0;
8
- var _react = require("react");
9
- var _editor = require("@wordpress/editor");
10
- var _lockUnlock = require("../../../lock-unlock");
11
- /**
12
- * WordPress dependencies
13
- */
14
-
15
- /**
16
- * Internal dependencies
17
- */
18
-
19
- const {
20
- PostPanelRow
21
- } = (0, _lockUnlock.unlock)(_editor.privateApis);
22
- function PostPendingStatus() {
23
- return (0, _react.createElement)(_editor.PostPendingStatusCheck, null, (0, _react.createElement)(PostPanelRow, null, (0, _react.createElement)(_editor.PostPendingStatus, null)));
24
- }
25
- var _default = exports.default = PostPendingStatus;
26
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["_editor","require","_lockUnlock","PostPanelRow","unlock","editorPrivateApis","PostPendingStatus","_react","createElement","PostPendingStatusCheck","_default","exports","default"],"sources":["@wordpress/edit-post/src/components/sidebar/post-pending-status/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tPostPendingStatus as PostPendingStatusForm,\n\tPostPendingStatusCheck,\n\tprivateApis as editorPrivateApis,\n} from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\n\nconst { PostPanelRow } = unlock( editorPrivateApis );\n\nexport function PostPendingStatus() {\n\treturn (\n\t\t<PostPendingStatusCheck>\n\t\t\t<PostPanelRow>\n\t\t\t\t<PostPendingStatusForm />\n\t\t\t</PostPanelRow>\n\t\t</PostPendingStatusCheck>\n\t);\n}\n\nexport default PostPendingStatus;\n"],"mappings":";;;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AASA,IAAAC,WAAA,GAAAD,OAAA;AAZA;AACA;AACA;;AAOA;AACA;AACA;;AAGA,MAAM;EAAEE;AAAa,CAAC,GAAG,IAAAC,kBAAM,EAAEC,mBAAkB,CAAC;AAE7C,SAASC,iBAAiBA,CAAA,EAAG;EACnC,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACR,OAAA,CAAAS,sBAAsB,QACtB,IAAAF,MAAA,CAAAC,aAAA,EAACL,YAAY,QACZ,IAAAI,MAAA,CAAAC,aAAA,EAACR,OAAA,CAAAM,iBAAqB,MAAE,CACX,CACS,CAAC;AAE3B;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcN,iBAAiB","ignoreList":[]}
@@ -1,21 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.PostSlug = PostSlug;
7
- exports.default = void 0;
8
- var _react = require("react");
9
- var _components = require("@wordpress/components");
10
- var _editor = require("@wordpress/editor");
11
- /**
12
- * WordPress dependencies
13
- */
14
-
15
- function PostSlug() {
16
- return (0, _react.createElement)(_editor.PostSlugCheck, null, (0, _react.createElement)(_components.PanelRow, {
17
- className: "edit-post-post-slug"
18
- }, (0, _react.createElement)(_editor.PostSlug, null)));
19
- }
20
- var _default = exports.default = PostSlug;
21
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["_components","require","_editor","PostSlug","_react","createElement","PostSlugCheck","PanelRow","className","_default","exports","default"],"sources":["@wordpress/edit-post/src/components/sidebar/post-slug/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { PanelRow } from '@wordpress/components';\nimport { PostSlug as PostSlugForm, PostSlugCheck } from '@wordpress/editor';\n\nexport function PostSlug() {\n\treturn (\n\t\t<PostSlugCheck>\n\t\t\t<PanelRow className=\"edit-post-post-slug\">\n\t\t\t\t<PostSlugForm />\n\t\t\t</PanelRow>\n\t\t</PostSlugCheck>\n\t);\n}\n\nexport default PostSlug;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAIO,SAASE,QAAQA,CAAA,EAAG;EAC1B,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACH,OAAA,CAAAI,aAAa,QACb,IAAAF,MAAA,CAAAC,aAAA,EAACL,WAAA,CAAAO,QAAQ;IAACC,SAAS,EAAC;EAAqB,GACxC,IAAAJ,MAAA,CAAAC,aAAA,EAACH,OAAA,CAAAC,QAAY,MAAE,CACN,CACI,CAAC;AAElB;AAAC,IAAAM,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcR,QAAQ","ignoreList":[]}