@wordpress/block-library 6.0.7 → 6.0.8

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 (70) hide show
  1. package/build/cover/transforms.js +2 -0
  2. package/build/cover/transforms.js.map +1 -1
  3. package/build/navigation/edit/index.js +14 -2
  4. package/build/navigation/edit/index.js.map +1 -1
  5. package/build/navigation/edit/inner-blocks.js +1 -1
  6. package/build/navigation/edit/inner-blocks.js.map +1 -1
  7. package/build/navigation/edit/responsive-wrapper.js +5 -2
  8. package/build/navigation/edit/responsive-wrapper.js.map +1 -1
  9. package/build/page-list/edit.js +40 -42
  10. package/build/page-list/edit.js.map +1 -1
  11. package/build/post-featured-image/edit.js +54 -23
  12. package/build/post-featured-image/edit.js.map +1 -1
  13. package/build-module/cover/transforms.js +2 -0
  14. package/build-module/cover/transforms.js.map +1 -1
  15. package/build-module/navigation/edit/index.js +14 -2
  16. package/build-module/navigation/edit/index.js.map +1 -1
  17. package/build-module/navigation/edit/inner-blocks.js +1 -1
  18. package/build-module/navigation/edit/inner-blocks.js.map +1 -1
  19. package/build-module/navigation/edit/responsive-wrapper.js +5 -2
  20. package/build-module/navigation/edit/responsive-wrapper.js.map +1 -1
  21. package/build-module/page-list/edit.js +41 -43
  22. package/build-module/page-list/edit.js.map +1 -1
  23. package/build-module/post-featured-image/edit.js +56 -26
  24. package/build-module/post-featured-image/edit.js.map +1 -1
  25. package/build-style/code/theme-rtl.css +1 -1
  26. package/build-style/code/theme.css +1 -1
  27. package/build-style/cover/style-rtl.css +8 -2
  28. package/build-style/cover/style.css +8 -2
  29. package/build-style/editor-rtl.css +101 -51
  30. package/build-style/editor.css +101 -51
  31. package/build-style/navigation/style-rtl.css +33 -1
  32. package/build-style/navigation/style.css +33 -1
  33. package/build-style/post-comments-form/style-rtl.css +18 -0
  34. package/build-style/post-comments-form/style.css +18 -0
  35. package/build-style/post-featured-image/editor-rtl.css +100 -16
  36. package/build-style/post-featured-image/editor.css +100 -16
  37. package/build-style/social-links/editor-rtl.css +1 -35
  38. package/build-style/social-links/editor.css +1 -35
  39. package/build-style/style-rtl.css +59 -25
  40. package/build-style/style.css +59 -25
  41. package/build-style/theme-rtl.css +1 -1
  42. package/build-style/theme.css +1 -1
  43. package/package.json +7 -7
  44. package/src/calendar/index.php +1 -1
  45. package/src/code/theme.scss +1 -1
  46. package/src/cover/style.scss +9 -2
  47. package/src/cover/transforms.js +2 -0
  48. package/src/gallery/index.php +1 -1
  49. package/src/home-link/index.php +1 -1
  50. package/src/image/index.php +1 -1
  51. package/src/navigation/edit/index.js +25 -0
  52. package/src/navigation/edit/inner-blocks.js +2 -1
  53. package/src/navigation/edit/responsive-wrapper.js +8 -1
  54. package/src/navigation/index.php +45 -5
  55. package/src/navigation/style.scss +46 -2
  56. package/src/navigation-area/index.php +1 -1
  57. package/src/navigation-link/index.php +1 -1
  58. package/src/navigation-submenu/index.php +2 -8
  59. package/src/page-list/edit.js +35 -44
  60. package/src/page-list/index.php +1 -1
  61. package/src/post-comments-form/style.scss +20 -1
  62. package/src/post-featured-image/edit.js +61 -26
  63. package/src/post-featured-image/editor.scss +124 -20
  64. package/src/site-logo/editor.scss +1 -0
  65. package/src/social-links/editor.scss +1 -47
  66. package/src/style.scss +0 -1
  67. package/src/table-of-contents/index.php +1 -1
  68. package/build-style/navigation-submenu/style-rtl.css +0 -97
  69. package/build-style/navigation-submenu/style.css +0 -97
  70. package/src/navigation-submenu/style.scss +0 -25
