@wordpress/block-library 9.34.0 → 9.35.0

package/build-style/editor-rtl.css

@@ -1112,31 +1112,65 @@ div[data-type="core/freeform"].is-selected .block-library-classic__toolbar {
   top: 0;
   right: 0;
 }
-.block-library-html__edit .block-editor-plain-text {
-  display: block;
-  box-sizing: border-box;
-  max-height: 250px;
-  font-family: Menlo, Consolas, monaco, monospace !important;
-  color: #1e1e1e !important;
-  background: #fff !important;
-  padding: 12px !important;
-  border: 1px solid #1e1e1e !important;
-  box-shadow: none !important;
-  border-radius: 2px !important;
-  font-size: 16px !important;
+
+.block-library-html__modal .components-modal__content {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  min-height: 70vh;
 }
-@media (min-width: 600px) {
-  .block-library-html__edit .block-editor-plain-text {
-    font-size: 13px !important;
-  }
+.block-library-html__modal .components-modal__children-container {
+  height: 100%;
+  padding: 16px;
 }
-.block-library-html__edit .block-editor-plain-text:focus {
-  border-color: var(--wp-admin-theme-color) !important;
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color) !important;
-  outline: 2px solid transparent !important;
+
+.block-library-html__modal-tabs {
+  height: 100%;
+}
+
+.block-library-html__modal-tab {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  box-sizing: border-box;
+  border: 1px solid #e0e0e0;
+  border-radius: 2px;
+  padding: 16px;
+  font-family: Menlo, Consolas, monaco, monospace;
 }
-.block-library-html__edit .block-editor-plain-text {
+
+.block-library-html__modal-editor {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  resize: none;
   direction: ltr;
+  overflow-x: auto;
+  box-sizing: border-box;
+}
+.block-library-html__modal-editor:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.block-library-html__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px;
+}
+
+.block-library-html__modal-actions {
+  margin-top: 16px;
+  padding: 0 32px 32px;
 }
 
 .wp-block-image.wp-block-image .block-editor-media-placeholder.is-small {
@@ -1986,6 +2020,13 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   text-transform: uppercase;
 }
 
+/**
+ * Error text styling for missing entity help text.
+ */
+.navigation-link-control__error-text {
+  color: #cc1818;
+}
+
 .wp-block-navigation-submenu {
   display: block;
 }
@@ -2493,6 +2534,33 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   width: 112px;
 }
 
+.wp-block-tabs.wp-block .wp-block-tabs__tab-item__inserter {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.wp-block-tabs.wp-block .wp-block-tab.wp-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wp--style--unstable-tabs-gap);
+}
+.wp-block-tabs.wp-block .wp-block-tab.wp-block > section {
+  flex-grow: 1;
+}
+.wp-block-tabs.wp-block .wp-block-tab.wp-block > section > .wp-block:first-child {
+  margin-top: 0;
+}
+.wp-block-tabs.wp-block .wp-block-tab.wp-block > section > .wp-block:last-child {
+  margin-bottom: 0;
+}
+.wp-block-tabs.wp-block.is-vertical > .wp-block-tab.wp-block {
+  flex-direction: row;
+}
+.wp-block-tabs.wp-block.is-vertical .wp-block-tabs__tab-item__inserter {
+  align-items: flex-start;
+  margin-left: -1px;
+}
+
 .wp-block-tag-cloud .wp-block-tag-cloud {
   margin: 0;
   padding: 0;

package/build-style/editor.css

@@ -1118,32 +1118,66 @@ div[data-type="core/freeform"].is-selected .block-library-classic__toolbar {
   top: 0;
   left: 0;
 }
-.block-library-html__edit .block-editor-plain-text {
-  display: block;
-  box-sizing: border-box;
-  max-height: 250px;
-  font-family: Menlo, Consolas, monaco, monospace !important;
-  color: #1e1e1e !important;
-  background: #fff !important;
-  padding: 12px !important;
-  border: 1px solid #1e1e1e !important;
-  box-shadow: none !important;
-  border-radius: 2px !important;
-  font-size: 16px !important;
+
+.block-library-html__modal .components-modal__content {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  min-height: 70vh;
 }
-@media (min-width: 600px) {
-  .block-library-html__edit .block-editor-plain-text {
-    font-size: 13px !important;
-  }
+.block-library-html__modal .components-modal__children-container {
+  height: 100%;
+  padding: 16px;
 }
-.block-library-html__edit .block-editor-plain-text:focus {
-  border-color: var(--wp-admin-theme-color) !important;
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color) !important;
-  outline: 2px solid transparent !important;
+
+.block-library-html__modal-tabs {
+  height: 100%;
+}
+
+.block-library-html__modal-tab {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  box-sizing: border-box;
+  border: 1px solid #e0e0e0;
+  border-radius: 2px;
+  padding: 16px;
+  font-family: Menlo, Consolas, monaco, monospace;
 }
-.block-library-html__edit .block-editor-plain-text {
+
+.block-library-html__modal-editor {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  resize: none;
   /*rtl:ignore*/
   direction: ltr;
+  overflow-x: auto;
+  box-sizing: border-box;
+}
+.block-library-html__modal-editor:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.block-library-html__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px;
+}
+
+.block-library-html__modal-actions {
+  margin-top: 16px;
+  padding: 0 32px 32px;
 }
 
 .wp-block-image.wp-block-image .block-editor-media-placeholder.is-small {
@@ -1994,6 +2028,13 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   text-transform: uppercase;
 }
 
+/**
+ * Error text styling for missing entity help text.
+ */
+.navigation-link-control__error-text {
+  color: #cc1818;
+}
+
 .wp-block-navigation-submenu {
   display: block;
 }
@@ -2501,6 +2542,33 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   width: 112px;
 }
 
+.wp-block-tabs.wp-block .wp-block-tabs__tab-item__inserter {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.wp-block-tabs.wp-block .wp-block-tab.wp-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wp--style--unstable-tabs-gap);
+}
+.wp-block-tabs.wp-block .wp-block-tab.wp-block > section {
+  flex-grow: 1;
+}
+.wp-block-tabs.wp-block .wp-block-tab.wp-block > section > .wp-block:first-child {
+  margin-top: 0;
+}
+.wp-block-tabs.wp-block .wp-block-tab.wp-block > section > .wp-block:last-child {
+  margin-bottom: 0;
+}
+.wp-block-tabs.wp-block.is-vertical > .wp-block-tab.wp-block {
+  flex-direction: row;
+}
+.wp-block-tabs.wp-block.is-vertical .wp-block-tabs__tab-item__inserter {
+  align-items: flex-start;
+  margin-right: -1px;
+}
+
 .wp-block-tag-cloud .wp-block-tag-cloud {
   margin: 0;
   padding: 0;

package/build-style/embed/style-rtl.css

@@ -102,6 +102,11 @@
   min-height: 240px;
 }
 
+.wp-block-group.is-layout-flex .wp-block-embed {
+  flex: 1 1 0%;
+  min-width: 0;
+}
+
 .wp-block-embed {
   overflow-wrap: break-word;
 }

package/build-style/embed/style.css

@@ -102,6 +102,11 @@
   min-height: 240px;
 }
 
