@wordpress/block-editor 8.0.17 → 8.1.2-next.f435e9e01b.0

package/build-style/style.css

@@ -1206,62 +1206,65 @@
   padding: 0;
 }
 
-.block-editor-block-styles {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+.block-editor-block-styles + .default-style-picker__default-switcher {
+  margin-top: 16px;
 }
 
-.block-editor-block-styles__item {
-  width: calc(50% - 4px);
-  margin: 4px 0;
-  flex-shrink: 0;
-  cursor: pointer;
-  overflow: hidden;
-  border-radius: 2px;
-  padding: 6px;
-  display: flex;
-  flex-direction: column;
-}
-.block-editor-block-styles__item:focus {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
+.block-editor-block-styles__preview-panel {
+  display: none;
+  position: absolute;
+  right: 16px;
+  left: auto;
+  z-index: 90;
 }
-.block-editor-block-styles__item:hover .block-editor-block-styles__item-preview {
-  border-color: var(--wp-admin-theme-color);
+@media (min-width: 782px) {
+  .block-editor-block-styles__preview-panel {
+    display: block;
+  }
 }
-.block-editor-block-styles__item.is-active .block-editor-block-styles__item-label {
-  font-weight: bold;
+.block-editor-block-styles__preview-panel .block-editor-inserter__preview-container {
+  left: auto;
+  right: auto;
+  top: auto;
+  position: static;
 }
-.block-editor-block-styles__item.is-active .block-editor-block-styles__item-preview {
+.block-editor-block-styles__preview-panel .block-editor-block-card__title.block-editor-block-card__title {
   margin: 0;
-  border: 2px solid #1e1e1e;
 }
-.block-editor-block-styles__item .block-editor-block-preview__container {
-  cursor: inherit;
+.block-editor-block-styles__preview-panel .block-editor-block-icon {
+  display: none;
 }
 
-.block-editor-block-styles__item-preview {
-  outline: 1px solid transparent;
-  padding: 0;
-  margin: 2px;
-  border-radius: 2px;
+.block-editor-block-styles__variants {
   display: flex;
-  overflow: hidden;
-  background: #fff;
-  align-items: center;
-  flex-grow: 1;
-  min-height: 80px;
-  max-height: 160px;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 8px;
 }
-
-.block-editor-block-switcher__styles__menugroup {
-  position: relative;
+.block-editor-block-styles__variants .block-editor-block-styles__item {
+  color: #2f2f2f;
+  box-shadow: inset 0 0 0 1px #ccc;
+  display: inline-block;
+  width: calc(50% - 4px);
+}
+.block-editor-block-styles__variants .block-editor-block-styles__item:focus, .block-editor-block-styles__variants .block-editor-block-styles__item:hover {
+  color: var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+}
+.block-editor-block-styles__variants .block-editor-block-styles__item.is-active, .block-editor-block-styles__variants .block-editor-block-styles__item.is-active:hover {
+  background-color: #2f2f2f;
+  box-shadow: none;
+}
+.block-editor-block-styles__variants .block-editor-block-styles__item.is-active .block-editor-block-styles__item-text, .block-editor-block-styles__variants .block-editor-block-styles__item.is-active:hover .block-editor-block-styles__item-text {
+  color: #fff;
+}
+.block-editor-block-styles__variants .block-editor-block-styles__item.is-active:focus {
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px var(--wp-admin-theme-color);
 }
 
-.block-editor-block-styles__item-label {
-  text-align: center;
-  padding: 4px 0;
+.block-editor-block-styles__block-preview-container,
+.block-editor-block-styles__block-preview-container * {
+  box-sizing: border-box !important;
 }
 
 .block-editor-block-switcher {
@@ -1668,7 +1671,7 @@
   margin-bottom: 12px;
 }
 .components-border-radius-control legend {
-  padding-bottom: 4px;
+  margin-bottom: 8px;
 }
 .components-border-radius-control .components-border-radius-control__wrapper {
   display: flex;
@@ -1718,7 +1721,6 @@
 }
 .components-border-style-control .components-border-style-control__buttons {
   display: inline-flex;
-  margin-bottom: 24px;
 }
 .components-border-style-control .components-border-style-control__buttons .components-button.has-icon {
   min-width: 30px;
@@ -1757,11 +1759,17 @@
   margin-bottom: 12px;
 }
 
-.block-editor-panel-color-gradient-settings .component-color-indicator {
-  vertical-align: text-bottom;
+.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title {
+  display: flex;
+  gap: 8px;
 }
-.block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
-  display: inline-block;
+.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
+  width: 12px;
+  height: 12px;
+  align-self: center;
+}
+.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator:first-child {
+  margin-left: 12px;
 }
 .block-editor-panel-color-gradient-settings.is-opened .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
   display: none;
@@ -1911,6 +1919,10 @@
   display: flex;
 }
 
+.block-editor-default-block-appender__content {
+  cursor: text;
+}
+
 .block-editor-duotone-control__popover > .components-popover__content > div {
   padding: 16px;
   width: 280px;
@@ -1945,6 +1957,119 @@
   text-transform: capitalize;
 }
 
+.block-editor-image-size-control {
+  margin-bottom: 1em;
+}
+.block-editor-image-size-control .block-editor-image-size-control__row {
+  display: flex;
+  justify-content: space-between;
+}
+.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width,
+.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height {
+  margin-bottom: 0.5em;
+}
+.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width input,
+.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height input {
+  line-height: 1.25;
+}
+.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width {
+  margin-right: 5px;
+}
+.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height {
+  margin-left: 5px;
+}
+
+.block-editor-block-list__layout.has-overlay::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 60;
+}
+
+.block-editor-block-types-list__list-item {
+  display: block;
+  width: 33.33%;
+  padding: 0;
+  margin: 0;
+}
+
+.components-button.block-editor-block-types-list__item {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  font-size: 13px;
+  color: #1e1e1e;
+  padding: 8px;
+  align-items: stretch;
+  justify-content: center;
+  cursor: pointer;
+  background: transparent;
+  word-break: break-word;
+  border-radius: 2px;
+  transition: all 0.05s ease-in-out;
+  position: relative;
+  height: auto;
+}
+@media (prefers-reduced-motion: reduce) {
+  .components-button.block-editor-block-types-list__item {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.components-button.block-editor-block-types-list__item:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.components-button.block-editor-block-types-list__item:not(:disabled):hover {
+  color: var(--wp-admin-theme-color) !important;
+}
+.components-button.block-editor-block-types-list__item:not(:disabled):focus {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.components-button.block-editor-block-types-list__item:not(:disabled).is-active {
+  color: #fff;
+  background: #1e1e1e;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.block-editor-block-types-list__item-icon {
+  padding: 12px 20px;
+  border-radius: 2px;
+  color: #1e1e1e;
+  transition: all 0.05s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-block-types-list__item-icon {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.block-editor-block-types-list__item-icon .block-editor-block-icon {
+  margin-left: auto;
+  margin-right: auto;
+}
+.block-editor-block-types-list__item-icon svg {
+  transition: all 0.15s ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-block-types-list__item-icon svg {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.block-editor-block-types-list__list-item[draggable=true] .block-editor-block-types-list__item-icon {
+  cursor: grab;
+}
+
+.block-editor-block-types-list__item-title {
+  padding: 4px 2px 8px;
+  font-size: 12px;
+}
+
 .items-justified-left {
   justify-content: flex-start;
 }
@@ -1961,6 +2086,14 @@
   justify-content: space-between;
 }
 
+.block-editor-line-height-control {
+  margin-bottom: 24px;
+}
+.block-editor-line-height-control input {
+  display: block;
+  max-width: 60px;
+}
+
 @keyframes loadingpulse {
   0% {
     opacity: 1;
@@ -2238,6 +2371,7 @@
   font-size: 0.9em;
   background-color: #f0f0f0;
   border-radius: 2px;
+  white-space: nowrap;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-description {
   padding-top: 12px;
@@ -2399,16 +2533,10 @@
    * Position spinner to the left of the actions.
    *
    * Compensate for:
-   *  - Input margin ($grid-unit-20)
-   *  - Border (1px)
-   *  - Vertically, for the difference in height between the input (40px)
-   *    and the spinner.
-   *  - Horizontally, adjust for the width occupied by the icon buttons,
-   *    then artificially create spacing that mimics as if the spinner
-   *    were center-padded to the same width as an icon button.
+   *  - Input padding right ($button-size)
    */
-  top: 28px;
-  right: 62px;
+  top: calc(50% - 16px / 2);
+  right: 36px;
 }
 
 .block-editor-link-control__search-item-action {
@@ -2416,127 +2544,6 @@
   flex-shrink: 0;
 }
 
-.block-editor-line-height-control {
-  margin-bottom: 24px;
-}
-.block-editor-line-height-control input {
-  display: block;
-  max-width: 60px;
-}
-
-.block-editor-image-size-control {
-  margin-bottom: 1em;
-}
-.block-editor-image-size-control .block-editor-image-size-control__row {
-  display: flex;
-  justify-content: space-between;
-}
-.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width,
-.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height {
-  margin-bottom: 0.5em;
-}
-.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width input,
-.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height input {
-  line-height: 1.25;
-}
-.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width {
-  margin-right: 5px;
-}
-.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height {
-  margin-left: 5px;
-}
-
-.block-editor-block-list__layout.has-overlay::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 60;
-}
-
-.block-editor-block-types-list__list-item {
-  display: block;
-  width: 33.33%;
-  padding: 0;
-  margin: 0;
-}
-
-.components-button.block-editor-block-types-list__item {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  font-size: 13px;
-  color: #1e1e1e;
-  padding: 8px;
-  align-items: stretch;
-  justify-content: center;
-  cursor: pointer;
-  background: transparent;
-  word-break: break-word;
-  border-radius: 2px;
-  transition: all 0.05s ease-in-out;
-  position: relative;
-  height: auto;
-}
-@media (prefers-reduced-motion: reduce) {
-  .components-button.block-editor-block-types-list__item {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-.components-button.block-editor-block-types-list__item:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-.components-button.block-editor-block-types-list__item:not(:disabled):hover {
-  color: var(--wp-admin-theme-color) !important;
-}
-.components-button.block-editor-block-types-list__item:not(:disabled):focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-.components-button.block-editor-block-types-list__item:not(:disabled).is-active {
-  color: #fff;
-  background: #1e1e1e;
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-}
-
-.block-editor-block-types-list__item-icon {
-  padding: 12px 20px;
-  border-radius: 2px;
-  color: #1e1e1e;
-  transition: all 0.05s ease-in-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-block-types-list__item-icon {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-.block-editor-block-types-list__item-icon .block-editor-block-icon {
-  margin-left: auto;
-  margin-right: auto;
-}
-.block-editor-block-types-list__item-icon svg {
-  transition: all 0.15s ease-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-block-types-list__item-icon svg {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-.block-editor-block-types-list__list-item[draggable=true] .block-editor-block-types-list__item-icon {
-  cursor: grab;
-}
-
-.block-editor-block-types-list__item-title {
-  padding: 4px 2px 8px;
-  font-size: 12px;
-}
-
 .block-editor-list-view-tree {
   width: 100%;
   border-collapse: collapse;
@@ -3566,18 +3573,8 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   margin-bottom: 8px;
 }
 
-.block-editor-hooks__border-controls .block-editor-hooks__border-controls-row {
-  display: flex;
-  justify-content: space-between;
-}
-.block-editor-hooks__border-controls .block-editor-hooks__border-controls-row > * {
-  width: calc(50% - 8px);
-}
-.block-editor-hooks__border-controls .components-unit-control-wrapper {
-  margin-bottom: 24px;
-}
-.block-editor-hooks__border-controls .components-unit-control-wrapper:last-child {
-  margin-bottom: 8px;
+.border-block-support-panel .single-column {
+  grid-column: span 1;
 }
 
 .dimensions-block-support-panel .single-column {
@@ -3597,6 +3594,74 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: span 1;
 }
 
+.color-block-support-panel {
+  /* Increased specificity required to remove the slot wrapper's row gap */
+  /**
+   * The following styles replicate the separated border of the
+   * `ItemGroup` component but allows for hidden items. This is because
+   * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
+   * must at least render a placeholder which would otherwise interfere
+   * with the `:last-child` styles.
+   */
+  /**
+   * The following few styles fix the layout and spacing for the due to the
+   * introduced wrapper element by the `Item` component.
+   */
+}
+.color-block-support-panel .block-editor-contrast-checker {
+  /**
+   * Contrast checkers are forced to the bottom of the panel so all
+   * injected color controls can appear as a single item group without
+   * the contrast checkers suddenly appearing between items.
+   */
+  order: 9999;
+  grid-column: span 2;
+  margin-top: 16px;
+}
+.color-block-support-panel .block-editor-contrast-checker .components-notice__content {
+  margin-right: 0;
+}
+.color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
+  row-gap: 0;
+}
+.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item {
+  padding: 0;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.last {
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item > div,
+.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item > div > button {
+  border-radius: inherit;
+}
+.color-block-support-panel .block-editor-panel-color-gradient-settings__color-indicator {
+  background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+}
+.color-block-support-panel .block-editor-tools-panel-color-dropdown {
+  display: block;
+  padding: 0;
+}
+.color-block-support-panel .block-editor-tools-panel-color-dropdown > button {
+  height: 46px;
+}
+.color-block-support-panel .block-editor-tools-panel-color-dropdown > button.is-open {
+  background: #f0f0f0;
+  color: var(--wp-admin-theme-color);
+}
+.color-block-support-panel .color-block-support-panel__item-group > div {
+  grid-column: span 2;
+  border-radius: inherit;
+}
+
 /**
  * Block Toolbar
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "8.0.17",
+	"version": "8.1.2-next.f435e9e01b.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,47 +33,47 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.2.4",
-		"@wordpress/a11y": "^3.2.4",
-		"@wordpress/api-fetch": "^5.2.6",
-		"@wordpress/blob": "^3.2.2",
-		"@wordpress/block-serialization-default-parser": "^4.2.3",
-		"@wordpress/blocks": "^11.1.5",
-		"@wordpress/components": "^19.2.3",
-		"@wordpress/compose": "^5.0.7",
-		"@wordpress/data": "^6.1.5",
-		"@wordpress/deprecated": "^3.2.3",
-		"@wordpress/dom": "^3.2.7",
-		"@wordpress/element": "^4.0.4",
-		"@wordpress/hooks": "^3.2.2",
-		"@wordpress/html-entities": "^3.2.3",
-		"@wordpress/i18n": "^4.2.4",
-		"@wordpress/icons": "^6.1.1",
-		"@wordpress/is-shallow-equal": "^4.2.1",
-		"@wordpress/keyboard-shortcuts": "^3.0.7",
-		"@wordpress/keycodes": "^3.2.4",
-		"@wordpress/notices": "^3.2.8",
-		"@wordpress/rich-text": "^5.0.8",
-		"@wordpress/shortcode": "^3.2.3",
-		"@wordpress/token-list": "^2.2.2",
-		"@wordpress/url": "^3.3.1",
-		"@wordpress/warning": "^2.2.2",
-		"@wordpress/wordcount": "^3.2.3",
+		"@wordpress/a11y": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/api-fetch": "^6.0.1-next.f435e9e01b.0",
+		"@wordpress/blob": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/blocks": "^11.2.1-next.f435e9e01b.0",
+		"@wordpress/components": "^19.4.1-next.f435e9e01b.0",
+		"@wordpress/compose": "^5.1.1-next.f435e9e01b.0",
+		"@wordpress/data": "^6.2.2-next.f435e9e01b.0",
+		"@wordpress/deprecated": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/dom": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/element": "^4.1.1-next.f435e9e01b.0",
+		"@wordpress/hooks": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/html-entities": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/i18n": "^4.3.1-next.f435e9e01b.0",
+		"@wordpress/icons": "^6.3.1-next.f435e9e01b.0",
+		"@wordpress/is-shallow-equal": "^4.3.1-next.f435e9e01b.0",
+		"@wordpress/keyboard-shortcuts": "^3.1.2-next.f435e9e01b.0",
+		"@wordpress/keycodes": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/notices": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/rich-text": "^5.1.2-next.f435e9e01b.0",
+		"@wordpress/shortcode": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/token-list": "^2.3.1-next.f435e9e01b.0",
+		"@wordpress/url": "^3.4.1-next.f435e9e01b.0",
+		"@wordpress/warning": "^2.3.1-next.f435e9e01b.0",
+		"@wordpress/wordcount": "^3.3.1-next.f435e9e01b.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
-		"css-mediaquery": "^0.1.2",
 		"diff": "^4.0.2",
 		"dom-scroll-into-view": "^1.2.1",
 		"inherits": "^2.0.3",
 		"lodash": "^4.17.21",
-		"memize": "^1.1.0",
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^3.0.0",
-		"redux-multi": "^0.1.12",
 		"rememo": "^3.0.0",
 		"traverse": "^0.6.6"
 	},
+	"peerDependencies": {
+		"react": "^17.0.0",
+		"react-dom": "^17.0.0"
+	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1246a52b9fdfecf592a9fa1d33a2804a6cc2d257"
+	"gitHead": "14b2846015dfb1b440ce93accdd03842ebe5f1cd"
 }

package/src/components/block-caption/index.native.js

@@ -9,6 +9,7 @@ import { View } from 'react-native';
 import { Caption, RichText } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
+import { hasBlockSupport } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -44,16 +45,33 @@ const BlockCaption = ( {
 
 export default compose( [
 	withSelect( ( select, { clientId } ) => {
-		const { getBlockAttributes, getSelectedBlockClientId } = select(
-			blockEditorStore
-		);
+		const {
+			getBlockAttributes,
+			getSelectedBlockClientId,
+			getBlockName,
+			getBlockRootClientId,
+		} = select( blockEditorStore );
 		const { caption } = getBlockAttributes( clientId ) || {};
 		const isBlockSelected = getSelectedBlockClientId() === clientId;
 
+		// Detect whether the block is an inner block by checking if it has a parent block.
+		// getBlockRootClientId() will return an empty string for all top-level blocks.
+		// If the block is an inner block, its parent may explicitly hide child block controls.
+		// See: https://github.com/wordpress-mobile/gutenberg-mobile/pull/4256
+		const parentId = getBlockRootClientId( clientId );
+		const parentBlockName = getBlockName( parentId );
+
+		const hideCaption = hasBlockSupport(
+			parentBlockName,
+			'__experimentalHideChildBlockControls',
+			false
+		);
+
 		// We'll render the caption so that the soft keyboard is not forced to close on Android
 		// but still hide it by setting its display style to none. See wordpress-mobile/gutenberg-mobile#1221
 		const shouldDisplay =
-			! RichText.isEmpty( caption ) > 0 || isBlockSelected;
+			! hideCaption &&
+			( ! RichText.isEmpty( caption ) > 0 || isBlockSelected );
 
 		return {
 			shouldDisplay,

package/src/components/block-card/README.md

@@ -25,7 +25,7 @@ const MyBlockCard = () => (
 	<BlockCard
 		icon={ paragraph }
 		title="Paragraph"
-		description="Start with the building block of all narrative."
+		description="Start with the basic building block of all narrative."
 	/>
 );
 ```