Update RichText usage in Quote and Pullquote blocks to use div instea…

…d of inline cite elements (#8785)
WordPress · Sep 10, 2018 · 47cd11f · 47cd11f
1 parent 2fa3d3d
commit 47cd11f
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 10 deletions.
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;