@secretstache/wordpress-gutenberg 0.4.0 → 0.4.2

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 (19) hide show
  1. package/build/index.js +3 -3
  2. package/build/index.js.map +1 -1
  3. package/build/styles.css +182 -93
  4. package/package.json +1 -1
  5. package/src/components/EmptyBlockAppender.js +30 -0
  6. package/src/components/LinkControl.js +3 -2
  7. package/src/components/ResourcesWrapper.js +16 -9
  8. package/src/components/index.js +1 -0
  9. package/src/hooks/index.js +0 -1
  10. package/src/hooks/useDataQuery.js +7 -7
  11. package/src/hooks/useSlider.js +5 -1
  12. package/src/styles/_empty-block-appender.scss +82 -0
  13. package/src/styles/_link-control.scss +55 -0
  14. package/src/styles/_root-block-appender.scss +0 -7
  15. package/src/styles/styles.scss +83 -10
  16. package/src/utils/helpers.js +0 -1
  17. package/src/utils/internal/helpers.js +13 -0
  18. package/src/hooks/useUpdateAttribute.js +0 -4
  19. package/src/styles/_editor-base.scss +0 -56
package/build/styles.css CHANGED
@@ -1,55 +1,181 @@
1
- .block-editor__container .editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper {
2
- margin-top: 10px !important;
3
- margin-bottom: 10px !important; }
4
- .block-editor__container .editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper h1.editor-post-title {
5
- margin: 0;
6
- border-bottom: 1px dashed #ddd;
7
- padding-bottom: 10px;
8
- font-weight: normal;
9
- font-size: 30px !important;
10
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
11
- text-align: center; }
12
-
13
- .block-editor__container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container {
14
- margin-bottom: 3rem;
15
- padding-bottom: 100px; }
16
- .block-editor__container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container.has-background {
17
- transition: background 1s, color 1s; }
18
- .block-editor__container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .block-list-appender.wp-block:only-child p {
19
- margin-top: 0;
20
- margin-bottom: 0; }
21
- .block-editor__container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .block-list-appender.wp-block:only-child,
22
- .block-editor__container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > p.wp-block:only-child {
23
- margin: 2rem 0; }
1
+ .block-editor__container .editor-visual-editor {
2
+ z-index: 1; }
3
+ .block-editor__container .editor-visual-editor:not(.is-resizable) .editor-styles-wrapper::after {
4
+ display: none; }
5
+ .block-editor__container .editor-visual-editor.is-resizable .root-block-appender {
6
+ display: none; }
7
+ .block-editor__container .editor-visual-editor.is-resizable + .edit-post-layout__metaboxes {
8
+ display: none; }
9
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper {
10
+ margin-top: 10px;
11
+ margin-bottom: 10px; }
12
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper h1.editor-post-title {
13
+ margin: 0;
14
+ border-bottom: 1px dashed #ddd;
15
+ padding-bottom: 10px;
16
+ font-weight: normal;
17
+ font-size: 30px;
18
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
19
+ text-align: center; }
20
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container {
21
+ margin-bottom: 0;
22
+ padding-bottom: 0; }
23
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .root-block-appender {
24
+ position: absolute;
25
+ bottom: 30px;
26
+ left: 50%;
27
+ transform: translateX(-50%);
28
+ width: calc(100% - var(--content-padding) * 2); }
29
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .root-block-appender::after {
30
+ content: attr(data-tooltip);
31
+ position: absolute;
32
+ left: 50%;
33
+ bottom: -30px;
34
+ transform: translateX(-50%);
35
+ z-index: 1;
36
+ visibility: hidden;
37
+ opacity: 0;
38
+ transition: opacity 0.3s;
39
+ width: max-content;
40
+ max-width: 200px;
41
+ white-space: nowrap;
42
+ background: #000;
43
+ border-radius: 2px;
44
+ color: #f0f0f0;
45
+ font-size: 12px;
46
+ line-height: 1.4;
47
+ padding: 4px 8px;
48
+ text-align: center;
49
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif; }
50
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .root-block-appender:hover::after {
51
+ visibility: visible;
52
+ opacity: 1; }
53
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .root-block-appender ~ .block-list-appender.wp-block {
54
+ display: none; }
55
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender {
56
+ --button-color: #192f5f;
57
+ --button-border: var(--button-color);
58
+ --button-hover-color: var(--wp-admin-theme-color);
59
+ --button-hover-border: var(--wp-admin-theme-color);
60
+ --tr: .3s;
61
+ display: flex;
62
+ flex-direction: column;
63
+ align-items: center;
64
+ justify-content: center;
65
+ padding: 32px; }
66
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender__content {
67
+ text-align: center; }
68
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender__icon {
69
+ width: 48px;
70
+ height: 48px;
71
+ color: var(--button-color);
72
+ margin-bottom: 16px; }
73
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender__title {
74
+ font-size: 32px;
75
+ font-weight: 600;
76
+ line-height: 110%;
77
+ color: var(--button-color);
78
+ margin-bottom: 0.5rem; }
79
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender__text {
80
+ font-size: 1rem;
81
+ font-weight: 400;
82
+ color: var(--button-color);
83
+ margin-bottom: 1.5rem; }
84
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender__button .block-editor-button-block-appender {
85
+ display: inline-flex;
86
+ justify-content: center;
87
+ align-items: center;
88
+ transition: color var(--tr), border-color var(--tr);
89
+ cursor: pointer;
90
+ border: 2px solid var(--button-border) !important;
91
+ box-shadow: none;
92
+ border-radius: 10px;
93
+ background: transparent !important;
94
+ padding: 12px 24px;
95
+ min-height: 50px;
96
+ min-width: 200px;
97
+ color: var(--button-color);
98
+ font-weight: 600;
99
+ font-size: 22px; }
100
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender__button .block-editor-button-block-appender:hover, .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender__button .block-editor-button-block-appender:focus {
101
+ color: var(--button-hover-color);
102
+ border-color: var(--button-hover-border) !important;
103
+ outline: none !important;
104
+ box-shadow: none !important; }
105
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender__button .block-editor-button-block-appender::before, .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender__button .block-editor-button-block-appender::after {
106
+ display: none !important; }
107
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender__button .block-editor-button-block-appender .block-editor-button-block-appender__content {
108
+ display: flex;
109
+ align-items: center;
110
+ justify-content: center;
111
+ width: 24px;
112
+ height: 24px; }
113
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container:has(.root-block-appender) {
114
+ margin-bottom: 3rem;
115
+ padding-bottom: 200px; }
116
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container.has-background {
117
+ transition: background 1s, color 1s; }
118
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container > .block-list-appender.wp-block:only-child p {
119
+ margin-top: 0;
120
+ margin-bottom: 0; }
121
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container > .block-list-appender.wp-block:only-child,
122
+ .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container > p.wp-block:only-child {
123
+ margin: 2rem 0; }
24
124
 