+.wp-block-group.is-layout-flex .wp-block-embed {
+  flex: 1 1 0%;
+  min-width: 0;
+}
+
 .wp-block-embed {
   overflow-wrap: break-word;
 }

package/build-style/heading/style-rtl.css

@@ -43,12 +43,12 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
-h1.has-background,
-h2.has-background,
-h3.has-background,
-h4.has-background,
-h5.has-background,
-h6.has-background {
+h1:where(.wp-block-heading).has-background,
+h2:where(.wp-block-heading).has-background,
+h3:where(.wp-block-heading).has-background,
+h4:where(.wp-block-heading).has-background,
+h5:where(.wp-block-heading).has-background,
+h6:where(.wp-block-heading).has-background {
   padding: 1.25em 2.375em;
 }
 h1.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]), h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),

package/build-style/heading/style.css

@@ -43,12 +43,12 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
-h1.has-background,
-h2.has-background,
-h3.has-background,
-h4.has-background,
-h5.has-background,
-h6.has-background {
+h1:where(.wp-block-heading).has-background,
+h2:where(.wp-block-heading).has-background,
+h3:where(.wp-block-heading).has-background,
+h4:where(.wp-block-heading).has-background,
+h5:where(.wp-block-heading).has-background,
+h6:where(.wp-block-heading).has-background {
   padding: 1.25em 2.375em;
 }
 h1.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]), h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),

