Add paragraph drop cap style configuration (#3436)

* Add paragraph drop cap style configuration

Co-authored-by: Jeff Ong <jonger4@gmail.com>

blank-canvas-blocks/assets/ponyfill.css

@@ -301,6 +301,13 @@ p.has-text-color a {
 	color: var(--wp--style--color--link, var(--wp--custom--color--primary));
 }
 
+p.has-drop-cap:not(:focus):first-letter {
+	font-size: var(--wp--custom--paragraph--dropcap--typography--font-size);
+	font-family: var(--wp--custom--paragraph--dropcap--typography--font-family);
+	font-weight: var(--wp--custom--paragraph--dropcap--typography--font-weight);
+	margin: var(--wp--custom--paragraph--dropcap--margin);
+}
+
 .wp-block-navigation a {
 	border-bottom: none;
 }

blank-canvas-blocks/experimental-theme.json

@@ -129,6 +129,16 @@
 						"boxShadow": "none"
 					}
 				},
+				"paragraph": {
+					"dropcap": {
+						"margin": ".1em .1em 0 0",
+						"typography": {
+							"fontFamily": "var(--wp--preset--font-family--base)",
+							"fontSize": "110px",
+							"fontWeight": "400"
+						}
+					}
+				},
 				"quote": {
 					"border": {
 						"color": "var(--wp--custom--color--secondary)",

blank-canvas-blocks/sass/blocks/_paragraph.scss

@@ -9,4 +9,11 @@ p {
 	&.has-text-color a {
 		color: var( --wp--style--color--link, var(--wp--custom--color--primary) );
 	}
+
+	&.has-drop-cap:not(:focus):first-letter {
+		font-size: var(--wp--custom--paragraph--dropcap--typography--font-size);
+		font-family: var(--wp--custom--paragraph--dropcap--typography--font-family);
+		font-weight: var(--wp--custom--paragraph--dropcap--typography--font-weight);
+		margin: var(--wp--custom--paragraph--dropcap--margin);
+	}
 }