@wordpress/block-library 6.0.7 → 6.0.8

package/build-style/social-links/editor.css

@@ -103,16 +103,13 @@
 .wp-block-social-links__social-placeholder > .wp-block-social-links__social-placeholder-icons {
   display: flex;
 }
-.wp-block-social-links__social-placeholder + .block-list-appender,
 .wp-block-social-links__social-placeholder .wp-social-link {
   padding: 0.25em;
 }
-.is-style-pill-shape .wp-block-social-links__social-placeholder + .block-list-appender,
 .is-style-pill-shape .wp-block-social-links__social-placeholder .wp-social-link {
   padding-left: calc((2/3) * 1em);
   padding-right: calc((2/3) * 1em);
 }
-.is-style-logos-only .wp-block-social-links__social-placeholder + .block-list-appender,
 .is-style-logos-only .wp-block-social-links__social-placeholder .wp-social-link {
   padding: 0;
 }
@@ -128,6 +125,7 @@
 }
 
 .wp-block-social-links .wp-block-social-links__social-prompt {
+  min-height: 24px;
   list-style: none;
   order: 2;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -138,38 +136,6 @@
   cursor: default;
   padding-right: 8px;
 }
-.wp-block-social-links .wp-block-social-links__social-prompt + .block-list-appender {
-  margin-right: 8px;
-  padding: 0.25em;
-}
-
-.wp-block-social-links .block-list-appender {
-  margin: 4px auto 4px 0;
-  border-radius: 9999px;
-}
-.wp-block-social-links .block-list-appender .block-editor-inserter {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: inherit;
-  width: 1em;
-  height: 1em;
-}
-.has-small-icon-size .wp-block-social-links .block-list-appender {
-  font-size: 16px;
-}
-.has-normal-icon-size .wp-block-social-links .block-list-appender {
-  font-size: 24px;
-}
-.has-large-icon-size .wp-block-social-links .block-list-appender {
-  font-size: 36px;
-}
-.has-huge-icon-size .wp-block-social-links .block-list-appender {
-  font-size: 48px;
-}
-.wp-block-social-links .block-list-appender::before {
-  content: none;
-}
 
 .wp-block[data-align=center] > .wp-block-social-links {
   justify-content: center;

package/build-style/style-rtl.css

@@ -398,17 +398,23 @@
   background-size: auto;
 }
 .wp-block-cover-image.has-background-dim:not([class*=-background-color]),
