Block CSS: Move CSS from the stylesheet to the block definition (#41689)

WordPress · Jun 13, 2022 · 0bf2650 · 0bf2650
1 parent 6402921
commit 0bf2650
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 12 deletions.
diff --git a/packages/block-library/src/audio/block.json b/packages/block-library/src/audio/block.json
@@ -43,7 +43,12 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": true
+		"align": true,
+		"__experimentalStyle": {
+			"spacing": {
+				"margin": "0 0 1em 0"
+			}
+		}
 	},
 	"editorStyle": "wp-block-audio-editor",
 	"style": "wp-block-audio"

diff --git a/packages/block-library/src/audio/style.scss b/packages/block-library/src/audio/style.scss
@@ -1,6 +1,4 @@
 .wp-block-audio {
-	margin: 0 0 1em 0;
-
 	// Supply caption styles to audio blocks, even if the theme hasn't opted in.
 	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those themes.

diff --git a/packages/block-library/src/embed/block.json b/packages/block-library/src/embed/block.json
@@ -35,7 +35,12 @@
 		}
 	},
 	"supports": {
-		"align": true
+		"align": true,
+		"__experimentalStyle": {
+			"spacing": {
+				"margin": "0 0 1em 0"
+			}
+		}
 	},
 	"editorStyle": "wp-block-embed-editor",
 	"style": "wp-block-embed"

diff --git a/packages/block-library/src/embed/style.scss b/packages/block-library/src/embed/style.scss
@@ -20,7 +20,6 @@
 }
 
 .wp-block-embed {
-	margin: 0 0 1em 0;
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 
 	// Supply caption styles to embeds, even if the theme hasn't opted in.

diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
@@ -88,6 +88,11 @@
 			"__experimentalDefaultControls": {
 				"radius": true
 			}
+		},
+		"__experimentalStyle": {
+			"spacing": {
+				"margin": "0 0 1em 0"
+			}
 		}
 	},
 	"styles": [

diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
@@ -1,6 +1,4 @@
 .wp-block-image {
-	margin: 0 0 1em 0;
-
 	img {
 		height: auto;
 		max-width: 100%;

diff --git a/packages/block-library/src/table/block.json b/packages/block-library/src/table/block.json
@@ -156,7 +156,12 @@
 				"width": true
 			}
 		},
-		"__experimentalSelector": ".wp-block-table > table"
+		"__experimentalSelector": ".wp-block-table > table",
+		"__experimentalStyle": {
+			"spacing": {
+				"margin": "0 0 1em 0"
+			}
+		}
 	},
 	"styles": [
 		{

diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss
@@ -1,5 +1,4 @@
 .wp-block-table {
-	margin: 0 0 1em 0;
 	$subtle-light-gray: #f3f4f5;
 	$subtle-pale-green: #e9fbe5;
 	$subtle-pale-blue: #e7f5fe;

diff --git a/packages/block-library/src/video/block.json b/packages/block-library/src/video/block.json
@@ -76,7 +76,12 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": true
+		"align": true,
+		"__experimentalStyle": {
+			"spacing": {
+				"margin": "0 0 1em 0"
+			}
+		}
 	},
 	"editorStyle": "wp-block-video-editor",
 	"style": "wp-block-video"

diff --git a/packages/block-library/src/video/style.scss b/packages/block-library/src/video/style.scss
@@ -1,6 +1,4 @@
 .wp-block-video {
-	margin: 0 0 1em 0;
-
 	video {
 		width: 100%;
 	}