package/build-style/html/editor-rtl.css

@@ -90,29 +90,63 @@
   top: 0;
   right: 0;
 }
-.block-library-html__edit .block-editor-plain-text {
-  display: block;
-  box-sizing: border-box;
-  max-height: 250px;
-  font-family: Menlo, Consolas, monaco, monospace !important;
-  color: #1e1e1e !important;
-  background: #fff !important;
-  padding: 12px !important;
-  border: 1px solid #1e1e1e !important;
-  box-shadow: none !important;
-  border-radius: 2px !important;
-  font-size: 16px !important;
+
+.block-library-html__modal .components-modal__content {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  min-height: 70vh;
+}
+.block-library-html__modal .components-modal__children-container {
+  height: 100%;
+  padding: 16px;
 }
-@media (min-width: 600px) {
-  .block-library-html__edit .block-editor-plain-text {
-    font-size: 13px !important;
-  }
+
+.block-library-html__modal-tabs {
+  height: 100%;
 }
-.block-library-html__edit .block-editor-plain-text:focus {
-  border-color: var(--wp-admin-theme-color) !important;
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color) !important;
-  outline: 2px solid transparent !important;
+
+.block-library-html__modal-tab {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  box-sizing: border-box;
+  border: 1px solid #e0e0e0;
+  border-radius: 2px;
+  padding: 16px;
+  font-family: Menlo, Consolas, monaco, monospace;
 }
-.block-library-html__edit .block-editor-plain-text {
+
+.block-library-html__modal-editor {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  resize: none;
   direction: ltr;
+  overflow-x: auto;
+  box-sizing: border-box;
+}
+.block-library-html__modal-editor:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.block-library-html__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px;
+}
+
+.block-library-html__modal-actions {
+  margin-top: 16px;
+  padding: 0 32px 32px;
 }

package/build-style/html/editor.css

@@ -90,30 +90,64 @@
   top: 0;
   left: 0;
 }
-.block-library-html__edit .block-editor-plain-text {
-  display: block;
-  box-sizing: border-box;
-  max-height: 250px;
-  font-family: Menlo, Consolas, monaco, monospace !important;
-  color: #1e1e1e !important;
-  background: #fff !important;
-  padding: 12px !important;
-  border: 1px solid #1e1e1e !important;
-  box-shadow: none !important;
-  border-radius: 2px !important;
-  font-size: 16px !important;
+
+.block-library-html__modal .components-modal__content {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  min-height: 70vh;
+}
+.block-library-html__modal .components-modal__children-container {
+  height: 100%;
+  padding: 16px;
 }
-@media (min-width: 600px) {
-  .block-library-html__edit .block-editor-plain-text {
-    font-size: 13px !important;
-  }
+
+.block-library-html__modal-tabs {
+  height: 100%;
 }
-.block-library-html__edit .block-editor-plain-text:focus {
-  border-color: var(--wp-admin-theme-color) !important;
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color) !important;
-  outline: 2px solid transparent !important;
+
+.block-library-html__modal-tab {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  box-sizing: border-box;
+  border: 1px solid #e0e0e0;
+  border-radius: 2px;
+  padding: 16px;
+  font-family: Menlo, Consolas, monaco, monospace;
 }
-.block-library-html__edit .block-editor-plain-text {
+
+.block-library-html__modal-editor {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  resize: none;
   /*rtl:ignore*/
   direction: ltr;
+  overflow-x: auto;
+  box-sizing: border-box;
+}
+.block-library-html__modal-editor:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.block-library-html__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px;
+}
+
+.block-library-html__modal-actions {
+  margin-top: 16px;
+  padding: 0 32px 32px;
 }

package/build-style/navigation-link/editor-rtl.css

@@ -151,4 +151,11 @@
 .link-ui-page-creator__back {
   margin-right: 8px;
   text-transform: uppercase;
+}
+
+/**
+ * Error text styling for missing entity help text.
+ */
+.navigation-link-control__error-text {
+  color: #cc1818;
 }

package/build-style/navigation-link/editor.css

@@ -151,4 +151,11 @@
 .link-ui-page-creator__back {
   margin-left: 8px;
   text-transform: uppercase;
+}
+
+/**
+ * Error text styling for missing entity help text.
+ */
+.navigation-link-control__error-text {
+  color: #cc1818;
 }