-.wp-block-cover.has-background-dim:not([class*=-background-color]) {
+.wp-block-cover-image .has-background-dim:not([class*=-background-color]),
+.wp-block-cover.has-background-dim:not([class*=-background-color]),
+.wp-block-cover .has-background-dim:not([class*=-background-color]) {
   background-color: #000;
 }
 .wp-block-cover-image.has-background-dim::before,
-.wp-block-cover.has-background-dim::before {
+.wp-block-cover-image .has-background-dim::before,
+.wp-block-cover.has-background-dim::before,
+.wp-block-cover .has-background-dim::before {
   content: "";
   background-color: inherit;
 }
 .wp-block-cover-image.has-background-dim:not(.has-background-gradient)::before,
+.wp-block-cover-image .has-background-dim:not(.has-background-gradient)::before,
 .wp-block-cover-image .wp-block-cover__gradient-background,
 .wp-block-cover.has-background-dim:not(.has-background-gradient)::before,
+.wp-block-cover .has-background-dim:not(.has-background-gradient)::before,
 .wp-block-cover .wp-block-cover__gradient-background {
   position: absolute;
   top: 0;
@@ -1620,6 +1626,28 @@ ul.has-background {
   }
 }
 
+.wp-block-navigation-submenu {
+  position: relative;
+  display: flex;
+}
+.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg {
+  stroke: currentColor;
+}
+
+button.wp-block-navigation-item__content {
+  background-color: transparent;
+  border: none;
+  color: currentColor;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  text-align: right;
+}
+
+.wp-block-navigation-submenu__toggle {
+  cursor: pointer;
+}
+
 /**
  * Margins
  */
@@ -1694,6 +1722,11 @@ ul.has-background {
   display: none;
 }
 
+.wp-block-navigation__container:only-child,
+.wp-block-page-list:only-child {
+  flex-grow: 1;
+}
+
 /**
  * Mobile menu.
  */
@@ -1712,6 +1745,10 @@ ul.has-background {
   justify-content: var(--layout-justify, initial);
   align-items: var(--layout-align, initial);
 }
+.wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) {
+  color: inherit !important;
+  background-color: inherit !important;
+}
 .wp-block-navigation__responsive-container.is-menu-open {
   display: flex;
   flex-direction: column;
@@ -1765,7 +1802,8 @@ ul.has-background {
   align-items: var(--layout-justification-setting, initial);
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container,
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
   color: inherit !important;
   background: transparent !important;
 }
@@ -1849,28 +1887,6 @@ html.has-modal-open {
   overflow-wrap: break-word;
 }
 
-.wp-block-navigation-submenu {
-  position: relative;
-  display: flex;
-}
-.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg {
-  stroke: currentColor;
-}
-
-button.wp-block-navigation-item__content {
-  background-color: transparent;
-  border: none;
-  color: currentColor;
-  font-size: inherit;
-  font-family: inherit;
-  line-height: inherit;
-  text-align: right;
-}
-
-.wp-block-navigation-submenu__toggle {
-  cursor: pointer;
-}
-
 .wp-block-navigation .wp-block-home-link__content {
   color: inherit;
   display: block;
@@ -2059,6 +2075,24 @@ p.has-background {
   border: none;
 }
 
+.wp-block-post-comments-form[style*=font-weight] :where(.comment-reply-title) {
+  font-weight: inherit;
+}
+.wp-block-post-comments-form[style*=font-family] :where(.comment-reply-title) {
+  font-family: inherit;
+}
+.wp-block-post-comments-form[class*=-font-size] :where(.comment-reply-title), .wp-block-post-comments-form[style*=font-size] :where(.comment-reply-title) {
+  font-size: inherit;
+}
+.wp-block-post-comments-form[style*=line-height] :where(.comment-reply-title) {
+  line-height: inherit;
+}
+.wp-block-post-comments-form[style*=font-style] :where(.comment-reply-title) {
+  font-style: inherit;
+}
+.wp-block-post-comments-form[style*=letter-spacing] :where(.comment-reply-title) {
+  letter-spacing: inherit;
+}
 .wp-block-post-comments-form input[type=submit] {
   border: none;
   box-shadow: none;

package/build-style/style.css

@@ -401,17 +401,23 @@
   background-size: auto;
 }
 .wp-block-cover-image.has-background-dim:not([class*=-background-color]),
-.wp-block-cover.has-background-dim:not([class*=-background-color]) {
+.wp-block-cover-image .has-background-dim:not([class*=-background-color]),
+.wp-block-cover.has-background-dim:not([class*=-background-color]),
+.wp-block-cover .has-background-dim:not([class*=-background-color]) {
   background-color: #000;
 }
 .wp-block-cover-image.has-background-dim::before,
-.wp-block-cover.has-background-dim::before {
+.wp-block-cover-image .has-background-dim::before,
+.wp-block-cover.has-background-dim::before,
+.wp-block-cover .has-background-dim::before {
   content: "";
   background-color: inherit;
 }
 .wp-block-cover-image.has-background-dim:not(.has-background-gradient)::before,
+.wp-block-cover-image .has-background-dim:not(.has-background-gradient)::before,
 .wp-block-cover-image .wp-block-cover__gradient-background,
 .wp-block-cover.has-background-dim:not(.has-background-gradient)::before,
+.wp-block-cover .has-background-dim:not(.has-background-gradient)::before,
 .wp-block-cover .wp-block-cover__gradient-background {
   position: absolute;
   top: 0;
@@ -1642,6 +1648,28 @@ ul.has-background {
   }
 }
 
+.wp-block-navigation-submenu {
+  position: relative;
+  display: flex;
+}
+.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg {
+  stroke: currentColor;
+}
+
+button.wp-block-navigation-item__content {
+  background-color: transparent;
+  border: none;
+  color: currentColor;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  text-align: left;
+}
+
+.wp-block-navigation-submenu__toggle {
+  cursor: pointer;
+}
+
 /**
  * Margins
  */
@@ -1716,6 +1744,11 @@ ul.has-background {
   display: none;
 }
 
+.wp-block-navigation__container:only-child,
+.wp-block-page-list:only-child {
+  flex-grow: 1;
+}
+
 /**
  * Mobile menu.
  */
@@ -1734,6 +1767,10 @@ ul.has-background {
   justify-content: var(--layout-justify, initial);
   align-items: var(--layout-align, initial);
 }
+.wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) {
+  color: inherit !important;
+  background-color: inherit !important;
+}
 .wp-block-navigation__responsive-container.is-menu-open {
   display: flex;
   flex-direction: column;
@@ -1787,7 +1824,8 @@ ul.has-background {
   align-items: var(--layout-justification-setting, initial);
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container,
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
   color: inherit !important;
   background: transparent !important;
 }
@@ -1871,28 +1909,6 @@ html.has-modal-open {
   overflow-wrap: break-word;
 }
 
-.wp-block-navigation-submenu {
-  position: relative;
-  display: flex;
-}
-.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg {
-  stroke: currentColor;
-}
-
-button.wp-block-navigation-item__content {
-  background-color: transparent;
-  border: none;
-  color: currentColor;
-  font-size: inherit;
-  font-family: inherit;
-  line-height: inherit;
-  text-align: left;
-}
-
-.wp-block-navigation-submenu__toggle {
-  cursor: pointer;
-}
-
 .wp-block-navigation .wp-block-home-link__content {
   color: inherit;
   display: block;
@@ -2081,6 +2097,24 @@ p.has-background {
   border: none;
 }
 
+.wp-block-post-comments-form[style*=font-weight] :where(.comment-reply-title) {
+  font-weight: inherit;
+}
+.wp-block-post-comments-form[style*=font-family] :where(.comment-reply-title) {
+  font-family: inherit;
+}
+.wp-block-post-comments-form[class*=-font-size] :where(.comment-reply-title), .wp-block-post-comments-form[style*=font-size] :where(.comment-reply-title) {
+  font-size: inherit;
+}
+.wp-block-post-comments-form[style*=line-height] :where(.comment-reply-title) {
+  line-height: inherit;
+}
+.wp-block-post-comments-form[style*=font-style] :where(.comment-reply-title) {
+  font-style: inherit;
+}
+.wp-block-post-comments-form[style*=letter-spacing] :where(.comment-reply-title) {
+  letter-spacing: inherit;
+}
 .wp-block-post-comments-form input[type=submit] {
   border: none;
   box-shadow: none;

package/build-style/theme-rtl.css

@@ -83,7 +83,7 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-.wp-block-code {
+.wp-block-code > code {
   font-family: Menlo, Consolas, monaco, monospace;
   color: #1e1e1e;
   padding: 0.8em 1em;

package/build-style/theme.css

@@ -83,7 +83,7 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-.wp-block-code {
+.wp-block-code > code {
   font-family: Menlo, Consolas, monaco, monospace;
   color: #1e1e1e;
   padding: 0.8em 1em;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "6.0.7",
+	"version": "6.0.8",
 	"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.3",
+		"@wordpress/block-editor": "^8.0.4",
 		"@wordpress/blocks": "^11.1.4",
-		"@wordpress/components": "^19.0.3",
+		"@wordpress/components": "^19.0.4",
 		"@wordpress/compose": "^5.0.6",
 		"@wordpress/core-data": "^4.0.7",
 		"@wordpress/data": "^6.1.4",
@@ -52,14 +52,14 @@
 		"@wordpress/html-entities": "^3.2.3",
 		"@wordpress/i18n": "^4.2.4",
 		"@wordpress/icons": "^6.1.1",
-		"@wordpress/interface": "^4.1.5",
+		"@wordpress/interface": "^4.1.6",
 		"@wordpress/is-shallow-equal": "^4.2.1",
 		"@wordpress/keycodes": "^3.2.4",
 		"@wordpress/notices": "^3.2.7",
 		"@wordpress/primitives": "^3.0.4",
-		"@wordpress/reusable-blocks": "^3.0.9",
+		"@wordpress/reusable-blocks": "^3.0.10",
 		"@wordpress/rich-text": "^5.0.6",
-		"@wordpress/server-side-render": "^3.0.7",
+		"@wordpress/server-side-render": "^3.0.8",
 		"@wordpress/url": "^3.3.1",
 		"@wordpress/viewport": "^4.0.6",
 		"classnames": "^2.3.1",
@@ -73,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c6594e767659bd3289e633a17c44fdf6a4933194"
+	"gitHead": "ca22e8852fcc91889510e417bdaa180ad60f8dac"
 }

package/src/calendar/index.php

@@ -19,7 +19,7 @@ function render_block_core_calendar( $attributes ) {
 	// when there are no published posts on the site.
 	if ( ! block_core_calendar_has_published_posts() ) {
 		if ( is_user_logged_in() ) {
-			return '<div>' . __( 'The calendar block is hidden because there are no published posts.', 'gutenberg' ) . '</div>';
+			return '<div>' . __( 'The calendar block is hidden because there are no published posts.' ) . '</div>';
 		}
 		return '';
 	}

package/src/code/theme.scss

@@ -1,4 +1,4 @@
-.wp-block-code {
+.wp-block-code > code {
 	font-family: $editor-html-font;
 	color: $gray-900;
 	padding: 0.8em 1em;

package/src/cover/style.scss

@@ -43,16 +43,23 @@
 	 *   - Issue with background color specificity: https://github.com/WordPress/gutenberg/issues/26545
 	 *   - Issue with alternative fix: https://github.com/WordPress/gutenberg/issues/26545
 	 */
-	&.has-background-dim:not([class*="-background-color"]) {
+
+	// the first selector is required for old Cover markup
+	&.has-background-dim:not([class*="-background-color"]),
+	.has-background-dim:not([class*="-background-color"]) {
 		background-color: $black;
 	}
 
-	&.has-background-dim::before {
+	// the first selector is required for old Cover markup
+	&.has-background-dim::before,
+	.has-background-dim::before {
 		content: "";
 		background-color: inherit;
 	}
 
+	// the first selector is required for old Cover markup
 	&.has-background-dim:not(.has-background-gradient)::before,
+	.has-background-dim:not(.has-background-gradient)::before,
 	.wp-block-cover__gradient-background {
 		position: absolute;
 		top: 0;

package/src/cover/transforms.js

@@ -17,6 +17,7 @@ const transforms = {
 				createBlock(
 					'core/cover',
 					{
+						dimRatio: 50,
 						url,
 						alt,
 						align,
@@ -43,6 +44,7 @@ const transforms = {
 				createBlock(
 					'core/cover',
 					{
+						dimRatio: 50,
 						url: src,
 						align,
 						id,

package/src/gallery/index.php

@@ -2,7 +2,7 @@
 /**
  * Server-side rendering of the `core/image` block.
  *
- * @package gutenberg
+ * @package WordPress
  */
 
 /**

package/src/home-link/index.php

@@ -2,7 +2,7 @@
 /**
  * Server-side rendering of the `core/home-link` block.
  *
- * @package gutenberg
+ * @package WordPress
  */
 
 /**

package/src/image/index.php

@@ -2,7 +2,7 @@
 /**
  * Server-side rendering of the `core/image` block.
  *
- * @package gutenberg
+ * @package WordPress
  */
 
 /**

package/src/navigation/edit/index.js

@@ -212,6 +212,29 @@ function Navigation( {
 		},
 	} );
 
+	const overlayClassnames = classnames( {
+		'has-text-color':
+			!! overlayTextColor.color || !! overlayTextColor?.class,
+		[ getColorClassName(
+			'color',
+			overlayTextColor?.slug
+		) ]: !! overlayTextColor?.slug,
+		'has-background':
+			!! overlayBackgroundColor.color || overlayBackgroundColor?.class,
+		[ getColorClassName(
+			'background-color',
+			overlayBackgroundColor?.slug
+		) ]: !! overlayBackgroundColor?.slug,
+	} );
+
+	const overlayStyles = {
+		color: ! overlayTextColor?.slug && overlayTextColor?.color,
+		backgroundColor:
+			! overlayBackgroundColor?.slug &&
+			overlayBackgroundColor?.color &&
+			overlayBackgroundColor.color,
+	};
+
 	// Turn on contrast checker for web only since it's not supported on mobile yet.
 	const enableContrastChecking = Platform.OS === 'web';
 
@@ -494,6 +517,8 @@ function Navigation( {
 							isOpen={ isResponsiveMenuOpen }
 							isResponsive={ 'never' !== overlayMenu }
 							isHiddenByDefault={ 'always' === overlayMenu }
+							classNames={ overlayClassnames }
+							styles={ overlayStyles }
 						>
 							{ isEntityAvailable && (
 								<NavigationInnerBlocks

package/src/navigation/edit/inner-blocks.js

@@ -81,7 +81,8 @@ export default function NavigationInnerBlocks( {
 			blocks.every(
 				( { name } ) =>
 					name === 'core/navigation-link' ||
-					name === 'core/navigation-submenu'
+					name === 'core/navigation-submenu' ||
+					name === 'core/page-list'
 			),
 		[ blocks ]
 	);

package/src/navigation/edit/responsive-wrapper.js

@@ -18,12 +18,15 @@ export default function ResponsiveWrapper( {
 	isResponsive,
 	onToggle,
 	isHiddenByDefault,
+	classNames,
+	styles,
 } ) {
 	if ( ! isResponsive ) {
 		return children;
 	}
 	const responsiveContainerClasses = classnames(
 		'wp-block-navigation__responsive-container',
+		classNames,
 		{
 			'is-menu-open': isOpen,
 			'hidden-by-default': isHiddenByDefault,
@@ -61,7 +64,11 @@ export default function ResponsiveWrapper( {
 				</Button>
 			) }
 
-			<div className={ responsiveContainerClasses } id={ modalId }>
+			<div
+				className={ responsiveContainerClasses }
+				style={ styles }
+				id={ modalId }
+			>
 				<div
 					className="wp-block-navigation__responsive-close"
 					tabIndex="-1"

package/src/navigation/index.php

@@ -2,7 +2,7 @@
 /**
  * Server-side rendering of the `core/navigation` block.
  *
- * @package gutenberg
+ * @package WordPress
  */
 
 /**
@@ -14,8 +14,10 @@
  */
 function block_core_navigation_build_css_colors( $attributes ) {
 	$colors = array(
-		'css_classes'   => array(),
-		'inline_styles' => '',
+		'css_classes'           => array(),
+		'inline_styles'         => '',
+		'overlay_css_classes'   => array(),
+		'overlay_inline_styles' => '',
 	);
 
 	// Text color.
@@ -54,6 +56,42 @@ function block_core_navigation_build_css_colors( $attributes ) {
 		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $attributes['customBackgroundColor'] );
 	}
 
+	// Overlay text color.
+	$has_named_overlay_text_color  = array_key_exists( 'overlayTextColor', $attributes );
+	$has_custom_overlay_text_color = array_key_exists( 'customOverlayTextColor', $attributes );
+
+	// If has overlay text color.
+	if ( $has_custom_overlay_text_color || $has_named_overlay_text_color ) {
+		// Add has-text-color class.
+		$colors['overlay_css_classes'][] = 'has-text-color';
+	}
+
+	if ( $has_named_overlay_text_color ) {
+		// Add the overlay color class.
+		$colors['overlay_css_classes'][] = sprintf( 'has-%s-color', $attributes['overlayTextColor'] );
+	} elseif ( $has_custom_overlay_text_color ) {
+		// Add the custom overlay color inline style.
+		$colors['overlay_inline_styles'] .= sprintf( 'color: %s;', $attributes['customOverlayTextColor'] );
+	}
+
+	// Overlay background color.
+	$has_named_overlay_background_color  = array_key_exists( 'overlayBackgroundColor', $attributes );
+	$has_custom_overlay_background_color = array_key_exists( 'customOverlayBackgroundColor', $attributes );
+
+	// If has overlay background color.
+	if ( $has_custom_overlay_background_color || $has_named_overlay_background_color ) {
+		// Add has-background class.
+		$colors['overlay_css_classes'][] = 'has-background';
+	}
+
+	if ( $has_named_overlay_background_color ) {
+		// Add the overlay background-color class.
+		$colors['overlay_css_classes'][] = sprintf( 'has-%s-background-color', $attributes['overlayBackgroundColor'] );
+	} elseif ( $has_custom_overlay_background_color ) {
+		// Add the custom overlay background-color inline style.
+		$colors['overlay_inline_styles'] .= sprintf( 'background-color: %s;', $attributes['customOverlayBackgroundColor'] );
+	}
+
 	return $colors;
 }
 
@@ -247,6 +285,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$responsive_container_classes = array(
 		'wp-block-navigation__responsive-container',
 		$is_hidden_by_default ? 'hidden-by-default' : '',
+		implode( ' ', $colors['overlay_css_classes'] ),
 	);
 	$open_button_classes          = array(
 		'wp-block-navigation__responsive-container-open',
@@ -255,7 +294,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	$responsive_container_markup = sprintf(
 		'<button aria-expanded="false" aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="modal-%1$s"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg></button>
-			<div class="%5$s" id="modal-%1$s">
+			<div class="%5$s" style="%7$s" id="modal-%1$s">
 				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 					<div class="wp-block-navigation__responsive-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-%1$s-title" >
 							<button aria-label="%4$s" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
@@ -270,7 +309,8 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		__( 'Open menu' ), // Open button label.
 		__( 'Close menu' ), // Close button label.
 		implode( ' ', $responsive_container_classes ),
-		implode( ' ', $open_button_classes )
+		implode( ' ', $open_button_classes ),
+		$colors['overlay_inline_styles']
 	);
 
 	return sprintf(