Add block styles for padding

This way we don't have a ton of wrapper elements just for a bit of padding.
greenpeace · Apr 20, 2022 · dca5e5e · dca5e5e
1 parent 1eac73c
commit dca5e5e
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/admin/js/editor.js b/admin/js/editor.js
@@ -32,4 +32,20 @@ wp.domReady(() => {
   ];
 
   registerBlockStyle('core/button', styles);
+
+  const coreBlocks = ['core/media-text', 'core/group', 'core/column'];
+  coreBlocks.forEach(block => {
+    registerBlockStyle(block, {
+      name: 'small-padding',
+      label: 'Small padding',
+    });
+    registerBlockStyle(block, {
+      name: 'medium-padding',
+      label: 'Medium padding',
+    });
+    registerBlockStyle(block, {
+      name: 'large-padding',
+      label: 'Large padding',
+    });
+  });
 });
diff --git a/assets/src/styles/blocks.scss b/assets/src/styles/blocks.scss
@@ -32,3 +32,18 @@
 // Other
 @import "blocks/WideBlocks";
 @import "blocks/Editor";
+
+.is-style-small-padding {
+  padding: 8px;
+  align-self: stretch;
+}
+
+.is-style-medium-padding {
+  padding: 16px;
+  align-self: stretch;
+}
+
+.is-style-large-padding {
+  padding: 32px;
+  align-self: stretch;
+}