Convert "pullquote" design to feel more like a real pullquote. (#2404)

New pullquote design and style cleanup.
WordPress · Aug 15, 2017 · f1d9f67 · f1d9f67
1 parent c29caae
commit f1d9f67
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 10 deletions.
diff --git a/blocks/library/image/editor.scss b/blocks/library/image/editor.scss
@@ -74,8 +74,8 @@
 	}
 }
 
-.editor-visual-editor__block[data-align="right"],
-.editor-visual-editor__block[data-align="left"] {
+.editor-visual-editor__block[data-type="core/image"][data-align="right"],
+.editor-visual-editor__block[data-type="core/image"][data-align="left"] {
 	max-width: none !important;
 	&[data-resized="false"] {
 		max-width: 370px !important;

diff --git a/blocks/library/pullquote/editor.scss b/blocks/library/pullquote/editor.scss
@@ -1,6 +1,18 @@
+.editor-visual-editor__block[data-type="core/pullquote"] {
+	&[data-align="left"],
+	&[data-align="right"] {
+		max-width: 400px;
+
+		& .blocks-pullquote__content .blocks-editable__tinymce[data-is-empty="true"]:before,
+		& .blocks-editable p {
+			font-size: 20px;
+		}
+	}
+}
+
 .wp-block-pullquote {
 	footer .blocks-editable__tinymce[data-is-empty="true"]:before {
-		font-size: 16px;
+		font-size: 14px;
 		font-family: $default-font;
 	}
 
@@ -12,7 +24,8 @@
 
 	& > .blocks-pullquote__content .blocks-editable__tinymce[data-is-empty="true"]:before,
 	& > .blocks-editable p {
-		font-size: 48px;
-		font-weight: bold;
+		font-size: 24px;
+		font-weight: 900;
+		line-height: 1.6;
 	}
 }
diff --git a/blocks/library/pullquote/style.scss b/blocks/library/pullquote/style.scss
@@ -1,21 +1,35 @@
 .wp-block-pullquote {
-	color: $light-gray-900;
-	padding: 2em;
+	border-top: 4px solid $dark-gray-500;
+	border-bottom: 4px solid $dark-gray-500;
+	color: $dark-gray-600;
+	padding: 3em 0;
 	text-align: center;
 
+	&.alignleft,
+	&.alignright {
+		max-width: 400px;
+
+		> p {
+			font-size: 20px;
+		}
+	}
+
 	> p {
 		font-family: $default-font;
-		font-size: 48px;
+		font-size: 24px;
 		font-weight: 900;
+		line-height: 1.6;
 	}
 
 	footer {
-		color: $dark-gray-900;
+		color: $dark-gray-600;
 		position: relative;
+		font-weight: 900;
+		text-transform: uppercase;
+		font-size: 13px;
 	}
 
 	footer p {
-		font-size: 16px;
 		font-family: $default-font;
 	}
 }