Update RichText usage in Quote and Pullquote blocks to use div instead of inline cite elements (#8785)

Nahid F. Mohit · aduth · commit 47cd11fbba48 · 2018-09-10T15:27:39.000-04:00
diff --git a/packages/block-library/src/pullquote/editor.scss b/packages/block-library/src/pullquote/editor.scss
@@ -9,10 +9,6 @@
 }
 
 .wp-block-pullquote {
-	cite {
-		display: block;
-	}
-
 	cite .editor-rich-text__tinymce[data-is-empty="true"]::before {
 		font-size: 14px;
 		font-family: $default-font;
diff --git a/packages/block-library/src/pullquote/index.js b/packages/block-library/src/pullquote/index.js
@@ -70,7 +70,6 @@ export const settings = {
 				/>
 				{ ( ! RichText.isEmpty( citation ) || isSelected ) && (
 					<RichText
-						tagName="cite"
 						value={ citation }
 						/* translators: the individual or entity quoted */
 						placeholder={ __( 'Write citation…' ) }
@@ -79,6 +78,7 @@ export const settings = {
 								citation: nextCitation,
 							} )
 						}
+						className="wp-block-pullquote__citation"
 					/>
 				) }
 			</blockquote>
diff --git a/packages/block-library/src/pullquote/theme.scss b/packages/block-library/src/pullquote/theme.scss
@@ -4,9 +4,11 @@
 	color: $dark-gray-600;
 
 	cite,
-	footer {
+	footer,
+	&__citation {
 		color: $dark-gray-600;
 		text-transform: uppercase;
 		font-size: $default-font-size;
+		font-style: italic;
 	}
 }
diff --git a/packages/block-library/src/quote/editor.scss b/packages/block-library/src/quote/editor.scss
@@ -1,8 +1,7 @@
 .wp-block-quote {
 	margin: 0;
 
-	cite {
-		display: block;
+	&__citation {
 		font-size: $default-font-size;
 	}
 }
diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js
@@ -205,7 +205,6 @@ export const settings = {
 					/>
 					{ ( ! RichText.isEmpty( citation ) || isSelected ) && (
 						<RichText
-							tagName="cite"
 							value={ citation }
 							onChange={
 								( nextCitation ) => setAttributes( {
@@ -214,6 +213,7 @@ export const settings = {
 							}
 							/* translators: the individual or entity quoted */
 							placeholder={ __( 'Write citation…' ) }
+							className="wp-block-quote__citation"
 						/>
 					) }
 				</blockquote>
diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss
@@ -2,7 +2,8 @@
 	margin: 20px 0;
 
 	cite,
-	footer {
+	footer,
+	&__citation {
 		color: $dark-gray-300;
 		font-size: $default-font-size;
 		margin-top: 1em;

Original file line number	Diff line number	Diff line change
`@@ -4,9 +4,11 @@`
`4`	`4`	`color: $dark-gray-600;`
`5`	`5`
`6`	`6`	`cite,`
`7`		`- footer {`
	`7`	`+ footer,`
	`8`	`+ &__citation {`
`8`	`9`	`color: $dark-gray-600;`
`9`	`10`	`text-transform: uppercase;`
`10`	`11`	`font-size: $default-font-size;`
	`12`	`+ font-style: italic;`
`11`	`13`	`}`
`12`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,7 @@`
`1`	`1`	`.wp-block-quote {`
`2`	`2`	`margin: 0;`
`3`	`3`
`4`		`- cite {`
`5`		`- display: block;`
	`4`	`+ &__citation {`
`6`	`5`	`font-size: $default-font-size;`
`7`	`6`	`}`
`8`	`7`	`}`