Merge pull request #3708 from Automattic/add/quadrat-blockquote-styles

Quadrat: Add Quote block styles
Automattic · Apr 27, 2021 · 4241640 · 4241640
2 parents d389a7b + 22ee49b
commit 4241640
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 10 deletions.
diff --git a/quadrat/assets/theme.css b/quadrat/assets/theme.css
diff --git a/quadrat/child-experimental-theme.json b/quadrat/child-experimental-theme.json
@@ -25,6 +25,11 @@
  "customFontSize": true,
  "customLineHeight": true,
  "fontSizes": [
+ {
+ "name": "Tiny",
+ "size": "15px",
+ "slug": "tiny"
+ },
  {
  "name": "Small",
  "size": "17px",
@@ -211,12 +216,22 @@
  "core/quote": {
  "typography": {
  "fontWeight": "normal",
- "fontStyle": "normal"
+ "fontSize": "25px",
+ "lineHeight": "40px"
+ },
+ "spacing": {
+ "padding": {
+ "left": "calc( var(--wp--custom--margin--horizontal) * 3 )"
+ }
+ },
+ "citation": {
+ "typography": {
+ "fontWeight": "300",
+ "fontSize": "15px"
+ }
  },
  "border": {
- "color": "var(--wp--custom--color--primary)",
- "style": "solid",
- "width": "0 0 0 2px"
+ "width": "0px"
  }
  }
  }

diff --git a/quadrat/experimental-theme.json b/quadrat/experimental-theme.json
@@ -39,6 +39,11 @@
  "customFontSize": true,
  "customLineHeight": true,
  "fontSizes": [
+ {
+ "name": "Tiny",
+ "size": "15px",
+ "slug": "tiny"
+ },
  {
  "name": "Small",
  "size": "17px",
@@ -441,18 +446,25 @@
  },
  "core/quote": {
  "typography": {
- "fontSize": "var(--wp--preset--font-size--normal)",
+ "fontSize": "25px",
  "fontStyle": "normal",
- "fontWeight": "normal"
+ "fontWeight": "normal",
+ "lineHeight": "40px"
  },
  "border": {
  "color": "var(--wp--custom--color--primary)",
  "style": "solid",
- "width": "0 0 0 2px"
+ "width": "0px 0px 0px"
  },
  "spacing": {
  "padding": {
- "left": "var(--wp--custom--margin--horizontal)"
+ "left": "calc( var(--wp--custom--margin--horizontal) * 3 )"
+ }
+ },
+ "citation": {
+ "typography": {
+ "fontWeight": "300",
+ "fontSize": "15px"
  }
  }
  },

diff --git a/quadrat/sass/theme.scss b/quadrat/sass/theme.scss
@@ -1,3 +1,4 @@
-@import '../../blank-canvas-blocks/sass/base/breakpoints'; // Get the mobile-only media query and make it available to this theme's styles
-@import 'blocks/media-text';
+@import "../../blank-canvas-blocks/sass/base/breakpoints"; // Get the mobile-only media query and make it available to this theme's styles
+@import "blocks/media-text";
+@import "blocks/quote";
 @import "utility";