@@ -2090,16 +2090,13 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
2090
2090
  .wp-block-social-links__social-placeholder > .wp-block-social-links__social-placeholder-icons {
2091
2091
  display: flex;
2092
2092
  }
2093
- .wp-block-social-links__social-placeholder + .block-list-appender,
2094
2093
  .wp-block-social-links__social-placeholder .wp-social-link {
2095
2094
  padding: 0.25em;
2096
2095
  }
2097
- .is-style-pill-shape .wp-block-social-links__social-placeholder + .block-list-appender,
2098
2096
  .is-style-pill-shape .wp-block-social-links__social-placeholder .wp-social-link {
2099
2097
  padding-left: calc((2/3) * 1em);
2100
2098
  padding-right: calc((2/3) * 1em);
2101
2099
  }
2102
- .is-style-logos-only .wp-block-social-links__social-placeholder + .block-list-appender,
2103
2100
  .is-style-logos-only .wp-block-social-links__social-placeholder .wp-social-link {
2104
2101
  padding: 0;
2105
2102
  }
@@ -2115,6 +2112,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
2115
2112
  }
2116
2113
 
2117
2114
  .wp-block-social-links .wp-block-social-links__social-prompt {
2115
+ min-height: 24px;
2118
2116
  list-style: none;
2119
2117
  order: 2;
2120
2118
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -2125,38 +2123,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
2125
2123
  cursor: default;
2126
2124
  padding-right: 8px;
2127
2125
  }
2128
- .wp-block-social-links .wp-block-social-links__social-prompt + .block-list-appender {
2129
- margin-right: 8px;
2130
- padding: 0.25em;
2131
- }
2132
-
2133
- .wp-block-social-links .block-list-appender {
2134
- margin: 4px auto 4px 0;
2135
- border-radius: 9999px;
2136
- }
2137
- .wp-block-social-links .block-list-appender .block-editor-inserter {
2138
- display: flex;
2139
- align-items: center;
2140
- justify-content: center;
2141
- font-size: inherit;
2142
- width: 1em;
2143
- height: 1em;
2144
- }
2145
- .has-small-icon-size .wp-block-social-links .block-list-appender {
2146
- font-size: 16px;
2147
- }
2148
- .has-normal-icon-size .wp-block-social-links .block-list-appender {
2149
- font-size: 24px;
2150
- }
2151
- .has-large-icon-size .wp-block-social-links .block-list-appender {
2152
- font-size: 36px;
2153
- }
2154
- .has-huge-icon-size .wp-block-social-links .block-list-appender {
2155
- font-size: 48px;
2156
- }
2157
- .wp-block-social-links .block-list-appender::before {
2158
- content: none;
2159
- }
2160
2126
 
2161
2127
  .wp-block[data-align=center] > .wp-block-social-links {
2162
2128
  justify-content: center;
@@ -2504,28 +2470,112 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
2504
2470
  margin-right: 0;
2505
2471
  }
2506
2472
 
