[Mobile] - Fix Quote Block styles (#60476)

* Quote Block - Set tagName for mobile * Mobile - BlockQuotation - Add attributeKey as a fallback indentifier and update styling * Update test data * Update Changelog
WordPress · Apr 10, 2024 · 1837f1a · 1837f1a
1 parent c4c3af1
commit 1837f1a
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 11 deletions.
diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js
@@ -106,7 +106,7 @@ export default function QuoteEdit( {
 				{ innerBlocksProps.children }
 				<Caption
 					attributeKey="citation"
-					tagName={ isWebPlatform ? 'cite' : undefined }
+					tagName={ isWebPlatform ? 'cite' : 'p' }
 					style={ isWebPlatform && { display: 'block' } }
 					isSelected={ isSelected }
 					attributes={ attributes }

diff --git a/packages/primitives/src/block-quotation/index.native.js b/packages/primitives/src/block-quotation/index.native.js
@@ -32,7 +32,10 @@ export const BlockQuotation = forwardRef( ( { ...props }, ref ) => {
 	const colorStyle = style?.color ? { color: style.color } : {};
 
 	const newChildren = Children.map( props.children, ( child ) => {
-		if ( child && child.props.identifier === 'citation' ) {
+		const { identifier, attributeKey } = child?.props || {};
+		const identifierKey = identifier ?? attributeKey;
+
+		if ( identifierKey === 'citation' ) {
 			return cloneElement( child, {
 				style: {
 					...styles.wpBlockQuoteCitation,

diff --git a/packages/primitives/src/block-quotation/style.native.scss b/packages/primitives/src/block-quotation/style.native.scss
@@ -2,7 +2,6 @@
 	border-left-width: 4px;
 	border-left-style: solid;
 	padding-left: $block-edge-to-content;
-	padding-top: $dashed-border-space;
 	margin-left: 0;
 }
 

diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
@@ -10,7 +10,8 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
--   [*] Add empty fallback option for the BottomSheetSelectControl component
+-   [*] Add empty fallback option for the BottomSheetSelectControl component [#60333]
+-   [*] Fix Quote Block styles [#60476]
 
 ## 1.116.0
 -   [**] Highlight color formatting style improvements [#57650]

diff --git a/packages/react-native-editor/__device-tests__/helpers/test-data.js b/packages/react-native-editor/__device-tests__/helpers/test-data.js
@@ -186,29 +186,29 @@ exports.spacerBlock = `<!-- wp:spacer -->
 
 exports.galleryBlock = `<!-- wp:gallery {"columns":8,"linkTo":"none","className":"alignfull"} -->
 <figure class="wp-block-gallery has-nested-images columns-8 is-cropped alignfull"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon.png" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://cldup.com/njpygC0aF7.png"" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
 <!-- /wp:image -->
 <!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Heading.png" alt=""/><figcaption class="wp-element-caption">Heading</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://cldup.com/HOeupVqCwe.png" alt=""/><figcaption class="wp-element-caption">Heading</figcaption></figure>
 <!-- /wp:image -->
 <!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Subheading.png" alt=""/><figcaption class="wp-element-caption">Subheading</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://cldup.com/s-OlAVlGJS.png" alt=""/><figcaption class="wp-element-caption">Image</figcaption></figure>
 <!-- /wp:image -->
 <!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Quote.png" alt=""/><figcaption class="wp-element-caption">Quote</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://cldup.com/aBnr4SymR1.png" alt=""/><figcaption class="wp-element-caption">Cover</figcaption></figure>
 <!-- /wp:image -->
 <!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Image.png" alt=""/><figcaption class="wp-element-caption">Image</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://cldup.com/aDIyKHI6Up.png" alt=""/><figcaption class="wp-element-caption">Video</figcaption></figure>
 <!-- /wp:image -->
 </figure>
 <!-- /wp:gallery -->`;
 
 exports.galleryBlockTwoImages = `<!-- wp:gallery {"columns":8,"linkTo":"none","className":"alignfull"} -->
 <figure class="wp-block-gallery has-nested-images columns-8 is-cropped alignfull"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon.png" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://cldup.com/njpygC0aF7.png" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
 <!-- /wp:image -->
 <!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Heading.png" alt=""/><figcaption class="wp-element-caption">Heading</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://cldup.com/s-OlAVlGJS.png" alt=""/><figcaption class="wp-element-caption">Image</figcaption></figure>
 <!-- /wp:image -->
 </figure>
 <!-- /wp:gallery -->`;