@wordpress/block-library 6.0.18 → 6.0.19

package/build-style/post-template/style.css

@@ -82,64 +82,37 @@
   list-style: none;
   padding: 0;
 }
-.wp-block-post-template li,
-.wp-block-query-loop li {
-  clear: both;
-}
 .wp-block-post-template.is-flex-container,
 .wp-block-query-loop.is-flex-container {
   flex-direction: row;
   display: flex;
   flex-wrap: wrap;
+  gap: 1.25em;
 }
 .wp-block-post-template.is-flex-container li,
 .wp-block-query-loop.is-flex-container li {
-  margin: 0 0 1.25em 0;
+  margin: 0;
   width: 100%;
 }
 @media (min-width: 600px) {
-  .wp-block-post-template.is-flex-container li,
-.wp-block-query-loop.is-flex-container li {
-    margin-right: 1.25em;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-2 > li {
     width: calc((100% / 2) - 1.25em + (1.25em / 2));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li:nth-child(2n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-2 > li:nth-child(2n) {
-    margin-right: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-3 > li {
     width: calc((100% / 3) - 1.25em + (1.25em / 3));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li:nth-child(3n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-3 > li:nth-child(3n) {
-    margin-right: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-4 > li {
     width: calc((100% / 4) - 1.25em + (1.25em / 4));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li:nth-child(4n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-4 > li:nth-child(4n) {
-    margin-right: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-5 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-5 > li {
     width: calc((100% / 5) - 1.25em + (1.25em / 5));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-5 > li:nth-child(5n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-5 > li:nth-child(5n) {
-    margin-right: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-6 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-6 > li {
     width: calc((100% / 6) - 1.25em + (1.25em / 6));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-6 > li:nth-child(6n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-6 > li:nth-child(6n) {
-    margin-right: 0;
-  }
 }

package/build-style/style-rtl.css

@@ -1557,6 +1557,7 @@ ul.has-background {
 .wp-block-navigation.is-vertical {
   --navigation-layout-direction: column;
   --navigation-layout-justify: initial;
+  --navigation-layout-align: flex-start;
 }
 .wp-block-navigation.no-wrap {
   --navigation-layout-wrap: nowrap;
@@ -1959,10 +1960,10 @@ html.has-modal-open {
 
 .wp-block-navigation .wp-block-page-list {
   display: flex;
-  flex-direction: var(--layout-direction, initial);
-  justify-content: var(--layout-justify, initial);
-  align-items: var(--layout-align, initial);
-  flex-wrap: var(--layout-wrap, wrap);
+  flex-direction: var(--navigation-layout-direction, initial);
+  justify-content: var(--navigation-layout-justify, initial);
+  align-items: var(--navigation-layout-align, initial);
+  flex-wrap: var(--navigation-layout-wrap, wrap);
   background-color: inherit;
 }
 .wp-block-navigation .wp-block-navigation-item {
@@ -2264,66 +2265,39 @@ p.has-background {
   list-style: none;
   padding: 0;
 }
-.wp-block-post-template li,
-.wp-block-query-loop li {
-  clear: both;
-}
 .wp-block-post-template.is-flex-container,
 .wp-block-query-loop.is-flex-container {
   flex-direction: row;
   display: flex;
   flex-wrap: wrap;
+  gap: 1.25em;
 }
 .wp-block-post-template.is-flex-container li,
 .wp-block-query-loop.is-flex-container li {
-  margin: 0 0 1.25em 0;
+  margin: 0;
   width: 100%;
 }
 @media (min-width: 600px) {
-  .wp-block-post-template.is-flex-container li,
-.wp-block-query-loop.is-flex-container li {
-    margin-left: 1.25em;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-2 > li {
     width: calc((100% / 2) - 1.25em + (1.25em / 2));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li:nth-child(2n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-2 > li:nth-child(2n) {
-    margin-left: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-3 > li {
     width: calc((100% / 3) - 1.25em + (1.25em / 3));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li:nth-child(3n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-3 > li:nth-child(3n) {
-    margin-left: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-4 > li {
     width: calc((100% / 4) - 1.25em + (1.25em / 4));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li:nth-child(4n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-4 > li:nth-child(4n) {
-    margin-left: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-5 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-5 > li {
     width: calc((100% / 5) - 1.25em + (1.25em / 5));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-5 > li:nth-child(5n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-5 > li:nth-child(5n) {
-    margin-left: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-6 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-6 > li {
     width: calc((100% / 6) - 1.25em + (1.25em / 6));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-6 > li:nth-child(6n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-6 > li:nth-child(6n) {
-    margin-left: 0;
-  }
 }
 
 .wp-block-query-pagination > .wp-block-query-pagination-next,
@@ -3122,11 +3096,11 @@ pre.wp-block-verse {
 }
 
 .has-normal-font-size {
-  font-size: var(--wp--preset--font-size--normal) !important;
+  font-size: var(--wp--preset--font-size--normal);
 }
 
 .has-huge-font-size {
-  font-size: var(--wp--preset--font-size--huge) !important;
+  font-size: var(--wp--preset--font-size--huge);
 }
 
 .has-text-align-center {

package/build-style/style.css

@@ -1579,6 +1579,7 @@ ul.has-background {
 .wp-block-navigation.is-vertical {
   --navigation-layout-direction: column;
   --navigation-layout-justify: initial;
+  --navigation-layout-align: flex-start;
 }
 .wp-block-navigation.no-wrap {
   --navigation-layout-wrap: nowrap;
@@ -1981,10 +1982,10 @@ html.has-modal-open {
 
 .wp-block-navigation .wp-block-page-list {
   display: flex;
-  flex-direction: var(--layout-direction, initial);
-  justify-content: var(--layout-justify, initial);
-  align-items: var(--layout-align, initial);
-  flex-wrap: var(--layout-wrap, wrap);
+  flex-direction: var(--navigation-layout-direction, initial);
+  justify-content: var(--navigation-layout-justify, initial);
+  align-items: var(--navigation-layout-align, initial);
+  flex-wrap: var(--navigation-layout-wrap, wrap);
   background-color: inherit;
 }
 .wp-block-navigation .wp-block-navigation-item {
@@ -2286,66 +2287,39 @@ p.has-background {
   list-style: none;
   padding: 0;
 }
-.wp-block-post-template li,
-.wp-block-query-loop li {
-  clear: both;
-}
 .wp-block-post-template.is-flex-container,
 .wp-block-query-loop.is-flex-container {
   flex-direction: row;
   display: flex;
   flex-wrap: wrap;
+  gap: 1.25em;
 }
 .wp-block-post-template.is-flex-container li,
 .wp-block-query-loop.is-flex-container li {
-  margin: 0 0 1.25em 0;
+  margin: 0;
   width: 100%;
 }
 @media (min-width: 600px) {
-  .wp-block-post-template.is-flex-container li,
-.wp-block-query-loop.is-flex-container li {
-    margin-right: 1.25em;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-2 > li {
     width: calc((100% / 2) - 1.25em + (1.25em / 2));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li:nth-child(2n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-2 > li:nth-child(2n) {
-    margin-right: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-3 > li {
     width: calc((100% / 3) - 1.25em + (1.25em / 3));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li:nth-child(3n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-3 > li:nth-child(3n) {
-    margin-right: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-4 > li {
     width: calc((100% / 4) - 1.25em + (1.25em / 4));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li:nth-child(4n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-4 > li:nth-child(4n) {
-    margin-right: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-5 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-5 > li {
     width: calc((100% / 5) - 1.25em + (1.25em / 5));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-5 > li:nth-child(5n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-5 > li:nth-child(5n) {
-    margin-right: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-6 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-6 > li {
     width: calc((100% / 6) - 1.25em + (1.25em / 6));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-6 > li:nth-child(6n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-6 > li:nth-child(6n) {
-    margin-right: 0;
-  }
 }
 
 .wp-block-query-pagination > .wp-block-query-pagination-next,
@@ -3149,11 +3123,11 @@ pre.wp-block-verse {
 }
 
 .has-normal-font-size {
-  font-size: var(--wp--preset--font-size--normal) !important;
+  font-size: var(--wp--preset--font-size--normal);
 }
 
 .has-huge-font-size {
-  font-size: var(--wp--preset--font-size--huge) !important;
+  font-size: var(--wp--preset--font-size--huge);
 }
 
 .has-text-align-center {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "6.0.18",
+	"version": "6.0.19",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,9 +37,9 @@
 		"@wordpress/api-fetch": "^5.2.6",
 		"@wordpress/autop": "^3.2.3",
 		"@wordpress/blob": "^3.2.2",
-		"@wordpress/block-editor": "^8.0.13",
+		"@wordpress/block-editor": "^8.0.14",
 		"@wordpress/blocks": "^11.1.5",
-		"@wordpress/components": "^19.2.0",
+		"@wordpress/components": "^19.2.1",
 		"@wordpress/compose": "^5.0.7",
 		"@wordpress/core-data": "^4.0.9",
 		"@wordpress/data": "^6.1.5",
@@ -52,14 +52,14 @@
 		"@wordpress/html-entities": "^3.2.3",
 		"@wordpress/i18n": "^4.2.4",
 		"@wordpress/icons": "^6.1.1",
-		"@wordpress/interface": "^4.1.15",
+		"@wordpress/interface": "^4.1.16",
 		"@wordpress/is-shallow-equal": "^4.2.1",
 		"@wordpress/keycodes": "^3.2.4",
 		"@wordpress/notices": "^3.2.8",
 		"@wordpress/primitives": "^3.0.4",
-		"@wordpress/reusable-blocks": "^3.0.19",
-		"@wordpress/rich-text": "^5.0.7",
-		"@wordpress/server-side-render": "^3.0.17",
+		"@wordpress/reusable-blocks": "^3.0.20",
+		"@wordpress/rich-text": "^5.0.8",
+		"@wordpress/server-side-render": "^3.0.18",
 		"@wordpress/url": "^3.3.1",
 		"@wordpress/viewport": "^4.0.7",
 		"classnames": "^2.3.1",
@@ -73,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f70f4664ac641bd107481c5c67ee6f5556a0a381"
+	"gitHead": "04883dd8275ee52245a45c8899eb720b91055c50"
 }

package/src/common.scss

@@ -22,11 +22,11 @@
 }
 
 .has-normal-font-size {
-	font-size: var(--wp--preset--font-size--normal) !important;
+	font-size: var(--wp--preset--font-size--normal);
 }
 
 .has-huge-font-size {
-	font-size: var(--wp--preset--font-size--huge) !important;
+	font-size: var(--wp--preset--font-size--huge);
 }
 
 // Text alignments.

package/src/editor.scss

@@ -70,11 +70,11 @@
 }
 
 .editor-styles-wrapper .has-normal-font-size {
-	font-size: var(--wp--preset--font-size--normal) !important;
+	font-size: var(--wp--preset--font-size--normal);
 }
 
 .editor-styles-wrapper .has-huge-font-size {
-	font-size: var(--wp--preset--font-size--huge) !important;
+	font-size: var(--wp--preset--font-size--huge);
 }
 
 /**

package/src/gallery/deprecated.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { map, some } from 'lodash';
+import { map, some, omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -97,11 +97,8 @@ function runV2Migration( attributes ) {
 
 	return [
 		{
-			caption: attributes.caption,
-			columns: attributes.columns,
-			imageCrop: attributes.imageCrop,
+			...omit( attributes, [ 'images', 'ids' ] ),
 			linkTo,
-			sizeSlug: attributes.sizeSlug,
 			allowResize: false,
 		},
 		imageBlocks,

package/src/navigation/style.scss

@@ -117,6 +117,7 @@ $navigation-icon-size: 24px;
 	&.is-vertical {
 		--navigation-layout-direction: column;
 		--navigation-layout-justify: initial;
+		--navigation-layout-align: flex-start;
 	}
 
 	&.no-wrap {

package/src/navigation-submenu/index.php

@@ -191,7 +191,7 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	$aria_label = sprintf(
 		/* translators: Accessibility text. %s: Parent page title. */
 		__( '%s submenu' ),
-		$label
+		wp_strip_all_tags( $label )
 	);
 
 	$html = '<li ' . $wrapper_attributes . '>';
@@ -231,7 +231,7 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 
 		if ( $show_submenu_indicators ) {
 			// The submenu icon is rendered in a button here
-			// so that there's a clickable elment to open the submenu.
+			// so that there's a clickable element to open the submenu.
 			$html .= '<button aria-label="' . $aria_label . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">' . block_core_navigation_submenu_render_submenu_icon() . '</button>';
 		}
 	} else {

package/src/page-list/index.php

@@ -177,7 +177,7 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 		$aria_label = sprintf(
 			/* translators: Accessibility text. %s: Parent page title. */
 			__( '%s submenu' ),
-			$title
+			wp_strip_all_tags( $title )
 		);
 
 		$markup .= '<li class="wp-block-pages-list__item' . $css_class . '"' . $style_attribute . '>';

package/src/page-list/style.scss

@@ -2,10 +2,10 @@
 .wp-block-navigation {
 	.wp-block-page-list {
 		display: flex;
-		flex-direction: var(--layout-direction, initial);
-		justify-content: var(--layout-justify, initial);
-		align-items: var(--layout-align, initial);
-		flex-wrap: var(--layout-wrap, wrap);
+		flex-direction: var(--navigation-layout-direction, initial);
+		justify-content: var(--navigation-layout-justify, initial);
+		align-items: var(--navigation-layout-align, initial);
+		flex-wrap: var(--navigation-layout-wrap, wrap);
 		background-color: inherit;
 	}
 

package/src/post-content/index.php

@@ -46,6 +46,11 @@ function render_block_core_post_content( $attributes, $content, $block ) {
 	// so that `the_preview` for the current post can apply.
 	// We force this behavior by omitting the third argument (post ID) from the `get_the_content`.
 	$content = get_the_content( null, false );
+	// Check for nextpage to display page links for paginated posts.
+	if ( has_block( 'core/nextpage' ) ) {
+		$content .= wp_link_pages( array( 'echo' => 0 ) );
+	}
+
 	/** This filter is documented in wp-includes/post-template.php */
 	$content = apply_filters( 'the_content', str_replace( ']]>', ']]>', $content ) );
 	unset( $seen_ids[ $post_id ] );

package/src/post-template/style.scss

@@ -11,32 +11,21 @@
 	list-style: none;
 	padding: 0;
 
-	li {
-		clear: both;
-	}
-
 	&.is-flex-container {
 		flex-direction: row;
 		display: flex;
 		flex-wrap: wrap;
+		gap: 1.25em;
 
 		li {
-			margin: 0 0 1.25em 0;
+			margin: 0;
 			width: 100%;
 		}
 
 		@include break-small {
-			li {
-				margin-right: 1.25em;
-			}
-
 			@for $i from 2 through 6 {
 				&.is-flex-container.columns-#{ $i } > li {
 					width: calc((100% / #{ $i }) - 1.25em + (1.25em / #{ $i }));
-
-					&:nth-child( #{ $i }n ) {
-						margin-right: 0;
-					}
 				}
 			}
 		}

package/src/query-pagination-next/index.php

@@ -43,8 +43,9 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 		$content = get_next_posts_link( $label, $max_page );
 		remove_filter( 'next_posts_link_attributes', $filter_link_attributes );
 	} elseif ( ! $max_page || $max_page > $page ) {
-		$custom_query = new WP_Query( build_query_vars_from_query_block( $block, $page ) );
-		if ( (int) $custom_query->max_num_pages !== $page ) {
+		$custom_query           = new WP_Query( build_query_vars_from_query_block( $block, $page ) );
+		$custom_query_max_pages = (int) $custom_query->max_num_pages;
+		if ( $custom_query_max_pages && $custom_query_max_pages !== $page ) {
 			$content = sprintf(
 				'<a href="%1$s" %2$s>%3$s</a>',
 				esc_url( add_query_arg( $page_key, $page + 1 ) ),

package/src/search/index.php

@@ -46,13 +46,13 @@ function render_block_core_search( $attributes ) {
 	$label_markup = sprintf(
 		'<label for="%1$s" class="wp-block-search__label screen-reader-text">%2$s</label>',
 		$input_id,
-		empty( $attributes['label'] ) ? __( 'Search' ) : $attributes['label']
+		empty( $attributes['label'] ) ? __( 'Search' ) : esc_html( $attributes['label'] )
 	);
 	if ( $show_label && ! empty( $attributes['label'] ) ) {
 		$label_markup = sprintf(
 			'<label for="%1$s" class="wp-block-search__label">%2$s</label>',
 			$input_id,
-			$attributes['label']
+			esc_html( $attributes['label'] )
 		);
 	}
 
@@ -61,7 +61,7 @@ function render_block_core_search( $attributes ) {
 		$input_markup  = sprintf(
 			'<input type="search" id="%s" class="wp-block-search__input %s" name="s" value="%s" placeholder="%s" %s required />',
 			$input_id,
-			$input_classes,
+			esc_attr( $input_classes ),
 			esc_attr( get_search_query() ),
 			esc_attr( $attributes['placeholder'] ),
 			$inline_styles['input']
@@ -77,7 +77,7 @@ function render_block_core_search( $attributes ) {
 		}
 		if ( ! $use_icon_button ) {
 			if ( ! empty( $attributes['buttonText'] ) ) {
-				$button_internal_markup = $attributes['buttonText'];
+				$button_internal_markup = esc_html( $attributes['buttonText'] );
 			}
 		} else {
 			$button_classes        .= ' has-icon';
@@ -89,7 +89,7 @@ function render_block_core_search( $attributes ) {
 
 		$button_markup = sprintf(
 			'<button type="submit" class="wp-block-search__button %s" %s>%s</button>',
-			$button_classes,
+			esc_attr( $button_classes ),
 			$inline_styles['button'],
 			$button_internal_markup
 		);
@@ -98,7 +98,7 @@ function render_block_core_search( $attributes ) {
 	$field_markup_classes = $is_button_inside ? $border_color_classes : '';
 	$field_markup         = sprintf(
 		'<div class="wp-block-search__inside-wrapper %s" %s>%s</div>',
-		$field_markup_classes,
+		esc_attr( $field_markup_classes ),
 		$inline_styles['wrapper'],
 		$input_markup . $button_markup
 	);
@@ -285,9 +285,9 @@ function styles_for_block_core_search( $attributes ) {
 	}
 
 	return array(
-		'input'   => ! empty( $input_styles ) ? sprintf( ' style="%s"', implode( ' ', $input_styles ) ) : '',
-		'button'  => ! empty( $button_styles ) ? sprintf( ' style="%s"', implode( ' ', $button_styles ) ) : '',
-		'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', implode( ' ', $wrapper_styles ) ) : '',
+		'input'   => ! empty( $input_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $input_styles ) ) ) : '',
+		'button'  => ! empty( $button_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $button_styles ) ) ) : '',
+		'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $wrapper_styles ) ) ) : '',
 	);
 }
 

package/src/site-logo/edit.js

@@ -166,9 +166,10 @@ const SiteLogo = ( {
 	const currentWidth = width || defaultWidth;
 	const ratio = naturalWidth / naturalHeight;
 	const currentHeight = currentWidth / ratio;
-	const minWidth = naturalWidth < naturalHeight ? MIN_SIZE : MIN_SIZE * ratio;
+	const minWidth =
+		naturalWidth < naturalHeight ? MIN_SIZE : Math.ceil( MIN_SIZE * ratio );
 	const minHeight =
-		naturalHeight < naturalWidth ? MIN_SIZE : MIN_SIZE / ratio;
+		naturalHeight < naturalWidth ? MIN_SIZE : Math.ceil( MIN_SIZE / ratio );
 
 	// With the current implementation of ResizableBox, an image needs an
 	// explicit pixel value for the max-width. In absence of being able to