25
- .block-editor__container .block-editor-block-types-list > [role=presentation] {
26
- justify-content: center; }
125
+ .block-editor__container .editor-sidebar .bc-url-input input {
126
+ width: 100%;
127
+ border: 1px solid #949494; }
27
128
 
28
- .block-editor__container .components-base-control .block-editor-url-input input.block-editor-url-input__input {
29
- width: 100%; }
129
+ .block-editor__container .editor-sidebar .components-base-control .block-editor-link-control .block-editor-url-input {
130
+ margin-top: 0; }
30
131
 
31
- .block-editor__container .components-range-control__mark-label {
32
- margin-top: 7px !important; }
132
+ .block-editor__container .editor-sidebar .components-base-control .block-editor-link-control .block-editor-link-control__search-item {
133
+ padding-top: 0; }
33
134
 
34
- .block-editor__container .bc-animation-block-json-file {
135
+ .block-editor__container .editor-sidebar .block-editor-link-control {
136
+ min-width: 100%;
137
+ width: 100%; }
138
+ .block-editor__container .editor-sidebar .block-editor-link-control .block-editor-url-input__input {
139
+ width: 100%; }
140
+ .block-editor__container .editor-sidebar .block-editor-link-control .components-base-control {
141
+ margin-left: 0;
142
+ margin-right: 0; }
143
+ .block-editor__container .editor-sidebar .block-editor-link-control .block-editor-link-control__search-enter {
144
+ right: 5px; }
145
+ .block-editor__container .editor-sidebar .block-editor-link-control .components-spinner {
146
+ top: 50%;
147
+ transform: translateY(-50%); }
148
+ .block-editor__container .editor-sidebar .block-editor-link-control .block-editor-link-control__tools,
149
+ .block-editor__container .editor-sidebar .block-editor-link-control .block-editor-link-control__search-actions,
150
+ .block-editor__container .editor-sidebar .block-editor-link-control .block-editor-link-control__search-results,
151
+ .block-editor__container .editor-sidebar .block-editor-link-control .block-editor-link-control__search-item {
152
+ padding-left: 0;
153
+ padding-right: 0; }
154
+ .block-editor__container .editor-sidebar .block-editor-link-control .components-menu-item__item {
155
+ min-width: unset; }
156
+ .block-editor__container .editor-sidebar .block-editor-link-control .components-button.block-editor-link-control__drawer-toggle {
157
+ box-shadow: none;
158
+ outline: none; }
159
+
160
+ .block-editor__container .editor-sidebar .bc-animation-block-json-file {
35
161
  display: flex;
36
162
  align-items: center;
37
163
  cursor: pointer; }
38
164
 
39
- .block-editor__container .bc-remove-btn {
165
+ .block-editor__container .editor-sidebar .bc-remove-btn {
40
166
  margin-top: 15px;
41
167
  margin-bottom: 15px;
42
168
  display: flex; }
43
169
 
44
- .block-editor__container .svg-container {
170
+ .block-editor__container .editor-sidebar .svg-container {
45
171
  width: 100%;
46
172
  height: auto; }
47
173
 
48
- .block-editor__container .bc-image-wrapper {
174
+ .block-editor__container .editor-sidebar .bc-image-wrapper {
49
175
  position: relative;
50
176
  height: auto;
51
177
  align-self: start; }
52
- .block-editor__container .bc-image-wrapper__actions {
178
+ .block-editor__container .editor-sidebar .bc-image-wrapper__actions {
53
179
  display: none;
54
180
  position: absolute;
55
181
  top: 0;
@@ -63,9 +189,9 @@
63
189
  padding: 5px 15px;
64
190
  z-index: 20; }
65
191
  @media screen and (max-width: 768px) {
66
- .block-editor__container .bc-image-wrapper__actions {
192
+ .block-editor__container .editor-sidebar .bc-image-wrapper__actions {
67
193
  gap: 15px; } }
68
- .block-editor__container .bc-image-wrapper__btn {
194
+ .block-editor__container .editor-sidebar .bc-image-wrapper__btn {
69
195
  font-size: 14px !important;
70
196
  backdrop-filter: blur(16px) saturate(180%);
71
197
  background: rgba(255, 255, 255, 0.75);
@@ -73,9 +199,9 @@
73
199
  justify-content: center;
74
200
  max-width: 130px; }
75
201
  @media screen and (max-width: 768px) {
76
- .block-editor__container .bc-image-wrapper__btn {
202
+ .block-editor__container .editor-sidebar .bc-image-wrapper__btn {
77
203
  padding: 5px; } }
78
- .block-editor__container .bc-image-wrapper__overlay {
204
+ .block-editor__container .editor-sidebar .bc-image-wrapper__overlay {
79
205
  display: none;
80
206
  position: absolute;
81
207
  top: 0;
@@ -85,54 +211,50 @@
85
211
  z-index: 10;
86
212
  background: rgba(255, 255, 255, 0.3);
87
213
  backdrop-filter: blur(3px); }
88
- .block-editor__container .bc-image-wrapper:hover .bc-image-wrapper__actions {
214
+ .block-editor__container .editor-sidebar .bc-image-wrapper:hover .bc-image-wrapper__actions {
89
215
  display: flex; }
90
- .block-editor__container .bc-image-wrapper:hover .bc-image-wrapper__overlay {
216
+ .block-editor__container .editor-sidebar .bc-image-wrapper:hover .bc-image-wrapper__overlay {
91
217
  display: block; }
92
218
 
93
- .block-editor__container .bc-url-input input {
94
- width: 100%;
95
- border: 1px solid #949494; }
96
-
97
- .block-editor__container .bc-selected-media-wrapper {
219
+ .block-editor__container .editor-sidebar .bc-selected-media-wrapper {
98
220
  max-width: 200px;
99
221
  cursor: pointer;
100
222
  background: rgba(0, 0, 0, 0.3); }
101
223
 
102
- .block-editor__container .bc-selected-media {
224
+ .block-editor__container .editor-sidebar .bc-selected-media {
103
225
  display: block;
104
226
  width: 100%; }
105
- .block-editor__container .bc-selected-media--image {
227
+ .block-editor__container .editor-sidebar .bc-selected-media--image {
106
228
  max-height: 300px; }
107
229
 
108
- .block-editor__container .bc-select-btn,
109
- .block-editor__container .bc-remove-btn {
230
+ .block-editor__container .editor-sidebar .bc-select-btn,
231
+ .block-editor__container .editor-sidebar .bc-remove-btn {
110
232
  margin-top: 15px;
111
233
  margin-bottom: 15px;
112
234
  display: flex; }
113
235
 
114
- .block-editor__container .react-select__input {
236
+ .block-editor__container .editor-sidebar .react-select__input {
115
237
  box-shadow: none !important; }
116
238
 
117
- .block-editor__container .bc-responsive-spacing-tab:last-child {
239
+ .block-editor__container .editor-sidebar .bc-responsive-spacing-tab:last-child {
118
240
  margin-bottom: 2rem; }
119
241
 
120
- .block-editor__container .bc-spacing-control-wrapper {
242
+ .block-editor__container .editor-sidebar .bc-spacing-control-wrapper {
121
243
  margin-bottom: 35px; }
122
244
 
123
- .block-editor__container .bc-spacing-range-control {
245
+ .block-editor__container .editor-sidebar .bc-spacing-range-control {
124
246
  padding: 0 6px; }
125
- .block-editor__container .bc-spacing-range-control .components-base-control__label {
247
+ .block-editor__container .editor-sidebar .bc-spacing-range-control .components-base-control__label {
126
248
  margin-left: -9px; }
127
- .block-editor__container .bc-spacing-range-control .components-range-control__root .components-range-control__wrapper {
249
+ .block-editor__container .editor-sidebar .bc-spacing-range-control .components-range-control__root .components-range-control__wrapper {
128
250
  margin-bottom: 0; }
129
- .block-editor__container .bc-spacing-range-control .components-range-control__root .components-range-control__wrapper .components-range-control__marks .components-range-control__mark-label {
251
+ .block-editor__container .editor-sidebar .bc-spacing-range-control .components-range-control__root .components-range-control__wrapper .components-range-control__marks .components-range-control__mark-label {
130
252
  left: 8px !important;
131
253
  margin-top: 7px !important; }
132
- .block-editor__container .bc-spacing-range-control .components-base-control__help {
254
+ .block-editor__container .editor-sidebar .bc-spacing-range-control .components-base-control__help {
133
255
  margin-left: -11px; }
134
256
 
135
- .block-editor__container .bc-add-new-child-btn {
257
+ .block-editor__container .editor-sidebar .bc-add-new-child-btn {
136
258
  display: flex;
137
259
  margin: 20px auto !important;
138
260
  align-items: center;
@@ -147,38 +269,5 @@
147
269
  box-shadow: inset 0 0 0 1px #1e1e1e;
148
270
  color: #1e1e1e; }
149
271
 
150
- .block-editor__container .editor-visual-editor.is-resizable .root-block-appender {
151
- display: none; }
152
-
153
- .block-editor__container .root-block-appender {
154
- position: absolute;
155
- bottom: 30px;
156
- left: 50%;
157
- transform: translateX(-50%);
158
- width: calc(100% - var(--content-padding) * 2); }
159
- .block-editor__container .root-block-appender::after {
160
- content: attr(data-tooltip);
161
- position: absolute;
162
- left: 50%;
163
- bottom: -30px;
164
- transform: translateX(-50%);
165
- z-index: 1;
166
- visibility: hidden;
167
- opacity: 0;
168
- transition: opacity 0.3s;
169
- width: max-content;
170
- max-width: 200px;
171
- white-space: nowrap;
172
- background: #000;
173
- border-radius: 2px;
174
- color: #f0f0f0;
175
- font-size: 12px;
176
- line-height: 1.4;
177
- padding: 4px 8px;
178
- text-align: center;
179
- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif; }
180
- .block-editor__container .root-block-appender:hover::after {
181
- visibility: visible;
182
- opacity: 1; }
183
- .block-editor__container .root-block-appender ~ .block-list-appender.wp-block {
184
- display: none; }
272
+ .block-editor-inserter__quick-inserter-results .block-editor-block-types-list > [role=presentation] {
273
+ justify-content: center; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@secretstache/wordpress-gutenberg",
3
- "version": "0.4.0",
3
+ "version": "0.4.2",
4
4
  "description": "",
5
5
  "author": "Secret Stache",
6
6
  "license": "GPL-2.0-or-later",
package/src/components/EmptyBlockAppender.js ADDED
@@ -0,0 +1,30 @@
1
+ import { InnerBlocks } from '@wordpress/block-editor';
2
+
3
+ export const EmptyBlockAppender = (props) => {
4
+ const {
5
+ showIcon = true,
6
+ title = 'This block is empty',
7
+ text = 'Use the "+" button below to add content blocks',
8
+ } = props;
9
+
10
+ return (
11
+ <div className="empty-block-appender">
12
+ <div className="empty-block-appender__content">
13
+ {
14
+ showIcon && (
15
+ <svg className="empty-block-appender__icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
16
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
17
+ </svg>
18
+ )
19
+ }
20
+
21
+ <h3 className="empty-block-appender__title">{title}</h3>
22
+ <p className="empty-block-appender__text">{text}</p>
23
+ </div>
24
+
25
+ <div className="empty-block-appender__button">
26
+ <InnerBlocks.ButtonBlockAppender />
27
+ </div>
28
+ </div>
29
+ );
30
+ };
package/src/components/LinkControl.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { BaseControl, CheckboxControl } from '@wordpress/components';
2
2
  import { URLInput } from '@wordpress/block-editor';
3
- import { useUpdateAttribute } from '../hooks';
3
+
4
+ import { deprecationWarning } from '../utils/internal/helpers.js';
4
5
 
5
6
  export const LinkControl = ({
6
7
  url = { value: '#', attrName: 'linkSource' },
@@ -8,7 +9,7 @@ export const LinkControl = ({
8
9
  setAttributes,
9
10
  label = 'Source',
10
11
  }) => {
11
- const updateAttribute = useUpdateAttribute(setAttributes);
12
+ deprecationWarning('Warning: LinkControl is deprecated since version 0.4.1 and will be removed in future versions. Please use native one instead.');
12
13
 
13
14
  return (
14
15
  <>
package/src/components/ResourcesWrapper.js CHANGED
@@ -1,16 +1,17 @@
1
1
  import { Notice, Placeholder, Spinner } from '@wordpress/components';
2
2
 
3
- const EmptyNotice = ({
4
- message = 'No resources were found matching your criteria. Please try to adjust the query.'
5
- }) => (
3
+ const DEFAULT_EMPTY_RESOURCES_MESSAGE = 'No resources were found matching your criteria. Please try to adjust the query.';
4
+ const DEFAULT_EMPTY_SELECTION_MESSAGE = 'No items are selected. Please use the corresponding relationship field to populate this block.';
5
+
6
+ export const EmptyNotice = ({ message }) => (
6
7
  <Notice status="info" isDismissible={false}>
7
8
  <p>{message}</p>
8
9
  </Notice>
9
10
  );
10
11
 
11
- const LoadingSpinner = () => <Spinner className="bc-spinner" />;
12
+ export const LoadingSpinner = () => <Spinner className="bc-spinner" />;
12
13
 
13
- const PlaceholderContent = ({
14
+ export const PlaceholderContent = ({
14
15
  icon = 'info-outline',
15
16
  instructions = 'Please configure the block in the sidebar.',
16
17
  ...restProps
@@ -24,9 +25,11 @@ const PlaceholderContent = ({
24
25
 
25
26
  export const ResourcesWrapper = ({
26
27
  isLoading,
27
- isEmpty,
28
+ isEmptyResources,
29
+ isEmptySelection,
28
30
  isPlaceholder,
29
- emptyMessage,
31
+ emptyResourcesMessage,
32
+ emptySelectionMessage,
30
33
  placeholderProps = {},
31
34
  children,
32
35
  }) => {
@@ -34,8 +37,12 @@ export const ResourcesWrapper = ({
34
37
  return <LoadingSpinner />;
35
38
  }
36
39
 
37
- if (isEmpty) {
38
- return <EmptyNotice message={emptyMessage} />;
40
+ if (isEmptySelection) {
41
+ return <EmptyNotice message={emptySelectionMessage || DEFAULT_EMPTY_SELECTION_MESSAGE} />;
42
+ }
43
+
44
+ if (isEmptyResources) {
45
+ return <EmptyNotice message={emptyResourcesMessage || DEFAULT_EMPTY_RESOURCES_MESSAGE} />;
39
46
  }
40
47
 
41
48
  if (isPlaceholder) {
package/src/components/index.js CHANGED
@@ -12,3 +12,4 @@ export { DividersControl } from './DividersControl.js'
12
12
  export { MediaTypeControl } from './MediaTypeControl.js'
13
13
  export { InsertBlockToolbar } from './InsertBlockToolbar.js'
14
14
  export { PreviewControl } from './PreviewControl.js'
15
+ export { EmptyBlockAppender } from './EmptyBlockAppender.js'
package/src/hooks/index.js CHANGED
@@ -3,7 +3,6 @@ export { useSlider } from './useSlider.js';
3
3
  export { useParentBlock } from './useParentBlock.js';
4
4
  export { useColorChange } from './useColorChange';
5
5
  export { useThemeColors } from './useThemeColors';
6
- export { useUpdateAttribute } from './useUpdateAttribute';
7
6
  export { useDataQuery } from './useDataQuery';
8
7
  export { useAccordionItem } from './useAccordionItem.js';
9
8
  export { useTabs } from './useTabs.js';
package/src/hooks/useDataQuery.js CHANGED
@@ -5,24 +5,24 @@ export const useDataQuery = (config, dependencies = []) => {
5
5
  postType,
6
6
  curatedPostsIds,
7
7
 
8
- categoriesTaxonomy,
9
- curatedCategoriesIds,
8
+ taxonomySlug,
9
+ curatedTermsIds,
10
10
 
11
- numberOfPosts = 100,
11
+ numberOfPosts = -1,
12
12
  extraQueryArgs,
13
13
  } = config;
14
14
 
15
15
  return useSelect((select) => {
16
16
  const queryArgs = {
17
- per_page: numberOfPosts,
17
+ per_page: numberOfPosts === -1 ? 100 : numberOfPosts,
18
18
  order: 'desc',
19
19
  orderby: 'date',
20
20
  _embed: true,
21
21
  ...extraQueryArgs,
22
22
  };
23
23
 
24
- if (categoriesTaxonomy && curatedCategoriesIds?.length > 0) {
25
- queryArgs[categoriesTaxonomy] = curatedCategoriesIds.join(',');
24
+ if (taxonomySlug && curatedTermsIds?.length > 0) {
25
+ queryArgs[taxonomySlug] = curatedTermsIds.join(',');
26
26
  }
27
27
 
28
28
  if (curatedPostsIds?.length > 0) {
@@ -37,7 +37,7 @@ export const useDataQuery = (config, dependencies = []) => {
37
37
  const postsToShow = select('core').getEntityRecords('postType', preparedPostType, queryArgs);
38
38
  const isResolving = select('core/data').isResolving('core', 'getEntityRecords', ['postType', preparedPostType, queryArgs]);
39
39
 
40
- const isEmpty = postsToShow !== null && postsToShow?.length === 0;
40
+ const isEmpty = (postsToShow !== null && postsToShow?.length === 0) || numberOfPosts === 0;
41
41
 
42
42
  return {
43
43
  postsToShow,
package/src/hooks/useSlider.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { useEffect, useRef } from '@wordpress/element';
2
2
 
3
- export const useSlider = ({ isEnabled, setupSlider, dependencies = [] }) => {
3
+ export const useSlider = ({ isEnabled, setupSlider, cleanCallback }, dependencies = []) => {
4
4
  const sliderElRef = useRef(null);
5
5
  const sliderInstance = useRef(null);
6
6
 
@@ -13,6 +13,10 @@ export const useSlider = ({ isEnabled, setupSlider, dependencies = [] }) => {
13
13
  if (sliderInstance.current) {
14
14
  sliderInstance.current?.destroy();
15
15
  sliderInstance.current = null;
16
+
17
+ if (cleanCallback) {
18
+ cleanCallback();
19
+ }
16
20
  }
17
21
  };
18
22
  }, [ isEnabled, ...dependencies ]);
package/src/styles/_empty-block-appender.scss ADDED
@@ -0,0 +1,82 @@
1
+ .empty-block-appender {
2
+ --button-color: #192f5f;
3
+ --button-border: var(--button-color);
4
+ --button-hover-color: var(--wp-admin-theme-color);
5
+ --button-hover-border: var(--wp-admin-theme-color);
6
+ --tr: .3s;
7
+
8
+ display: flex;
9
+ flex-direction: column;
10
+ align-items: center;
11
+ justify-content: center;
12
+ padding: 32px;
13
+
14
+ &__content {
15
+ text-align: center;
16
+ }
17
+
18
+ &__icon {
19
+ width: 48px;
20
+ height:48px;
21
+ color: var(--button-color);
22
+ margin-bottom: 16px;
23
+ }
24
+
25
+ &__title {
26
+ font-size: 32px;
27
+ font-weight: 600;
28
+ line-height: 110%;
29
+ color: var(--button-color);
30
+ margin-bottom: 0.5rem;
31
+ }
32
+
33
+ &__text {
34
+ font-size: 1rem;
35
+ font-weight: 400;
36
+ color: var(--button-color);
37
+ margin-bottom: 1.5rem;
38
+ }
39
+
40
+ &__button {
41
+ .block-editor-button-block-appender {
42
+ display: inline-flex;
43
+ justify-content: center;
44
+ align-items: center;
45
+ transition:
46
+ color var(--tr),
47
+ border-color var(--tr);
48
+ cursor: pointer;
49
+ border: 2px solid var(--button-border) !important;
50
+ box-shadow: none;
51
+ border-radius: 10px;
52
+ background: transparent !important;
53
+ padding: 12px 24px;
54
+ min-height: 50px;
55
+ min-width: 200px;
56
+ color: var(--button-color);
57
+ font-weight: 600;
58
+ font-size: 22px;
59
+
60
+ &:hover,
61
+ &:focus {
62
+ color: var(--button-hover-color);
63
+ border-color: var(--button-hover-border) !important;
64
+ outline: none !important;
65
+ box-shadow: none !important;
66
+ }
67
+
68
+ &::before,
69
+ &::after {
70
+ display: none !important;
71
+ }
72
+
73
+ .block-editor-button-block-appender__content {
74
+ display: flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+ width: 24px;
78
+ height: 24px;
79
+ }
80
+ }
81
+ }
82
+ }