2507
- div[data-type="core/post-featured-image"] img {
2508
- max-width: 100%;
2509
- height: auto;
2473
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder,
2474
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-resizable-box__container {
2475
+ border-radius: inherit;
2476
+ }
2477
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
2478
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder {
2479
+ justify-content: center;
2480
+ align-items: center;
2481
+ box-shadow: none;
2482
+ padding: 0;
2483
+ color: currentColor;
2484
+ background: transparent;
2485
+ min-height: 200px;
2486
+ }
2487
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-form-file-upload,
2488
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-form-file-upload {
2489
+ display: none;
2490
+ }
2491
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-placeholder__preview,
2492
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-placeholder__preview {
2493
+ position: absolute;
2494
+ top: 4px;
2495
+ right: 4px;
2496
+ bottom: 4px;
2497
+ left: 4px;
2498
+ background: rgba(255, 255, 255, 0.8);
2499
+ display: flex;
2500
+ align-items: center;
2501
+ justify-content: center;
2502
+ }
2503
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder::before,
2504
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder::before {
2505
+ content: "";
2510
2506
  display: block;
2507
+ position: absolute;
2508
+ top: 0;
2509
+ right: 0;
2510
+ bottom: 0;
2511
+ left: 0;
2512
+ border: 1px dashed currentColor;
2513
+ opacity: 0.3;
2514
+ pointer-events: none;
2515
+ border-radius: inherit;
2511
2516
  }
2512
-
2513
- .editor-styles-wrapper .post-featured-image_placeholder {
2517
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-placeholder__fieldset,
2518
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-placeholder__fieldset {
2519
+ width: auto;
2520
+ }
2521
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button.components-button,
2522
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-button.components-button {
2523
+ color: inherit;
2524
+ padding: 0;
2514
2525
  display: flex;
2515
- flex-direction: row;
2526
+ justify-content: center;
2516
2527
  align-items: center;
2517
- border-radius: 2px;
2518
- background-color: #fff;
2519
- box-shadow: inset 0 0 0 1px #1e1e1e;
2520
- padding: 12px;
2528
+ width: 48px;
2529
+ height: 48px;
2530
+ border-radius: 50%;
2531
+ position: relative;
2532
+ visibility: hidden;
2533
+ background: transparent;
2534
+ transition: all 0.1s linear;
2521
2535
  }
2522
- .editor-styles-wrapper .post-featured-image_placeholder svg {
2523
- margin-right: 12px;
2536
+ @media (prefers-reduced-motion: reduce) {
2537
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button.components-button,
2538
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-button.components-button {
2539
+ transition-duration: 0s;
2540
+ transition-delay: 0s;
2541
+ }
2524
2542
  }
2525
- .editor-styles-wrapper .post-featured-image_placeholder p {
2526
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2527
- font-size: 13px;
2528
- margin: 0;
2543
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button.components-button > svg,
2544
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-button.components-button > svg {
2545
+ color: #fff;
2546
+ }
2547
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-placeholder__illustration,
2548
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-placeholder__illustration {
2549
+ position: absolute;
2550
+ top: 0;
2551
+ right: 0;
2552
+ bottom: 0;
2553
+ left: 0;
2554
+ width: 100%;
2555
+ height: 100%;
2556
+ stroke: currentColor;
2557
+ stroke-dasharray: 3;
2558
+ opacity: 0.3;
2559
+ }
2560
+ .wp-block-post-featured-image.wp-block-post-featured-image[style*=height] .components-placeholder {
2561
+ min-height: 48px;
2562
+ min-width: 48px;
2563
+ height: 100%;
2564
+ width: 100%;
2565
+ }
2566
+ .wp-block-post-featured-image.wp-block-post-featured-image.is-selected .components-button.components-button {
2567
+ background: var(--wp-admin-theme-color);
2568
+ border-color: var(--wp-admin-theme-color);
2569
+ border-style: solid;
2570
+ color: #fff;
2571
+ opacity: 1;
2572
+ visibility: visible;
2573
+ }
2574
+
2575
+ div[data-type="core/post-featured-image"] img {
2576
+ max-width: 100%;
2577
+ height: auto;
2578
+ display: block;
2529
2579
  }
2530
2580
 
2531
2581
  .block-library-post-featured-image-dimension-controls {
@@ -214,6 +214,28 @@
214
214
  }
215
215
  }
216
216
 
217
+ .wp-block-navigation-submenu {
218
+ position: relative;
219
+ display: flex;
220
+ }
221
+ .wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg {
222
+ stroke: currentColor;
223
+ }
224
+
225
+ button.wp-block-navigation-item__content {
226
+ background-color: transparent;
227
+ border: none;
228
+ color: currentColor;
229
+ font-size: inherit;
230
+ font-family: inherit;
231
+ line-height: inherit;
232
+ text-align: right;
233
+ }
234
+
235
+ .wp-block-navigation-submenu__toggle {
236
+ cursor: pointer;
237
+ }
238
+
217
239
  /**
218
240
  * Margins
219
241
  */
@@ -288,6 +310,11 @@
288
310
  display: none;
289
311
  }
290
312
 
313
+ .wp-block-navigation__container:only-child,
314
+ .wp-block-page-list:only-child {
315
+ flex-grow: 1;
316
+ }
317
+
291
318
  /**
292
319
  * Mobile menu.
293
320
  */
@@ -306,6 +333,10 @@
306
333
  justify-content: var(--layout-justify, initial);
307
334
  align-items: var(--layout-align, initial);
308
335
  }
336
+ .wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) {
337
+ color: inherit !important;
338
+ background-color: inherit !important;
339
+ }
309
340
  .wp-block-navigation__responsive-container.is-menu-open {
310
341
  display: flex;
311
342
  flex-direction: column;
@@ -359,7 +390,8 @@
359
390
  align-items: var(--layout-justification-setting, initial);
360
391
  }
