@wordpress/primitives 3.3.0 → 3.5.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 3.5.0 (2022-04-21)
+
+## 3.4.0 (2022-04-08)
+
 ## 3.3.0 (2022-03-23)
 
 ## 3.2.0 (2022-03-11)

package/build/block-quotation/index.native.js

@@ -26,14 +26,15 @@ var _style = _interopRequireDefault(require("./style.scss"));
 /**
  * Internal dependencies
  */
-const BlockQuotation = (0, _compose.withPreferredColorScheme)(props => {
+const BlockQuotation = (0, _element.forwardRef)((_ref, ref) => {
+  let { ...props
+  } = _ref;
   const {
-    getStylesFromColorScheme,
     style
   } = props;
-  const blockQuoteStyle = [getStylesFromColorScheme(_style.default.wpBlockQuoteLight, _style.default.wpBlockQuoteDark), (style === null || style === void 0 ? void 0 : style.color) && {
+  const blockQuoteStyle = [(0, _compose.usePreferredColorSchemeStyle)(_style.default.wpBlockQuoteLight, _style.default.wpBlockQuoteDark), (style === null || style === void 0 ? void 0 : style.color) && {
     borderLeftColor: style.color
-  }];
+  }, style, (style === null || style === void 0 ? void 0 : style.backgroundColor) && _style.default.paddingWithBackground];
   const colorStyle = style !== null && style !== void 0 && style.color ? {
     color: style.color
   } : {};
@@ -58,6 +59,7 @@ const BlockQuotation = (0, _compose.withPreferredColorScheme)(props => {
   });
 
   return (0, _element.createElement)(_reactNative.View, {
+    ref: ref,
     style: blockQuoteStyle
   }, newChildren);
 });

package/build/block-quotation/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/primitives/src/block-quotation/index.native.js"],"names":["BlockQuotation","props","getStylesFromColorScheme","style","blockQuoteStyle","styles","wpBlockQuoteLight","wpBlockQuoteDark","color","borderLeftColor","colorStyle","newChildren","Children","map","children","child","identifier","wpBlockQuoteCitation","tagsToEliminate"],"mappings":";;;;;;;;;AAOA;;AAJA;;AAKA;;AAIA;;AAZA;AACA;AACA;;AAEA;AACA;AACA;;AAGA;AACA;AACA;AAGO,MAAMA,cAAc,GAAG,uCAA4BC,KAAF,IAAa;AACpE,QAAM;AAAEC,IAAAA,wBAAF;AAA4BC,IAAAA;AAA5B,MAAsCF,KAA5C;AAEA,QAAMG,eAAe,GAAG,CACvBF,wBAAwB,CACvBG,eAAOC,iBADgB,EAEvBD,eAAOE,gBAFgB,CADD,EAKvB,CAAAJ,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEK,KAAP,KAAgB;AACfC,IAAAA,eAAe,EAAEN,KAAK,CAACK;AADR,GALO,CAAxB;AASA,QAAME,UAAU,GAAGP,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEK,KAAP,GAAe;AAAEA,IAAAA,KAAK,EAAEL,KAAK,CAACK;AAAf,GAAf,GAAwC,EAA3D;;AAEA,QAAMG,WAAW,GAAGC,kBAASC,GAAT,CAAcZ,KAAK,CAACa,QAApB,EAAgCC,KAAF,IAAa;AAC9D,QAAKA,KAAK,IAAIA,KAAK,CAACd,KAAN,CAAYe,UAAZ,KAA2B,UAAzC,EAAsD;AACrD,aAAO,2BAAcD,KAAd,EAAqB;AAC3BZ,QAAAA,KAAK,EAAE,EACN,GAAGE,eAAOY,oBADJ;AAEN,aAAGP;AAFG;AADoB,OAArB,CAAP;AAMA;;AACD,QAAKK,KAAK,IAAIA,KAAK,CAACd,KAAN,CAAYe,UAAZ,KAA2B,OAAzC,EAAmD;AAClD,aAAO,2BAAcD,KAAd,EAAqB;AAC3BG,QAAAA,eAAe,EAAE,CAAE,KAAF,CADU;AAE3Bf,QAAAA,KAAK,EAAEO;AAFoB,OAArB,CAAP;AAIA;;AACD,WAAOK,KAAP;AACA,GAhBmB,CAApB;;AAiBA,SAAO,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGX;AAAd,KAAkCO,WAAlC,CAAP;AACA,CAhC6B,CAAvB","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { Children, cloneElement } from '@wordpress/element';\nimport { withPreferredColorScheme } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport const BlockQuotation = withPreferredColorScheme( ( props ) => {\n\tconst { getStylesFromColorScheme, style } = props;\n\n\tconst blockQuoteStyle = [\n\t\tgetStylesFromColorScheme(\n\t\t\tstyles.wpBlockQuoteLight,\n\t\t\tstyles.wpBlockQuoteDark\n\t\t),\n\t\tstyle?.color && {\n\t\t\tborderLeftColor: style.color,\n\t\t},\n\t];\n\tconst colorStyle = style?.color ? { color: style.color } : {};\n\n\tconst newChildren = Children.map( props.children, ( child ) => {\n\t\tif ( child && child.props.identifier === 'citation' ) {\n\t\t\treturn cloneElement( child, {\n\t\t\t\tstyle: {\n\t\t\t\t\t...styles.wpBlockQuoteCitation,\n\t\t\t\t\t...colorStyle,\n\t\t\t\t},\n\t\t\t} );\n\t\t}\n\t\tif ( child && child.props.identifier === 'value' ) {\n\t\t\treturn cloneElement( child, {\n\t\t\t\ttagsToEliminate: [ 'div' ],\n\t\t\t\tstyle: colorStyle,\n\t\t\t} );\n\t\t}\n\t\treturn child;\n\t} );\n\treturn <View style={ blockQuoteStyle }>{ newChildren }</View>;\n} );\n"]}
+{"version":3,"sources":["@wordpress/primitives/src/block-quotation/index.native.js"],"names":["BlockQuotation","ref","props","style","blockQuoteStyle","styles","wpBlockQuoteLight","wpBlockQuoteDark","color","borderLeftColor","backgroundColor","paddingWithBackground","colorStyle","newChildren","Children","map","children","child","identifier","wpBlockQuoteCitation","tagsToEliminate"],"mappings":";;;;;;;;;AAOA;;AAJA;;AAKA;;AAIA;;AAZA;AACA;AACA;;AAEA;AACA;AACA;;AAGA;AACA;AACA;AAGO,MAAMA,cAAc,GAAG,yBAAY,OAAgBC,GAAhB,KAAyB;AAAA,MAAvB,EAAE,GAAGC;AAAL,GAAuB;AAClE,QAAM;AAAEC,IAAAA;AAAF,MAAYD,KAAlB;AAEA,QAAME,eAAe,GAAG,CACvB,2CACCC,eAAOC,iBADR,EAECD,eAAOE,gBAFR,CADuB,EAKvB,CAAAJ,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEK,KAAP,KAAgB;AACfC,IAAAA,eAAe,EAAEN,KAAK,CAACK;AADR,GALO,EAQvBL,KARuB,EASvB,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEO,eAAP,KAA0BL,eAAOM,qBATV,CAAxB;AAWA,QAAMC,UAAU,GAAGT,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEK,KAAP,GAAe;AAAEA,IAAAA,KAAK,EAAEL,KAAK,CAACK;AAAf,GAAf,GAAwC,EAA3D;;AAEA,QAAMK,WAAW,GAAGC,kBAASC,GAAT,CAAcb,KAAK,CAACc,QAApB,EAAgCC,KAAF,IAAa;AAC9D,QAAKA,KAAK,IAAIA,KAAK,CAACf,KAAN,CAAYgB,UAAZ,KAA2B,UAAzC,EAAsD;AACrD,aAAO,2BAAcD,KAAd,EAAqB;AAC3Bd,QAAAA,KAAK,EAAE,EACN,GAAGE,eAAOc,oBADJ;AAEN,aAAGP;AAFG;AADoB,OAArB,CAAP;AAMA;;AACD,QAAKK,KAAK,IAAIA,KAAK,CAACf,KAAN,CAAYgB,UAAZ,KAA2B,OAAzC,EAAmD;AAClD,aAAO,2BAAcD,KAAd,EAAqB;AAC3BG,QAAAA,eAAe,EAAE,CAAE,KAAF,CADU;AAE3BjB,QAAAA,KAAK,EAAES;AAFoB,OAArB,CAAP;AAIA;;AACD,WAAOK,KAAP;AACA,GAhBmB,CAApB;;AAiBA,SACC,4BAAC,iBAAD;AAAM,IAAA,GAAG,EAAGhB,GAAZ;AAAkB,IAAA,KAAK,EAAGG;AAA1B,KACGS,WADH,CADD;AAKA,CAtC6B,CAAvB","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { Children, cloneElement, forwardRef } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport const BlockQuotation = forwardRef( ( { ...props }, ref ) => {\n\tconst { style } = props;\n\n\tconst blockQuoteStyle = [\n\t\tusePreferredColorSchemeStyle(\n\t\t\tstyles.wpBlockQuoteLight,\n\t\t\tstyles.wpBlockQuoteDark\n\t\t),\n\t\tstyle?.color && {\n\t\t\tborderLeftColor: style.color,\n\t\t},\n\t\tstyle,\n\t\tstyle?.backgroundColor && styles.paddingWithBackground,\n\t];\n\tconst colorStyle = style?.color ? { color: style.color } : {};\n\n\tconst newChildren = Children.map( props.children, ( child ) => {\n\t\tif ( child && child.props.identifier === 'citation' ) {\n\t\t\treturn cloneElement( child, {\n\t\t\t\tstyle: {\n\t\t\t\t\t...styles.wpBlockQuoteCitation,\n\t\t\t\t\t...colorStyle,\n\t\t\t\t},\n\t\t\t} );\n\t\t}\n\t\tif ( child && child.props.identifier === 'value' ) {\n\t\t\treturn cloneElement( child, {\n\t\t\t\ttagsToEliminate: [ 'div' ],\n\t\t\t\tstyle: colorStyle,\n\t\t\t} );\n\t\t}\n\t\treturn child;\n\t} );\n\treturn (\n\t\t<View ref={ ref } style={ blockQuoteStyle }>\n\t\t\t{ newChildren }\n\t\t</View>\n\t);\n} );\n"]}

package/build-module/block-quotation/index.native.js

@@ -8,21 +8,22 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 
-import { Children, cloneElement } from '@wordpress/element';
-import { withPreferredColorScheme } from '@wordpress/compose';
+import { Children, cloneElement, forwardRef } from '@wordpress/element';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 
 import styles from './style.scss';
-export const BlockQuotation = withPreferredColorScheme(props => {
+export const BlockQuotation = forwardRef((_ref, ref) => {
+  let { ...props
+  } = _ref;
   const {
-    getStylesFromColorScheme,
     style
   } = props;
-  const blockQuoteStyle = [getStylesFromColorScheme(styles.wpBlockQuoteLight, styles.wpBlockQuoteDark), (style === null || style === void 0 ? void 0 : style.color) && {
+  const blockQuoteStyle = [usePreferredColorSchemeStyle(styles.wpBlockQuoteLight, styles.wpBlockQuoteDark), (style === null || style === void 0 ? void 0 : style.color) && {
     borderLeftColor: style.color
-  }];
+  }, style, (style === null || style === void 0 ? void 0 : style.backgroundColor) && styles.paddingWithBackground];
   const colorStyle = style !== null && style !== void 0 && style.color ? {
     color: style.color
   } : {};
@@ -45,6 +46,7 @@ export const BlockQuotation = withPreferredColorScheme(props => {
     return child;
   });
   return createElement(View, {
+    ref: ref,
     style: blockQuoteStyle
   }, newChildren);
 });

package/build-module/block-quotation/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/primitives/src/block-quotation/index.native.js"],"names":["View","Children","cloneElement","withPreferredColorScheme","styles","BlockQuotation","props","getStylesFromColorScheme","style","blockQuoteStyle","wpBlockQuoteLight","wpBlockQuoteDark","color","borderLeftColor","colorStyle","newChildren","map","children","child","identifier","wpBlockQuoteCitation","tagsToEliminate"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,cAArB;AACA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,YAAnB,QAAuC,oBAAvC;AACA,SAASC,wBAAT,QAAyC,oBAAzC;AACA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AAEA,OAAO,MAAMC,cAAc,GAAGF,wBAAwB,CAAIG,KAAF,IAAa;AACpE,QAAM;AAAEC,IAAAA,wBAAF;AAA4BC,IAAAA;AAA5B,MAAsCF,KAA5C;AAEA,QAAMG,eAAe,GAAG,CACvBF,wBAAwB,CACvBH,MAAM,CAACM,iBADgB,EAEvBN,MAAM,CAACO,gBAFgB,CADD,EAKvB,CAAAH,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,KAAP,KAAgB;AACfC,IAAAA,eAAe,EAAEL,KAAK,CAACI;AADR,GALO,CAAxB;AASA,QAAME,UAAU,GAAGN,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEI,KAAP,GAAe;AAAEA,IAAAA,KAAK,EAAEJ,KAAK,CAACI;AAAf,GAAf,GAAwC,EAA3D;AAEA,QAAMG,WAAW,GAAGd,QAAQ,CAACe,GAAT,CAAcV,KAAK,CAACW,QAApB,EAAgCC,KAAF,IAAa;AAC9D,QAAKA,KAAK,IAAIA,KAAK,CAACZ,KAAN,CAAYa,UAAZ,KAA2B,UAAzC,EAAsD;AACrD,aAAOjB,YAAY,CAAEgB,KAAF,EAAS;AAC3BV,QAAAA,KAAK,EAAE,EACN,GAAGJ,MAAM,CAACgB,oBADJ;AAEN,aAAGN;AAFG;AADoB,OAAT,CAAnB;AAMA;;AACD,QAAKI,KAAK,IAAIA,KAAK,CAACZ,KAAN,CAAYa,UAAZ,KAA2B,OAAzC,EAAmD;AAClD,aAAOjB,YAAY,CAAEgB,KAAF,EAAS;AAC3BG,QAAAA,eAAe,EAAE,CAAE,KAAF,CADU;AAE3Bb,QAAAA,KAAK,EAAEM;AAFoB,OAAT,CAAnB;AAIA;;AACD,WAAOI,KAAP;AACA,GAhBmB,CAApB;AAiBA,SAAO,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGT;AAAd,KAAkCM,WAAlC,CAAP;AACA,CAhCqD,CAA/C","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { Children, cloneElement } from '@wordpress/element';\nimport { withPreferredColorScheme } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport const BlockQuotation = withPreferredColorScheme( ( props ) => {\n\tconst { getStylesFromColorScheme, style } = props;\n\n\tconst blockQuoteStyle = [\n\t\tgetStylesFromColorScheme(\n\t\t\tstyles.wpBlockQuoteLight,\n\t\t\tstyles.wpBlockQuoteDark\n\t\t),\n\t\tstyle?.color && {\n\t\t\tborderLeftColor: style.color,\n\t\t},\n\t];\n\tconst colorStyle = style?.color ? { color: style.color } : {};\n\n\tconst newChildren = Children.map( props.children, ( child ) => {\n\t\tif ( child && child.props.identifier === 'citation' ) {\n\t\t\treturn cloneElement( child, {\n\t\t\t\tstyle: {\n\t\t\t\t\t...styles.wpBlockQuoteCitation,\n\t\t\t\t\t...colorStyle,\n\t\t\t\t},\n\t\t\t} );\n\t\t}\n\t\tif ( child && child.props.identifier === 'value' ) {\n\t\t\treturn cloneElement( child, {\n\t\t\t\ttagsToEliminate: [ 'div' ],\n\t\t\t\tstyle: colorStyle,\n\t\t\t} );\n\t\t}\n\t\treturn child;\n\t} );\n\treturn <View style={ blockQuoteStyle }>{ newChildren }</View>;\n} );\n"]}
+{"version":3,"sources":["@wordpress/primitives/src/block-quotation/index.native.js"],"names":["View","Children","cloneElement","forwardRef","usePreferredColorSchemeStyle","styles","BlockQuotation","ref","props","style","blockQuoteStyle","wpBlockQuoteLight","wpBlockQuoteDark","color","borderLeftColor","backgroundColor","paddingWithBackground","colorStyle","newChildren","map","children","child","identifier","wpBlockQuoteCitation","tagsToEliminate"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,cAArB;AACA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,YAAnB,EAAiCC,UAAjC,QAAmD,oBAAnD;AACA,SAASC,4BAAT,QAA6C,oBAA7C;AACA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AAEA,OAAO,MAAMC,cAAc,GAAGH,UAAU,CAAE,OAAgBI,GAAhB,KAAyB;AAAA,MAAvB,EAAE,GAAGC;AAAL,GAAuB;AAClE,QAAM;AAAEC,IAAAA;AAAF,MAAYD,KAAlB;AAEA,QAAME,eAAe,GAAG,CACvBN,4BAA4B,CAC3BC,MAAM,CAACM,iBADoB,EAE3BN,MAAM,CAACO,gBAFoB,CADL,EAKvB,CAAAH,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,KAAP,KAAgB;AACfC,IAAAA,eAAe,EAAEL,KAAK,CAACI;AADR,GALO,EAQvBJ,KARuB,EASvB,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEM,eAAP,KAA0BV,MAAM,CAACW,qBATV,CAAxB;AAWA,QAAMC,UAAU,GAAGR,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEI,KAAP,GAAe;AAAEA,IAAAA,KAAK,EAAEJ,KAAK,CAACI;AAAf,GAAf,GAAwC,EAA3D;AAEA,QAAMK,WAAW,GAAGjB,QAAQ,CAACkB,GAAT,CAAcX,KAAK,CAACY,QAApB,EAAgCC,KAAF,IAAa;AAC9D,QAAKA,KAAK,IAAIA,KAAK,CAACb,KAAN,CAAYc,UAAZ,KAA2B,UAAzC,EAAsD;AACrD,aAAOpB,YAAY,CAAEmB,KAAF,EAAS;AAC3BZ,QAAAA,KAAK,EAAE,EACN,GAAGJ,MAAM,CAACkB,oBADJ;AAEN,aAAGN;AAFG;AADoB,OAAT,CAAnB;AAMA;;AACD,QAAKI,KAAK,IAAIA,KAAK,CAACb,KAAN,CAAYc,UAAZ,KAA2B,OAAzC,EAAmD;AAClD,aAAOpB,YAAY,CAAEmB,KAAF,EAAS;AAC3BG,QAAAA,eAAe,EAAE,CAAE,KAAF,CADU;AAE3Bf,QAAAA,KAAK,EAAEQ;AAFoB,OAAT,CAAnB;AAIA;;AACD,WAAOI,KAAP;AACA,GAhBmB,CAApB;AAiBA,SACC,cAAC,IAAD;AAAM,IAAA,GAAG,EAAGd,GAAZ;AAAkB,IAAA,KAAK,EAAGG;AAA1B,KACGQ,WADH,CADD;AAKA,CAtCuC,CAAjC","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { Children, cloneElement, forwardRef } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport const BlockQuotation = forwardRef( ( { ...props }, ref ) => {\n\tconst { style } = props;\n\n\tconst blockQuoteStyle = [\n\t\tusePreferredColorSchemeStyle(\n\t\t\tstyles.wpBlockQuoteLight,\n\t\t\tstyles.wpBlockQuoteDark\n\t\t),\n\t\tstyle?.color && {\n\t\t\tborderLeftColor: style.color,\n\t\t},\n\t\tstyle,\n\t\tstyle?.backgroundColor && styles.paddingWithBackground,\n\t];\n\tconst colorStyle = style?.color ? { color: style.color } : {};\n\n\tconst newChildren = Children.map( props.children, ( child ) => {\n\t\tif ( child && child.props.identifier === 'citation' ) {\n\t\t\treturn cloneElement( child, {\n\t\t\t\tstyle: {\n\t\t\t\t\t...styles.wpBlockQuoteCitation,\n\t\t\t\t\t...colorStyle,\n\t\t\t\t},\n\t\t\t} );\n\t\t}\n\t\tif ( child && child.props.identifier === 'value' ) {\n\t\t\treturn cloneElement( child, {\n\t\t\t\ttagsToEliminate: [ 'div' ],\n\t\t\t\tstyle: colorStyle,\n\t\t\t} );\n\t\t}\n\t\treturn child;\n\t} );\n\treturn (\n\t\t<View ref={ ref } style={ blockQuoteStyle }>\n\t\t\t{ newChildren }\n\t\t</View>\n\t);\n} );\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/primitives",
-	"version": "3.3.0",
+	"version": "3.5.0",
 	"description": "WordPress cross-platform primitives.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,11 +31,11 @@
 	"types": "build-types",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/element": "^4.3.0",
+		"@wordpress/element": "^4.5.0",
 		"classnames": "^2.3.1"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "aa003c3634016cc4ab6348b2106907e371c648e1"
+	"gitHead": "1ba52312b56db563df2d8d4fba5b00613fb46d8c"
 }

package/src/block-quotation/index.native.js

@@ -5,24 +5,26 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Children, cloneElement } from '@wordpress/element';
-import { withPreferredColorScheme } from '@wordpress/compose';
+import { Children, cloneElement, forwardRef } from '@wordpress/element';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
-export const BlockQuotation = withPreferredColorScheme( ( props ) => {
-	const { getStylesFromColorScheme, style } = props;
+export const BlockQuotation = forwardRef( ( { ...props }, ref ) => {
+	const { style } = props;
 
 	const blockQuoteStyle = [
-		getStylesFromColorScheme(
+		usePreferredColorSchemeStyle(
 			styles.wpBlockQuoteLight,
 			styles.wpBlockQuoteDark
 		),
 		style?.color && {
 			borderLeftColor: style.color,
 		},
+		style,
+		style?.backgroundColor && styles.paddingWithBackground,
 	];
 	const colorStyle = style?.color ? { color: style.color } : {};
 
@@ -43,5 +45,9 @@ export const BlockQuotation = withPreferredColorScheme( ( props ) => {
 		}
 		return child;
 	} );
-	return <View style={ blockQuoteStyle }>{ newChildren }</View>;
+	return (
+		<View ref={ ref } style={ blockQuoteStyle }>
+			{ newChildren }
+		</View>
+	);
 } );

package/src/block-quotation/style.native.scss

@@ -1,7 +1,8 @@
 %wpBlockQuote-shared {
 	border-left-width: 4px;
 	border-left-style: solid;
-	padding-left: 8px;
+	padding-left: $block-edge-to-content;
+	padding-top: $dashed-border-space;
 	margin-left: 0;
 }
 
@@ -19,3 +20,7 @@
 	margin-top: 16px;
 	font-size: 14px;
 }
+
+.paddingWithBackground {
+	padding-top: $block-edge-to-content - $block-selected-margin;
+}