@wordpress/block-library 8.3.6 → 8.5.0

package/src/comments-pagination-numbers/block.json

@@ -9,6 +9,7 @@
 	"textdomain": "default",
 	"usesContext": [ "postId" ],
 	"supports": {
+		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {

package/src/comments-pagination-previous/block.json

@@ -14,6 +14,7 @@
 	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
+		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {

package/src/comments-title/edit.js

@@ -110,6 +110,7 @@ export default function Edit( {
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Show post title' ) }
 					checked={ showPostTitle }
 					onChange={ ( value ) =>
@@ -117,6 +118,7 @@ export default function Edit( {
 					}
 				/>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Show comments count' ) }
 					checked={ showCommentsCount }
 					onChange={ ( value ) =>

package/src/cover/edit/inspector-controls.js

@@ -171,12 +171,14 @@ export default function CoverInspectorControls( {
 						{ isImageBackground && (
 							<>
 								<ToggleControl
+									__nextHasNoMarginBottom
 									label={ __( 'Fixed background' ) }
 									checked={ hasParallax }
 									onChange={ toggleParallax }
 								/>
 
 								<ToggleControl
+									__nextHasNoMarginBottom
 									label={ __( 'Repeated background' ) }
 									checked={ isRepeated }
 									onChange={ toggleIsRepeated }

package/src/cover/index.php

@@ -56,12 +56,10 @@ function render_block_core_cover( $attributes, $content ) {
 			$styles .= $height;
 		}
 
-		$content = preg_replace(
-			'/class=\".*?\"/',
-			'${0} style="' . $styles . '"',
-			$content,
-			1
-		);
+		$processor = new WP_HTML_Tag_Processor( $content );
+		$processor->next_tag();
+		$processor->set_attribute( 'style', $styles );
+		$content = $processor->get_updated_html();
 	}
 
 	return $content;

package/src/cover/test/__snapshots__/edit.native.js.snap

@@ -1,97 +1,97 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`color settings clears the selected overlay color and mantains the inner blocks 1`] = `
-"<!-- wp:cover {\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
-<p class=\\"has-text-align-center\\"></p>
+"<!-- wp:cover {"isDark":false} -->
+<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
+<p class="has-text-align-center"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`color settings sets a color for the overlay background when the placeholder is visible 1`] = `
-"<!-- wp:cover {\\"overlayColor\\":\\"vivid-red\\"} -->
-<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-vivid-red-background-color has-background-dim-100 has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
-<p class=\\"has-text-align-center\\"></p>
+"<!-- wp:cover {"overlayColor":"vivid-red"} -->
+<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-vivid-red-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
+<p class="has-text-align-center"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`color settings sets a gradient overlay background when a solid background was already selected 1`] = `
-"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
-<p class=\\"has-text-align-center\\"></p>
+"<!-- wp:cover {"gradient":"light-green-cyan-to-vivid-green-cyan","isDark":false} -->
+<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
+<p class="has-text-align-center"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`color settings toggles between solid colors and gradients 1`] = `
-"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
-<p class=\\"has-text-align-center\\"></p>
+"<!-- wp:cover {"gradient":"light-green-cyan-to-vivid-green-cyan","isDark":false} -->
+<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
+<p class="has-text-align-center"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`minimum height settings changes the height value between units 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":50,\\"minHeightUnit\\":\\"px\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:50px\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-text-align-center has-large-font-size\\"></p>
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":50,"minHeightUnit":"px","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:50px"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`minimum height settings changes the height value to 20(vw) 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":20,\\"minHeightUnit\\":\\"vw\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:20vw\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-text-align-center has-large-font-size\\"></p>
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":20,"minHeightUnit":"vw","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:20vw"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`minimum height settings disables the decrease button when reaching the minimum value for Pixels (px) 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":50,\\"minHeightUnit\\":\\"px\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:50px\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-text-align-center has-large-font-size\\"></p>
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":50,"minHeightUnit":"px","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:50px"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`minimum height settings disables the decrease button when reaching the minimum value for Relative to parent font size (em) 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":1,\\"minHeightUnit\\":\\"em\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:1em\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-text-align-center has-large-font-size\\"></p>
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":1,"minHeightUnit":"em","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:1em"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`minimum height settings disables the decrease button when reaching the minimum value for Relative to root font size (rem) 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":1,\\"minHeightUnit\\":\\"rem\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:1rem\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-text-align-center has-large-font-size\\"></p>
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":1,"minHeightUnit":"rem","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:1rem"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`minimum height settings disables the decrease button when reaching the minimum value for Viewport height (vh) 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":1,\\"minHeightUnit\\":\\"vh\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:1vh\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-text-align-center has-large-font-size\\"></p>
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":1,"minHeightUnit":"vh","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:1vh"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`minimum height settings disables the decrease button when reaching the minimum value for Viewport width (vw) 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":1,\\"minHeightUnit\\":\\"vw\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:1vw\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-text-align-center has-large-font-size\\"></p>
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":1,"minHeightUnit":"vw","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:1vw"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`when an image is attached updates background opacity 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":15,\\"overlayColor\\":\\"foreground\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim-20 has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-text-align-center has-large-font-size\\"></p>
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":15,"overlayColor":"foreground","isDark":false} -->
+<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim-20 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;

package/src/embed/embed-controls.js

@@ -49,6 +49,7 @@ const EmbedControls = ( {
 					className="blocks-responsive"
 				>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Resize for smaller devices' ) }
 						checked={ allowResponsive }
 						help={ getResponsiveHelp }

package/src/embed/test/__snapshots__/index.native.js.snap

@@ -1,56 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Embed block alignment options sets Align center option 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true,\\"align\\":\\"center\\"} -->
-<figure class=\\"wp-block-embed aligncenter is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true,"align":"center"} -->
+<figure class="wp-block-embed aligncenter is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block alignment options sets Align left option 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true,\\"align\\":\\"left\\"} -->
-<figure class=\\"wp-block-embed alignleft is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true,"align":"left"} -->
+<figure class="wp-block-embed alignleft is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block alignment options sets Align right option 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true,\\"align\\":\\"right\\"} -->
-<figure class=\\"wp-block-embed alignright is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true,"align":"right"} -->
+<figure class="wp-block-embed alignright is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block alignment options sets Full width option 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true,\\"align\\":\\"full\\"} -->
-<figure class=\\"wp-block-embed alignfull is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true,"align":"full"} -->
+<figure class="wp-block-embed alignfull is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block alignment options sets Wide width option 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true,\\"align\\":\\"wide\\"} -->
-<figure class=\\"wp-block-embed alignwide is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true,"align":"wide"} -->
+<figure class="wp-block-embed alignwide is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block block settings toggles resize for smaller devices media settings 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"allowResponsive\\":false,\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","allowResponsive":false,"responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block create by pasting URL creates embed block when pasting URL in paragraph block 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://www.youtube.com/watch?v=lXMskKTw3Bc\\",\\"type\\":\\"video\\",\\"providerNameSlug\\":\\"youtube\\",\\"responsive\\":true,\\"className\\":\\"wp-embed-aspect-16-9 wp-has-aspect-ratio\\"} -->
-<figure class=\\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://www.youtube.com/watch?v=lXMskKTw3Bc","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
+<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
 https://www.youtube.com/watch?v=lXMskKTw3Bc
 </div></figure>
 <!-- /wp:embed -->"
@@ -58,75 +58,75 @@ https://www.youtube.com/watch?v=lXMskKTw3Bc
 
 exports[`Embed block create by pasting URL creates link when pasting URL in paragraph block 1`] = `
 "<!-- wp:paragraph -->
-<p><a href=\\"https://www.youtube.com/watch?v=lXMskKTw3Bc\\">https://www.youtube.com/watch?v=lXMskKTw3Bc</a></p>
+<p><a href="https://www.youtube.com/watch?v=lXMskKTw3Bc">https://www.youtube.com/watch?v=lXMskKTw3Bc</a></p>
 <!-- /wp:paragraph -->"
 `;
 
 exports[`Embed block displays cannot embed on the placeholder if preview data is null 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/testing\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/testing","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/testing
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block edit URL edits URL when edited after setting a bad URL of a provider 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block edit URL keeps the previous URL if an invalid URL is set 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block edit URL keeps the previous URL if no URL is set 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block edit URL replaces URL 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://www.youtube.com/watch?v=lXMskKTw3Bc\\",\\"type\\":\\"video\\",\\"providerNameSlug\\":\\"youtube\\",\\"responsive\\":true,\\"className\\":\\"wp-embed-aspect-16-9 wp-has-aspect-ratio\\"} -->
-<figure class=\\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://www.youtube.com/watch?v=lXMskKTw3Bc","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
+<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
 https://www.youtube.com/watch?v=lXMskKTw3Bc
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
-exports[`Embed block edit URL sets empty state when setting an empty URL 1`] = `"<!-- wp:embed {\\"url\\":\\"\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block edit URL sets empty state when setting an empty URL 1`] = `"<!-- wp:embed {"url":"","type":"rich","providerNameSlug":"twitter","responsive":true} /-->"`;
 
 exports[`Embed block insert via slash inserter insert generic embed block 1`] = `"<!-- wp:embed /-->"`;
 
-exports[`Embed block insert via slash inserter inserts Twitter embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block insert via slash inserter inserts Twitter embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"twitter","responsive":true} /-->"`;
 
-exports[`Embed block insert via slash inserter inserts Vimeo embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"vimeo\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block insert via slash inserter inserts Vimeo embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"vimeo","responsive":true} /-->"`;
 
-exports[`Embed block insert via slash inserter inserts WordPress embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"wordpress\\"} /-->"`;
+exports[`Embed block insert via slash inserter inserts WordPress embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"wordpress"} /-->"`;
 
-exports[`Embed block insert via slash inserter inserts YouTube embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"youtube\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block insert via slash inserter inserts YouTube embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"youtube","responsive":true} /-->"`;
 
-exports[`Embed block insertion inserts Twitter embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block insertion inserts Twitter embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"twitter","responsive":true} /-->"`;
 
-exports[`Embed block insertion inserts Vimeo embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"vimeo\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block insertion inserts Vimeo embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"vimeo","responsive":true} /-->"`;
 
-exports[`Embed block insertion inserts WordPress embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"wordpress\\"} /-->"`;
+exports[`Embed block insertion inserts WordPress embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"wordpress"} /-->"`;
 
-exports[`Embed block insertion inserts YouTube embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"youtube\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block insertion inserts YouTube embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"youtube","responsive":true} /-->"`;
 
 exports[`Embed block insertion inserts generic embed block 1`] = `"<!-- wp:embed /-->"`;
 
 exports[`Embed block retry allows editing link if request failed 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\"} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter"} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
@@ -134,58 +134,58 @@ https://twitter.com/notnownikki
 
 exports[`Embed block retry converts to link if preview request failed 1`] = `
 "<!-- wp:paragraph -->
-<p><a href=\\"https://twitter.com/notnownikki\\">https://twitter.com/notnownikki</a></p>
+<p><a href="https://twitter.com/notnownikki">https://twitter.com/notnownikki</a></p>
 <!-- /wp:paragraph -->"
 `;
 
 exports[`Embed block retry retries loading the preview if initial request failed 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block set URL upon block insertion auto-pastes the URL from clipboard 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block set URL upon block insertion sets a valid URL when dismissing edit URL modal 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
-exports[`Embed block set URL upon block insertion sets empty URL when dismissing edit URL modal 1`] = `"<!-- wp:embed {\\"url\\":\\"\\"} /-->"`;
+exports[`Embed block set URL upon block insertion sets empty URL when dismissing edit URL modal 1`] = `"<!-- wp:embed {"url":""} /-->"`;
 
 exports[`Embed block set URL when empty block auto-pastes the URL from clipboard 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block set URL when empty block sets a valid URL when dismissing edit URL modal 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
-exports[`Embed block set URL when empty block sets empty URL when dismissing edit URL modal 1`] = `"<!-- wp:embed {\\"url\\":\\"\\"} /-->"`;
+exports[`Embed block set URL when empty block sets empty URL when dismissing edit URL modal 1`] = `"<!-- wp:embed {"url":""} /-->"`;
 
 exports[`Embed block sets block caption 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
-</div><figcaption class=\\"wp-element-caption\\">Caption</figcaption></figure>
+</div><figcaption class="wp-element-caption">Caption</figcaption></figure>
 <!-- /wp:embed -->"
 `;

package/src/file/block.json

@@ -56,7 +56,16 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": true
+		"align": true,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"link": true
+			}
+		}
 	},
 	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-file-editor",

package/src/file/inspector.js

@@ -43,6 +43,7 @@ export default function FileBlockInspector( {
 				{ href.endsWith( '.pdf' ) && (
 					<PanelBody title={ __( 'PDF settings' ) }>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show inline embed' ) }
 							help={
 								displayPreview
@@ -78,11 +79,13 @@ export default function FileBlockInspector( {
 						onChange={ changeLinkDestinationOption }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Open in new tab' ) }
 						checked={ openInNewWindow }
 						onChange={ changeOpenInNewWindow }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show download button' ) }
 						checked={ showDownloadButton }
 						onChange={ changeShowDownloadButton }

package/src/file/style.scss

@@ -27,6 +27,7 @@
 :where(.wp-block-file__button) {
 	border-radius: 2em;
 	padding: 0.5em 1em;
+	display: inline-block;
 
 	&:is(a) {