361
392
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container,
362
- .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
393
+ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
394
+ .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
363
395
  color: inherit !important;
364
396
  background: transparent !important;
365
397
  }
@@ -214,6 +214,28 @@
214
214
  }
215
215
  }
216
216
 
217
+ .wp-block-navigation-submenu {
218
+ position: relative;
219
+ display: flex;
220
+ }
221
+ .wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg {
222
+ stroke: currentColor;
223
+ }
224
+
225
+ button.wp-block-navigation-item__content {
226
+ background-color: transparent;
227
+ border: none;
228
+ color: currentColor;
229
+ font-size: inherit;
230
+ font-family: inherit;
231
+ line-height: inherit;
232
+ text-align: left;
233
+ }
234
+
235
+ .wp-block-navigation-submenu__toggle {
236
+ cursor: pointer;
237
+ }
238
+
217
239
  /**
218
240
  * Margins
219
241
  */
@@ -288,6 +310,11 @@
288
310
  display: none;
289
311
  }
290
312
 
313
+ .wp-block-navigation__container:only-child,
314
+ .wp-block-page-list:only-child {
315
+ flex-grow: 1;
316
+ }
317
+
291
318
  /**
292
319
  * Mobile menu.
293
320
  */
@@ -306,6 +333,10 @@
306
333
  justify-content: var(--layout-justify, initial);
307
334
  align-items: var(--layout-align, initial);
308
335
  }
336
+ .wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) {
337
+ color: inherit !important;
338
+ background-color: inherit !important;
339
+ }
309
340
  .wp-block-navigation__responsive-container.is-menu-open {
310
341
  display: flex;
311
342
  flex-direction: column;
@@ -359,7 +390,8 @@
359
390
  align-items: var(--layout-justification-setting, initial);
360
391
  }
361
392
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container,
362
- .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
393
+ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
394
+ .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
363
395
  color: inherit !important;
364
396
  background: transparent !important;
365
397
  }
@@ -74,6 +74,24 @@
74
74
  /**
75
75
  * Reset the WP Admin page styles for Gutenberg-like pages.
76
76
  */
77
+ .wp-block-post-comments-form[style*=font-weight] :where(.comment-reply-title) {
78
+ font-weight: inherit;
79
+ }
80
+ .wp-block-post-comments-form[style*=font-family] :where(.comment-reply-title) {
81
+ font-family: inherit;
82
+ }
83
+ .wp-block-post-comments-form[class*=-font-size] :where(.comment-reply-title), .wp-block-post-comments-form[style*=font-size] :where(.comment-reply-title) {
84
+ font-size: inherit;
85
+ }
86
+ .wp-block-post-comments-form[style*=line-height] :where(.comment-reply-title) {
87
+ line-height: inherit;
88
+ }
89
+ .wp-block-post-comments-form[style*=font-style] :where(.comment-reply-title) {
90
+ font-style: inherit;
91
+ }
92
+ .wp-block-post-comments-form[style*=letter-spacing] :where(.comment-reply-title) {
93
+ letter-spacing: inherit;
94
+ }
77
95
  .wp-block-post-comments-form input[type=submit] {
78
96
  border: none;
79
97
  box-shadow: none;
@@ -74,6 +74,24 @@
74
74
  /**
75
75
  * Reset the WP Admin page styles for Gutenberg-like pages.
76
76
  */
77
+ .wp-block-post-comments-form[style*=font-weight] :where(.comment-reply-title) {
78
+ font-weight: inherit;
79
+ }
80
+ .wp-block-post-comments-form[style*=font-family] :where(.comment-reply-title) {
81
+ font-family: inherit;
82
+ }
83
+ .wp-block-post-comments-form[class*=-font-size] :where(.comment-reply-title), .wp-block-post-comments-form[style*=font-size] :where(.comment-reply-title) {
84
+ font-size: inherit;
85
+ }
86
+ .wp-block-post-comments-form[style*=line-height] :where(.comment-reply-title) {
87
+ line-height: inherit;
88
+ }
89
+ .wp-block-post-comments-form[style*=font-style] :where(.comment-reply-title) {
90
+ font-style: inherit;
91
+ }
92
+ .wp-block-post-comments-form[style*=letter-spacing] :where(.comment-reply-title) {
93
+ letter-spacing: inherit;
94
+ }
77
95
  .wp-block-post-comments-form input[type=submit] {
78
96
  border: none;
79
97
  box-shadow: none;
@@ -74,28 +74,112 @@
74
74
  /**
75
75
  * Reset the WP Admin page styles for Gutenberg-like pages.
76
76
  */
77
- div[data-type="core/post-featured-image"] img {
78
- max-width: 100%;
79
- height: auto;
77
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder,
78
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-resizable-box__container {
79
+ border-radius: inherit;
80
+ }
81
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
82
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder {
83
+ justify-content: center;
84
+ align-items: center;
85
+ box-shadow: none;
86
+ padding: 0;
87
+ color: currentColor;
88
+ background: transparent;
89
+ min-height: 200px;
90
+ }
91
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-form-file-upload,
92
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-form-file-upload {
93
+ display: none;
94
+ }
95
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-placeholder__preview,
96
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-placeholder__preview {
97
+ position: absolute;
98
+ top: 4px;
99
+ left: 4px;
100
+ bottom: 4px;
101
+ right: 4px;
102
+ background: rgba(255, 255, 255, 0.8);
103
+ display: flex;
104
+ align-items: center;
105
+ justify-content: center;
106
+ }
107
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder::before,
108
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder::before {
109
+ content: "";
80
110
  display: block;
111
+ position: absolute;
112
+ top: 0;
113
+ left: 0;
114
+ bottom: 0;
115
+ right: 0;
116
+ border: 1px dashed currentColor;
117
+ opacity: 0.3;
118
+ pointer-events: none;
119
+ border-radius: inherit;
81
120
  }
82
-
83
- .editor-styles-wrapper .post-featured-image_placeholder {
121
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-placeholder__fieldset,
122
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-placeholder__fieldset {
123
+ width: auto;
124
+ }
125
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button.components-button,
126
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-button.components-button {
127
+ color: inherit;
128
+ padding: 0;
84
129
  display: flex;
85
- flex-direction: row;
130
+ justify-content: center;
86
131
  align-items: center;
87
- border-radius: 2px;
88
- background-color: #fff;
89
- box-shadow: inset 0 0 0 1px #1e1e1e;
90
- padding: 12px;
132
+ width: 48px;
133
+ height: 48px;
134
+ border-radius: 50%;
135
+ position: relative;
136
+ visibility: hidden;
137
+ background: transparent;
138
+ transition: all 0.1s linear;
139
+ }
140
+ @media (prefers-reduced-motion: reduce) {
141
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button.components-button,
142
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-button.components-button {
143
+ transition-duration: 0s;
144
+ transition-delay: 0s;
145
+ }
146
+ }
147
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button.components-button > svg,
148
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-button.components-button > svg {
149
+ color: #fff;
150
+ }
151
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-placeholder__illustration,
152
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-placeholder__illustration {
153
+ position: absolute;
154
+ top: 0;
155
+ left: 0;
156
+ bottom: 0;
157
+ right: 0;
158
+ width: 100%;
159
+ height: 100%;
160
+ stroke: currentColor;
161
+ stroke-dasharray: 3;
162
+ opacity: 0.3;
163
+ }
164
+ .wp-block-post-featured-image.wp-block-post-featured-image[style*=height] .components-placeholder {
165
+ min-height: 48px;
166
+ min-width: 48px;
167
+ height: 100%;
168
+ width: 100%;
91
169
  }
92
- .editor-styles-wrapper .post-featured-image_placeholder svg {
93
- margin-left: 12px;
170
+ .wp-block-post-featured-image.wp-block-post-featured-image.is-selected .components-button.components-button {
171
+ background: var(--wp-admin-theme-color);
172
+ border-color: var(--wp-admin-theme-color);
173
+ border-style: solid;
174
+ color: #fff;
175
+ opacity: 1;
176
+ visibility: visible;
94
177
  }
95
- .editor-styles-wrapper .post-featured-image_placeholder p {
96
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
97
- font-size: 13px;
98
- margin: 0;
178
+
179
+ div[data-type="core/post-featured-image"] img {
180
+ max-width: 100%;
181
+ height: auto;
182
+ display: block;
99
183
  }
100
184
 
101
185
  .block-library-post-featured-image-dimension-controls {
@@ -74,28 +74,112 @@
74
74
  /**
75
75
  * Reset the WP Admin page styles for Gutenberg-like pages.
76
76
  */
77
- div[data-type="core/post-featured-image"] img {
78
- max-width: 100%;
79
- height: auto;
77
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder,
78
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-resizable-box__container {
79
+ border-radius: inherit;
80
+ }
81
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
82
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder {
83
+ justify-content: center;
84
+ align-items: center;
85
+ box-shadow: none;
86
+ padding: 0;
87
+ color: currentColor;
88
+ background: transparent;
89
+ min-height: 200px;
90
+ }
91
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-form-file-upload,
92
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-form-file-upload {
93
+ display: none;
94
+ }
95
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-placeholder__preview,
96
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-placeholder__preview {
97
+ position: absolute;
98
+ top: 4px;
99
+ right: 4px;
100
+ bottom: 4px;
101
+ left: 4px;
102
+ background: rgba(255, 255, 255, 0.8);
103
+ display: flex;
104
+ align-items: center;
105
+ justify-content: center;
106
+ }
107
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder::before,
108
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder::before {
109
+ content: "";
80
110
  display: block;
111
+ position: absolute;
112
+ top: 0;
113
+ right: 0;
114
+ bottom: 0;
115
+ left: 0;
116
+ border: 1px dashed currentColor;
117
+ opacity: 0.3;
118
+ pointer-events: none;
119
+ border-radius: inherit;
81
120
  }
82
-
83
- .editor-styles-wrapper .post-featured-image_placeholder {
121
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-placeholder__fieldset,
122
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-placeholder__fieldset {
123
+ width: auto;
124
+ }
125
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button.components-button,
126
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-button.components-button {
127
+ color: inherit;
128
+ padding: 0;
84
129
  display: flex;
85
- flex-direction: row;
130
+ justify-content: center;
86
131
  align-items: center;
87
- border-radius: 2px;
88
- background-color: #fff;
89
- box-shadow: inset 0 0 0 1px #1e1e1e;
90
- padding: 12px;
132
+ width: 48px;
133
+ height: 48px;
134
+ border-radius: 50%;
135
+ position: relative;
136
+ visibility: hidden;
137
+ background: transparent;
138
+ transition: all 0.1s linear;
139
+ }
140
+ @media (prefers-reduced-motion: reduce) {
141
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button.components-button,
142
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-button.components-button {
143
+ transition-duration: 0s;
144
+ transition-delay: 0s;
145
+ }
146
+ }
147
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button.components-button > svg,
148
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-button.components-button > svg {
149
+ color: #fff;
150
+ }
151
+ .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-placeholder__illustration,
152
+ .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-placeholder__illustration {
153
+ position: absolute;
154
+ top: 0;
155
+ right: 0;
156
+ bottom: 0;
157
+ left: 0;
158
+ width: 100%;
159
+ height: 100%;
160
+ stroke: currentColor;
161
+ stroke-dasharray: 3;
162
+ opacity: 0.3;
163
+ }
164
+ .wp-block-post-featured-image.wp-block-post-featured-image[style*=height] .components-placeholder {
165
+ min-height: 48px;
166
+ min-width: 48px;
167
+ height: 100%;
168
+ width: 100%;
91
169
  }
92
- .editor-styles-wrapper .post-featured-image_placeholder svg {
93
- margin-right: 12px;
170
+ .wp-block-post-featured-image.wp-block-post-featured-image.is-selected .components-button.components-button {
171
+ background: var(--wp-admin-theme-color);
172
+ border-color: var(--wp-admin-theme-color);
173
+ border-style: solid;
174
+ color: #fff;
175
+ opacity: 1;
176
+ visibility: visible;
94
177
  }
95
- .editor-styles-wrapper .post-featured-image_placeholder p {
96
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
97
- font-size: 13px;
98
- margin: 0;
178
+
179
+ div[data-type="core/post-featured-image"] img {
180
+ max-width: 100%;
181
+ height: auto;
182
+ display: block;
99
183
  }
100
184
 
101
185
  .block-library-post-featured-image-dimension-controls {
@@ -103,16 +103,13 @@
103
103
  .wp-block-social-links__social-placeholder > .wp-block-social-links__social-placeholder-icons {
104
104
  display: flex;
105
105
  }
106
- .wp-block-social-links__social-placeholder + .block-list-appender,
107
106
  .wp-block-social-links__social-placeholder .wp-social-link {
108
107
  padding: 0.25em;
109
108
  }
110
- .is-style-pill-shape .wp-block-social-links__social-placeholder + .block-list-appender,
111
109
  .is-style-pill-shape .wp-block-social-links__social-placeholder .wp-social-link {
112
110
  padding-right: calc((2/3) * 1em);
113
111
  padding-left: calc((2/3) * 1em);
114
112
  }
115
- .is-style-logos-only .wp-block-social-links__social-placeholder + .block-list-appender,
116
113
  .is-style-logos-only .wp-block-social-links__social-placeholder .wp-social-link {
117
114
  padding: 0;
118
115
  }
@@ -128,6 +125,7 @@
128
125
  }
129
126
 
130
127
  .wp-block-social-links .wp-block-social-links__social-prompt {
128
+ min-height: 24px;
131
129
  list-style: none;
132
130
  order: 2;
133
131
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -138,38 +136,6 @@
138
136
  cursor: default;
139
137
  padding-left: 8px;
140
138
  }
141
- .wp-block-social-links .wp-block-social-links__social-prompt + .block-list-appender {
142
- margin-left: 8px;
143
- padding: 0.25em;
144
- }
145
-
146
- .wp-block-social-links .block-list-appender {
147
- margin: 4px 0 4px auto;
148
- border-radius: 9999px;
149
- }
150
- .wp-block-social-links .block-list-appender .block-editor-inserter {
151
- display: flex;
152
- align-items: center;
153
- justify-content: center;
154
- font-size: inherit;
155
- width: 1em;
156
- height: 1em;
157
- }
158
- .has-small-icon-size .wp-block-social-links .block-list-appender {
159
- font-size: 16px;
160
- }
161
- .has-normal-icon-size .wp-block-social-links .block-list-appender {
162
- font-size: 24px;
163
- }
164
- .has-large-icon-size .wp-block-social-links .block-list-appender {
165
- font-size: 36px;
166
- }
167
- .has-huge-icon-size .wp-block-social-links .block-list-appender {
168
- font-size: 48px;
169
- }
170
- .wp-block-social-links .block-list-appender::before {
171
- content: none;
172
- }
173
139
 
174
140
  .wp-block[data-align=center] > .wp-block-social-links {
175
141
  justify-content: center;