From 3f38edbd6685e4862521897af205c58db951b5be Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Wed, 6 Oct 2021 12:52:26 +0200 Subject: [PATCH 01/29] Mobile - WIP Word selected color --- .../rich-text/format-toolbar/index.native.js | 2 +- .../src/default-formats.native.js | 3 +- .../src/text-color/index.native.js | 103 +++++++ .../src/text-color/inline.native.js | 225 ++++++++++++++++ .../react-native-editor/src/initial-html.js | 252 +----------------- .../rich-text/src/component/index.native.js | 1 + 6 files changed, 333 insertions(+), 253 deletions(-) create mode 100644 packages/format-library/src/text-color/index.native.js create mode 100644 packages/format-library/src/text-color/inline.native.js diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js index 4e0eec85e0bdb0..2b9101214516b5 100644 --- a/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js +++ b/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js @@ -7,7 +7,7 @@ import { Slot } from '@wordpress/components'; const FormatToolbar = () => { return ( <> - { [ 'bold', 'italic', 'link' ].map( ( format ) => ( + { [ 'text-color', 'bold', 'italic', 'link' ].map( ( format ) => ( setIsAddingColor( true ), [ + setIsAddingColor, + ] ); + const disableIsAddingColor = useCallback( () => setIsAddingColor( false ), [ + setIsAddingColor, + ] ); + const colorIndicatorStyle = useMemo( () => { + const color = getActiveColors( value, name, colors )?.color; + + return { color: color?.replace( ' ', '' ) }; + } ); + + const hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl; + if ( ! hasColorsToChoose && ! isActive ) { + return null; + } + + return ( + <> + + } + title={ title } + // If has no colors to choose but a color is active remove the color onClick + onClick={ + hasColorsToChoose + ? enableIsAddingColor + : () => onChange( removeFormat( value, name ) ) + } + /> + { isAddingColor && ( + + ) } + + ); +} + +export const textColor = { + name, + title, + tagName: 'mark', + className: 'has-inline-color', + attributes: { + style: 'style', + class: 'class', + }, + edit: TextColorEdit, +}; diff --git a/packages/format-library/src/text-color/inline.native.js b/packages/format-library/src/text-color/inline.native.js new file mode 100644 index 00000000000000..866233a46311db --- /dev/null +++ b/packages/format-library/src/text-color/inline.native.js @@ -0,0 +1,225 @@ +/** + * External dependencies + */ +import { get } from 'lodash'; +import { Text } from 'react-native'; + +/** + * WordPress dependencies + */ +/** + * WordPress dependencies + */ +import { useCallback, useMemo } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; +import { + applyFormat, + removeFormat, + getActiveFormat, + useAnchorRef, +} from '@wordpress/rich-text'; +import { + ColorPalette, + getColorClassName, + getColorObjectByColorValue, + getColorObjectByAttributeValues, + store as blockEditorStore, + useSetting, +} from '@wordpress/block-editor'; +import { + BottomSheet, + BottomSheetConsumer, + ColorSettings, +} from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +/** + * Internal dependencies + */ +import { textColor as settings } from './index'; + +function parseCSS( css = '' ) { + return css.split( ';' ).reduce( ( accumulator, rule ) => { + if ( rule ) { + const [ property, value ] = rule.split( ':' ); + if ( property === 'color' ) accumulator.color = value; + if ( property === 'background-color' ) + accumulator.backgroundColor = value; + } + return accumulator; + }, {} ); +} + +function parseClassName( className = '', colorSettings ) { + return className.split( ' ' ).reduce( ( accumulator, name ) => { + const match = name.match( /^has-([^-]+)-color$/ ); + if ( match ) { + const [ , colorSlug ] = name.match( /^has-([^-]+)-color$/ ); + const colorObject = getColorObjectByAttributeValues( + colorSettings, + colorSlug + ); + accumulator.color = colorObject.color; + } + return accumulator; + }, {} ); +} + +export function getActiveColors( value, name, colorSettings ) { + const activeColorFormat = getActiveFormat( value, name ); + + if ( ! activeColorFormat ) { + return {}; + } + + return { + ...parseCSS( activeColorFormat.attributes.style ), + ...parseClassName( activeColorFormat.attributes.class, colorSettings ), + }; +} + +function setColors( value, name, colorSettings, colors ) { + const { color, backgroundColor } = { + // ...getActiveColors( value, name, colorSettings ), + ...colors, + }; + + // if ( ! color && ! backgroundColor ) { + // return removeFormat( value, name ); + // } + + const styles = []; + const classNames = []; + const attributes = {}; + + // if ( backgroundColor ) { + // styles.push( [ 'background-color', backgroundColor ].join( ':' ) ); + // } else { + // // Override default browser color for mark element. + // styles.push( [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' ) ); + // } + + if ( color ) { + const colorObject = null; + // const colorObject = getColorObjectByColorValue( colorSettings, color ); + + if ( colorObject ) { + classNames.push( getColorClassName( 'color', colorObject.slug ) ); + } else { + styles.push( [ 'color', color ].join( ':' ) ); + } + } + + if ( styles.length ) attributes.style = styles.join( ';' ); + if ( classNames.length ) attributes.class = classNames.join( ' ' ); + console.log( value ); + console.log( name ); + console.log( attributes ); + return applyFormat( value, { type: name, attributes } ); +} + +function ColorPicker( { name, value, onChange } ) { + const property = 'color'; + const colorSettings = { + colors: useSetting( 'color.palette' ) || settings.colors, + gradients: useSetting( 'color.gradients' ) || settings.gradients, + }; + + const colors = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + return get( getSettings(), [ 'colors' ], [] ); + } ); + const onColorChange = useCallback( + ( color ) => { + console.log( color ); + onChange( + setColors( value, name, colors, { [ property ]: color } ) + ); + }, + [ colors, onChange, property ] + ); + const activeColors = useMemo( + () => getActiveColors( value, name, colors ), + [ name, value, colors ] + ); + + return ( + + ); + + // return ( + // + // ); +} + +export default function InlineColorUI( { + name, + value, + onChange, + onClose, + contentRef, +} ) { + const anchorRef = useAnchorRef( { ref: contentRef, value, settings } ); + + return ( + + + + + + + + ); + + // return ( + // + // + // { ( tab ) => ( + // + // ) } + // + // + // ); +} diff --git a/packages/react-native-editor/src/initial-html.js b/packages/react-native-editor/src/initial-html.js index 7c1cb67a5cc9bb..ba8be67f0562ec 100644 --- a/packages/react-native-editor/src/initial-html.js +++ b/packages/react-native-editor/src/initial-html.js @@ -1,255 +1,5 @@ export default ` - -

Text Blocks

- - - -

What is Gutenberg?

- - -

Bold Italic Striked Superscript(1) Subscript(2) Link

- - - -

List

- - - -
  • First Item
  • Second Item
  • Third Item
- - - -

Quote

- - - -

"This will make running your own blog a viable alternative again."

— Adrian Zumbrunnen
- - - -

One of the hardest things to do in technology is disrupt yourself.

Matt Mullenweg
- - - -

Style Paragraph

- - - -

-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor tincidunt sapien, quis dictum orci sollicitudin quis. Proin sed elit id est pulvinar feugiat vitae eget dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- - - -

Pre formatted

- - - -
Some preformatted text...
And more!
- - - -

Code

- - - -
if name == "World":
-    return "Hello World"
-else:
-    return "Hello Pony"
- - - -

Verse

- - - -
Come
Home.
- - - -

Media

- - - -

Images

- - - -
- - - -
Mountain
- - - -

Video

- - - -
Videos too!
- - - -

File

- - - - - -
WordPress.zipDownload
- - - -

Audio

- - - - - -
- - - -

Gallery

- - - -
  • Paragraph
  • Heading
  • Subheading
  • Quote
  • Image
  • Gallery
  • Cover Image
  • Video
  • Audio
  • Columns
  • File
  • Code
  • List
  • Button
  • Embeds
  • More
- - - -

Separators

- - - - - - - - - - - - - - - -

Layout

- - - -

Group

- - - -
-

One.

- - - -

Two

- - - -

Three.

-
- - - -

Columns

- - - -
-
-

Built with modern technology.

- - - -

Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.

- - - -

Learn more

-
- - - -
-

Designed for compatibility.

- - - -

We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta-boxes, and Custom Post Types.

- - - -

Learn more

-
-
- - - -

Media Text

- - - -
-

-
- - - -

Cover

- - - -
-

Cool cover

-
- - - -

Dynamic Blocks

- - - - - -

Buttons

- - - -
-
Solid Button
- - - -
Gradient Button
-
- - - -

Legacy

- - - -[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg] - - - -

Unsupported

- - - - - -

Heading with line-height set

- - - -

This block is used in initial HTML e2e tests and should be kept as the last block.

+

Donec ipsum dolor, tempor sed bibendum vita.

`; diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index ebb7fd21d29f1a..fadd88871daf06 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -1079,6 +1079,7 @@ export class RichText extends Component { { isSelected && ( <> Date: Thu, 14 Oct 2021 09:28:32 +0200 Subject: [PATCH 02/29] WIP color selected --- .../src/mobile/color-settings/index.native.js | 2 + .../color-settings/palette.screen.native.js | 11 ++- .../src/text-color/inline.native.js | 81 +++---------------- 3 files changed, 22 insertions(+), 72 deletions(-) diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 2b898b7c63f906..9c877782b92822 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -28,6 +28,7 @@ const ColorSettingsMemo = memo( gradientValue, onGradientChange, label, + hideNavigation, } ) => { useEffect( () => { shouldEnableBottomSheetMaxHeight( true ); @@ -44,6 +45,7 @@ const ColorSettingsMemo = memo( gradientValue, onGradientChange, label, + hideNavigation, } } > diff --git a/packages/components/src/mobile/color-settings/palette.screen.native.js b/packages/components/src/mobile/color-settings/palette.screen.native.js index f606b407b88326..62c331339ec41f 100644 --- a/packages/components/src/mobile/color-settings/palette.screen.native.js +++ b/packages/components/src/mobile/color-settings/palette.screen.native.js @@ -38,6 +38,7 @@ const PaletteScreen = () => { onGradientChange, colorValue, defaultSettings, + hideNavigation = false, } = route.params || {}; const { segments, isGradient } = colorsUtils; const [ currentValue, setCurrentValue ] = useState( colorValue ); @@ -164,10 +165,12 @@ const PaletteScreen = () => { } return ( - - - { label } - + { ! hideNavigation && ( + + + { label } + + ) } { - console.log( color ); - onChange( - setColors( value, name, colors, { [ property ]: color } ) - ); + if ( color !== '' ) { + onChange( + setColors( value, name, colors, { [ property ]: color } ) + ); + } else { + onChange( removeFormat( value, name ) ); + } }, [ colors, onChange, property ] ); @@ -151,26 +141,12 @@ function ColorPicker( { name, value, onChange } ) { colorValue={ activeColors[ property ] } onColorChange={ onColorChange } defaultSettings={ colorSettings } + hideNavigation /> ); - - // return ( - // - // ); } -export default function InlineColorUI( { - name, - value, - onChange, - onClose, - contentRef, -} ) { - const anchorRef = useAnchorRef( { ref: contentRef, value, settings } ); - +export default function InlineColorUI( { name, value, onChange, onClose } ) { return ( - + ); - - // return ( - // - // - // { ( tab ) => ( - // - // ) } - // - // - // ); } From 68a131689fc8bcfd4f0fd2275d53220c0938b4ec Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Fri, 22 Oct 2021 16:52:01 +0200 Subject: [PATCH 03/29] Mobile - Text color support --- .../src/text-color/index.native.js | 25 ++++-- .../src/text-color/inline.native.js | 89 +++---------------- .../rich-text/src/component/index.native.js | 28 +++++- .../rich-text/src/get-format-colors.native.js | 53 +++++++++++ 4 files changed, 108 insertions(+), 87 deletions(-) create mode 100644 packages/rich-text/src/get-format-colors.native.js diff --git a/packages/format-library/src/text-color/index.native.js b/packages/format-library/src/text-color/index.native.js index cca9159e384007..794c10797c6a29 100644 --- a/packages/format-library/src/text-color/index.native.js +++ b/packages/format-library/src/text-color/index.native.js @@ -6,18 +6,13 @@ import { isEmpty } from 'lodash'; /** * WordPress dependencies */ -/** - * WordPress dependencies - */ + import { __ } from '@wordpress/i18n'; import { useCallback, useMemo, useState } from '@wordpress/element'; import { RichTextToolbarButton, useSetting } from '@wordpress/block-editor'; import { Icon, textColor as textColorIcon } from '@wordpress/icons'; import { removeFormat } from '@wordpress/rich-text'; -/** - * Internal dependencies - */ /** * Internal dependencies */ @@ -99,5 +94,23 @@ export const textColor = { style: 'style', class: 'class', }, + /* + * Since this format relies on the tag, it's important to + * prevent the default yellow background color applied by most + * browsers. The solution is to detect when this format is used with a + * text color but no background color, and in such cases to override + * the default styling with a transparent background. + * + * @see https://github.com/WordPress/gutenberg/pull/35516 + */ + __unstableFilterAttributeValue( key, value ) { + if ( key !== 'style' ) return value; + // We should not add a background-color if it's already set + if ( value && value.includes( 'background-color' ) ) return value; + const addedCSS = [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' ); + // Prepend `addedCSS` to avoid a double `;;` as any the existing CSS + // rules will already include a `;`. + return value ? [ addedCSS, value ].join( ';' ) : addedCSS; + }, edit: TextColorEdit, }; diff --git a/packages/format-library/src/text-color/inline.native.js b/packages/format-library/src/text-color/inline.native.js index dbc1a2bd9b3ecd..630dfc8597dbce 100644 --- a/packages/format-library/src/text-color/inline.native.js +++ b/packages/format-library/src/text-color/inline.native.js @@ -1,76 +1,20 @@ -/** - * External dependencies - */ -import { get } from 'lodash'; - -/** - * WordPress dependencies - */ /** * WordPress dependencies */ import { useCallback, useMemo } from '@wordpress/element'; -import { useSelect } from '@wordpress/data'; -import { - applyFormat, - removeFormat, - getActiveFormat, -} from '@wordpress/rich-text'; +import { applyFormat, removeFormat } from '@wordpress/rich-text'; import { getColorClassName, - getColorObjectByAttributeValues, - store as blockEditorStore, + getColorObjectByColorValue, useSetting, } from '@wordpress/block-editor'; import { BottomSheet, ColorSettings } from '@wordpress/components'; -/** - * Internal dependencies - */ /** * Internal dependencies */ import { textColor as settings } from './index'; - -function parseCSS( css = '' ) { - return css.split( ';' ).reduce( ( accumulator, rule ) => { - if ( rule ) { - const [ property, value ] = rule.split( ':' ); - if ( property === 'color' ) accumulator.color = value; - if ( property === 'background-color' ) - accumulator.backgroundColor = value; - } - return accumulator; - }, {} ); -} - -function parseClassName( className = '', colorSettings ) { - return className.split( ' ' ).reduce( ( accumulator, name ) => { - const match = name.match( /^has-([^-]+)-color$/ ); - if ( match ) { - const [ , colorSlug ] = name.match( /^has-([^-]+)-color$/ ); - const colorObject = getColorObjectByAttributeValues( - colorSettings, - colorSlug - ); - accumulator.color = colorObject.color; - } - return accumulator; - }, {} ); -} - -export function getActiveColors( value, name, colorSettings ) { - const activeColorFormat = getActiveFormat( value, name ); - - if ( ! activeColorFormat ) { - return {}; - } - - return { - ...parseCSS( activeColorFormat.attributes.style ), - ...parseClassName( activeColorFormat.attributes.class, colorSettings ), - }; -} +import { getActiveColors } from './inline'; function setColors( value, name, colorSettings, colors ) { const { color, backgroundColor } = { @@ -78,25 +22,16 @@ function setColors( value, name, colorSettings, colors ) { ...colors, }; - // if ( ! color && ! backgroundColor ) { - // return removeFormat( value, name ); - // } + if ( ! color && ! backgroundColor ) { + return removeFormat( value, name ); + } const styles = []; const classNames = []; const attributes = {}; - // if ( backgroundColor ) { - // styles.push( [ 'background-color', backgroundColor ].join( ':' ) ); - // } else { - // // Override default browser color for mark element. - // styles.push( [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' ) ); - // } - if ( color ) { - const colorObject = null; - // const colorObject = getColorObjectByColorValue( colorSettings, color ); - + const colorObject = getColorObjectByColorValue( colorSettings, color ); if ( colorObject ) { classNames.push( getColorClassName( 'color', colorObject.slug ) ); } else { @@ -105,20 +40,18 @@ function setColors( value, name, colorSettings, colors ) { } if ( styles.length ) attributes.style = styles.join( ';' ); + if ( classNames.length ) attributes.class = classNames.join( ' ' ); + return applyFormat( value, { type: name, attributes } ); } function ColorPicker( { name, value, onChange } ) { const property = 'color'; + const colors = useSetting( 'color.palette' ) || settings.colors; const colorSettings = { - colors: useSetting( 'color.palette' ) || settings.colors, - gradients: useSetting( 'color.gradients' ) || settings.gradients, + colors, }; - const colors = useSelect( ( select ) => { - const { getSettings } = select( blockEditorStore ); - return get( getSettings(), [ 'colors' ], [] ); - } ); const onColorChange = useCallback( ( color ) => { if ( color !== '' ) { diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 3c78a0958625c6..30286d249a44ae 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -42,6 +42,7 @@ import { toHTMLString } from '../to-html-string'; import { removeLineSeparator } from '../remove-line-separator'; import { isCollapsed } from '../is-collapsed'; import { remove } from '../remove'; +import { getFormatColors } from '../get-format-colors'; import styles from './style.scss'; import ToolbarButtonWithOptions from './toolbar-button-with-options'; @@ -143,13 +144,27 @@ export class RichText extends Component { * @return {Object} The current record (value and selection). */ getRecord() { - const { selectionStart: start, selectionEnd: end } = this.props; + const { + selectionStart: start, + selectionEnd: end, + colorPalette, + } = this.props; const { value } = this.props; + const currentValue = this.formatToValue( value ); - const { formats, replacements, text } = this.formatToValue( value ); + const { formats, replacements, text } = currentValue; const { activeFormats } = this.state; + // const newFormats = getFormatColors( value, formats, colorPalette ); + getFormatColors( value, formats, colorPalette ); - return { formats, replacements, text, start, end, activeFormats }; + return { + formats, + replacements, + text, + start, + end, + activeFormats, + }; } /** @@ -1145,6 +1160,12 @@ export default compose( [ const settings = getSettings(); const baseGlobalStyles = settings?.__experimentalGlobalStylesBaseStyles; + const experimentalFeatures = + settings?.__experimentalFeatures?.color?.palette; + const colorPalette = + experimentalFeatures?.user ?? + experimentalFeatures?.theme ?? + experimentalFeatures?.core; return { areMentionsSupported: @@ -1152,6 +1173,7 @@ export default compose( [ areXPostsSupported: getSettings( 'capabilities' ).xposts === true, ...{ parentBlockStyles }, baseGlobalStyles, + colorPalette, }; } ), withPreferredColorScheme, diff --git a/packages/rich-text/src/get-format-colors.native.js b/packages/rich-text/src/get-format-colors.native.js new file mode 100644 index 00000000000000..f25e7cff77ab9b --- /dev/null +++ b/packages/rich-text/src/get-format-colors.native.js @@ -0,0 +1,53 @@ +/** + * WordPress dependencies + */ +import { getColorObjectByAttributeValues } from '@wordpress/block-editor'; + +const FORMAT_TYPE = 'core/text-color'; +const REGEX_TO_MATCH = /^has-([^-]+)-color$/; +const TAGS_TO_SEARCH = /\ { + format.forEach( ( currentFormat ) => { + if ( currentFormat?.type === FORMAT_TYPE ) { + const className = currentFormat?.attributes?.class; + + className?.split( ' ' ).forEach( ( currentClass ) => { + const match = currentClass.match( REGEX_TO_MATCH ); + if ( match ) { + const [ , colorSlug ] = currentClass.match( + REGEX_TO_MATCH + ); + const colorObject = getColorObjectByAttributeValues( + colors, + colorSlug + ); + const currentStyles = + currentFormat?.attributes?.style; + if ( + colorObject && + ( ! currentStyles || + currentStyles?.indexOf( + colorObject.color + ) === -1 ) + ) { + currentFormat.attributes.style = [ + `color: ${ colorObject.color }`, + currentStyles, + ].join( ';' ); + } + } + } ); + } + } ); + } ); + + return newFormats; + } + + return formats; +} From cfab1c0b3f9b09acaeee14e519eb63ba3dd703f2 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Fri, 22 Oct 2021 16:55:01 +0200 Subject: [PATCH 04/29] Mobile - Restore initial html --- .../react-native-editor/src/initial-html.js | 252 +++++++++++++++++- 1 file changed, 251 insertions(+), 1 deletion(-) diff --git a/packages/react-native-editor/src/initial-html.js b/packages/react-native-editor/src/initial-html.js index ba8be67f0562ec..7c1cb67a5cc9bb 100644 --- a/packages/react-native-editor/src/initial-html.js +++ b/packages/react-native-editor/src/initial-html.js @@ -1,5 +1,255 @@ export default ` + +

Text Blocks

+ + + +

What is Gutenberg?

+ + -

Donec ipsum dolor, tempor sed bibendum vita.

+

Bold Italic Striked Superscript(1) Subscript(2) Link

+ + + +

List

+ + + +
  • First Item
  • Second Item
  • Third Item
+ + + +

Quote

+ + + +

"This will make running your own blog a viable alternative again."

— Adrian Zumbrunnen
+ + + +

One of the hardest things to do in technology is disrupt yourself.

Matt Mullenweg
+ + + +

Style Paragraph

+ + + +

+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor tincidunt sapien, quis dictum orci sollicitudin quis. Proin sed elit id est pulvinar feugiat vitae eget dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + + +

Pre formatted

+ + + +
Some preformatted text...
And more!
+ + + +

Code

+ + + +
if name == "World":
+    return "Hello World"
+else:
+    return "Hello Pony"
+ + + +

Verse

+ + + +
Come
Home.
+ + + +

Media

+ + + +

Images

+ + + +
+ + + +
Mountain
+ + + +

Video

+ + + +
Videos too!
+ + + +

File

+ + + + + +
WordPress.zipDownload
+ + + +

Audio

+ + + + + +
+ + + +

Gallery

+ + + +
  • Paragraph
  • Heading
  • Subheading
  • Quote
  • Image
  • Gallery
  • Cover Image
  • Video
  • Audio
  • Columns
  • File
  • Code
  • List
  • Button
  • Embeds
  • More
+ + + +

Separators

+ + + + + + + + + + + + + + + +

Layout

+ + + +

Group

+ + + +
+

One.

+ + + +

Two

+ + + +

Three.

+
+ + + +

Columns

+ + + +
+
+

Built with modern technology.

+ + + +

Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.

+ + + +

Learn more

+
+ + + +
+

Designed for compatibility.

+ + + +

We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta-boxes, and Custom Post Types.

+ + + +

Learn more

+
+
+ + + +

Media Text

+ + + +
+

+
+ + + +

Cover

+ + + +
+

Cool cover

+
+ + + +

Dynamic Blocks

+ + + + + +

Buttons

+ + + +
+
Solid Button
+ + + +
Gradient Button
+
+ + + +

Legacy

+ + + +[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg] + + + +

Unsupported

+ + + + + +

Heading with line-height set

+ + + +

This block is used in initial HTML e2e tests and should be kept as the last block.

`; From 6838ea85bad383ac084c39fdc8339204733b0609 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Fri, 22 Oct 2021 17:02:14 +0200 Subject: [PATCH 05/29] Mobile - Rich text - Highlight text colors from classes --- packages/rich-text/src/component/index.native.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 30286d249a44ae..f9a7961601a2b3 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -154,11 +154,10 @@ export class RichText extends Component { const { formats, replacements, text } = currentValue; const { activeFormats } = this.state; - // const newFormats = getFormatColors( value, formats, colorPalette ); - getFormatColors( value, formats, colorPalette ); + const newFormats = getFormatColors( value, formats, colorPalette ); return { - formats, + formats: newFormats, replacements, text, start, From 31f856ba2821d4156bfe34bfc3ebdfbacc564edb Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Fri, 22 Oct 2021 17:25:28 +0200 Subject: [PATCH 06/29] Mobile - Text color - Fix getActiveColors import --- packages/format-library/src/text-color/index.native.js | 3 ++- packages/format-library/src/text-color/inline.native.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/format-library/src/text-color/index.native.js b/packages/format-library/src/text-color/index.native.js index 794c10797c6a29..480d61dbeb6ce9 100644 --- a/packages/format-library/src/text-color/index.native.js +++ b/packages/format-library/src/text-color/index.native.js @@ -16,7 +16,8 @@ import { removeFormat } from '@wordpress/rich-text'; /** * Internal dependencies */ -import { default as InlineColorUI, getActiveColors } from './inline'; +import { getActiveColors } from './inline.js'; +import { default as InlineColorUI } from './inline'; const name = 'core/text-color'; const title = __( 'Text color' ); diff --git a/packages/format-library/src/text-color/inline.native.js b/packages/format-library/src/text-color/inline.native.js index 630dfc8597dbce..1b6b8c13801b4a 100644 --- a/packages/format-library/src/text-color/inline.native.js +++ b/packages/format-library/src/text-color/inline.native.js @@ -14,7 +14,7 @@ import { BottomSheet, ColorSettings } from '@wordpress/components'; * Internal dependencies */ import { textColor as settings } from './index'; -import { getActiveColors } from './inline'; +import { getActiveColors } from './inline.js'; function setColors( value, name, colorSettings, colors ) { const { color, backgroundColor } = { From cd701c1c12b28b4d590660ef8a377c04aac4cfa3 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Tue, 26 Oct 2021 10:57:54 +0200 Subject: [PATCH 07/29] Mobile - Text Color - Remove web filter --- .../src/text-color/index.native.js | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/packages/format-library/src/text-color/index.native.js b/packages/format-library/src/text-color/index.native.js index 480d61dbeb6ce9..9f15712b409d3d 100644 --- a/packages/format-library/src/text-color/index.native.js +++ b/packages/format-library/src/text-color/index.native.js @@ -95,23 +95,5 @@ export const textColor = { style: 'style', class: 'class', }, - /* - * Since this format relies on the tag, it's important to - * prevent the default yellow background color applied by most - * browsers. The solution is to detect when this format is used with a - * text color but no background color, and in such cases to override - * the default styling with a transparent background. - * - * @see https://github.com/WordPress/gutenberg/pull/35516 - */ - __unstableFilterAttributeValue( key, value ) { - if ( key !== 'style' ) return value; - // We should not add a background-color if it's already set - if ( value && value.includes( 'background-color' ) ) return value; - const addedCSS = [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' ); - // Prepend `addedCSS` to avoid a double `;;` as any the existing CSS - // rules will already include a `;`. - return value ? [ addedCSS, value ].join( ';' ) : addedCSS; - }, edit: TextColorEdit, }; From 7bbaa4cf71e8d1f9aa5f43ce444c3eac9632fd01 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Thu, 28 Oct 2021 09:32:50 +0200 Subject: [PATCH 08/29] Mobile - Rich text - Regex fix for default editor colors --- packages/rich-text/src/component/index.native.js | 3 ++- packages/rich-text/src/get-format-colors.native.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index f9a7961601a2b3..aab2ab624ecc20 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -1164,7 +1164,8 @@ export default compose( [ const colorPalette = experimentalFeatures?.user ?? experimentalFeatures?.theme ?? - experimentalFeatures?.core; + experimentalFeatures?.core ?? + settings?.colors; return { areMentionsSupported: diff --git a/packages/rich-text/src/get-format-colors.native.js b/packages/rich-text/src/get-format-colors.native.js index f25e7cff77ab9b..eaf976cf74ffba 100644 --- a/packages/rich-text/src/get-format-colors.native.js +++ b/packages/rich-text/src/get-format-colors.native.js @@ -4,7 +4,7 @@ import { getColorObjectByAttributeValues } from '@wordpress/block-editor'; const FORMAT_TYPE = 'core/text-color'; -const REGEX_TO_MATCH = /^has-([^-]+)-color$/; +const REGEX_TO_MATCH = /^has-(.*)-color$/; const TAGS_TO_SEARCH = /\ Date: Tue, 2 Nov 2021 16:27:37 +0100 Subject: [PATCH 09/29] Mobile - Highlight word - Fixes for iOS and color indicator --- .../src/text-color/index.native.js | 20 ++++++++++++++++++- .../src/text-color/inline.native.js | 7 +++++++ .../rich-text/src/component/index.native.js | 8 +++++++- .../rich-text/src/get-format-colors.native.js | 4 ++++ 4 files changed, 37 insertions(+), 2 deletions(-) diff --git a/packages/format-library/src/text-color/index.native.js b/packages/format-library/src/text-color/index.native.js index 9f15712b409d3d..b50bba19bafcfc 100644 --- a/packages/format-library/src/text-color/index.native.js +++ b/packages/format-library/src/text-color/index.native.js @@ -44,7 +44,7 @@ function TextColorEdit( { const color = getActiveColors( value, name, colors )?.color; return { color: color?.replace( ' ', '' ) }; - } ); + }, [ value, colors ] ); const hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl; if ( ! hasColorsToChoose && ! isActive ) { @@ -95,5 +95,23 @@ export const textColor = { style: 'style', class: 'class', }, + /* + * Since this format relies on the tag, it's important to + * prevent the default yellow background color applied by most + * browsers. The solution is to detect when this format is used with a + * text color but no background color, and in such cases to override + * the default styling with a transparent background. + * + * @see https://github.com/WordPress/gutenberg/pull/35516 + */ + __unstableFilterAttributeValue( key, value ) { + if ( key !== 'style' ) return value; + // We should not add a background-color if it's already set + if ( value && value.includes( 'background-color' ) ) return value; + const addedCSS = [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' ); + // Prepend `addedCSS` to avoid a double `;;` as any the existing CSS + // rules will already include a `;`. + return value ? [ addedCSS, value ].join( ';' ) : addedCSS; + }, edit: TextColorEdit, }; diff --git a/packages/format-library/src/text-color/inline.native.js b/packages/format-library/src/text-color/inline.native.js index 1b6b8c13801b4a..9408cd45ca29a3 100644 --- a/packages/format-library/src/text-color/inline.native.js +++ b/packages/format-library/src/text-color/inline.native.js @@ -30,6 +30,13 @@ function setColors( value, name, colorSettings, colors ) { const classNames = []; const attributes = {}; + if ( backgroundColor ) { + styles.push( [ 'background-color', backgroundColor ].join( ':' ) ); + } else { + // Override default browser color for mark element. + styles.push( [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' ) ); + } + if ( color ) { const colorObject = getColorObjectByColorValue( colorSettings, color ); if ( colorObject ) { diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index aab2ab624ecc20..e142b45c6757aa 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -606,7 +606,13 @@ export class RichText extends Component { const isManual = this.lastAztecEventType !== 'input' && this.props.value === this.value; - if ( hasChanged && isManual ) { + const isFormatChange = + this.lastAztecEventType === 'format change' && + this.props.value !== this.value; + if ( + ( hasChanged && isManual ) || + ( this.isIOS && hasChanged && isFormatChange ) + ) { const value = this.createRecord(); const activeFormats = getActiveFormats( value ); this.setState( { activeFormats } ); diff --git a/packages/rich-text/src/get-format-colors.native.js b/packages/rich-text/src/get-format-colors.native.js index eaf976cf74ffba..d68498e90284bf 100644 --- a/packages/rich-text/src/get-format-colors.native.js +++ b/packages/rich-text/src/get-format-colors.native.js @@ -15,6 +15,10 @@ export function getFormatColors( value, formats, colors ) { format.forEach( ( currentFormat ) => { if ( currentFormat?.type === FORMAT_TYPE ) { const className = currentFormat?.attributes?.class; + currentFormat.attributes.style = currentFormat.attributes.style.replace( + ' ', + '' + ); className?.split( ' ' ).forEach( ( currentClass ) => { const match = currentClass.match( REGEX_TO_MATCH ); From b1231f4bce230fda446dfb7740f3fa4f04d3843b Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Wed, 3 Nov 2021 11:03:01 +0100 Subject: [PATCH 10/29] Mobile - Text color - Share index with web --- .../format-library/src/text-color/index.js | 20 +-- .../src/text-color/index.native.js | 117 ------------------ .../format-library/src/text-color/inline.js | 2 +- .../src/text-color/inline.native.js | 2 + .../rich-text/src/get-format-colors.native.js | 2 +- 5 files changed, 15 insertions(+), 128 deletions(-) delete mode 100644 packages/format-library/src/text-color/index.native.js diff --git a/packages/format-library/src/text-color/index.js b/packages/format-library/src/text-color/index.js index 77824a26d69ba5..2308d98639bfb7 100644 --- a/packages/format-library/src/text-color/index.js +++ b/packages/format-library/src/text-color/index.js @@ -7,7 +7,7 @@ import { isEmpty } from 'lodash'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useCallback, useMemo, useState } from '@wordpress/element'; +import { useCallback, useMemo, useState, Platform } from '@wordpress/element'; import { RichTextToolbarButton, useSetting } from '@wordpress/block-editor'; import { Icon, textColor as textColorIcon } from '@wordpress/icons'; import { removeFormat } from '@wordpress/rich-text'; @@ -69,14 +69,16 @@ function TextColorEdit( { const disableIsAddingColor = useCallback( () => setIsAddingColor( false ), [ setIsAddingColor, ] ); - const colorIndicatorStyle = useMemo( - () => - fillComputedColors( - contentRef.current, - getActiveColors( value, name, colors ) - ), - [ value, colors ] - ); + const colorIndicatorStyle = useMemo( () => { + const currentActiveColors = getActiveColors( value, name, colors ); + const isWeb = Platform.OS === 'web'; + + return isWeb + ? fillComputedColors( contentRef.current, currentActiveColors ) + : currentActiveColors?.color && { + color: currentActiveColors.color, + }; + }, [ value, colors ] ); const hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl; if ( ! hasColorsToChoose && ! isActive ) { diff --git a/packages/format-library/src/text-color/index.native.js b/packages/format-library/src/text-color/index.native.js deleted file mode 100644 index b50bba19bafcfc..00000000000000 --- a/packages/format-library/src/text-color/index.native.js +++ /dev/null @@ -1,117 +0,0 @@ -/** - * External dependencies - */ -import { isEmpty } from 'lodash'; - -/** - * WordPress dependencies - */ - -import { __ } from '@wordpress/i18n'; -import { useCallback, useMemo, useState } from '@wordpress/element'; -import { RichTextToolbarButton, useSetting } from '@wordpress/block-editor'; -import { Icon, textColor as textColorIcon } from '@wordpress/icons'; -import { removeFormat } from '@wordpress/rich-text'; - -/** - * Internal dependencies - */ -import { getActiveColors } from './inline.js'; -import { default as InlineColorUI } from './inline'; - -const name = 'core/text-color'; -const title = __( 'Text color' ); - -const EMPTY_ARRAY = []; - -function TextColorEdit( { - value, - onChange, - isActive, - activeAttributes, - contentRef, -} ) { - const allowCustomControl = useSetting( 'color.custom' ); - const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; - const [ isAddingColor, setIsAddingColor ] = useState( false ); - const enableIsAddingColor = useCallback( () => setIsAddingColor( true ), [ - setIsAddingColor, - ] ); - const disableIsAddingColor = useCallback( () => setIsAddingColor( false ), [ - setIsAddingColor, - ] ); - const colorIndicatorStyle = useMemo( () => { - const color = getActiveColors( value, name, colors )?.color; - - return { color: color?.replace( ' ', '' ) }; - }, [ value, colors ] ); - - const hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl; - if ( ! hasColorsToChoose && ! isActive ) { - return null; - } - - return ( - <> - - } - title={ title } - // If has no colors to choose but a color is active remove the color onClick - onClick={ - hasColorsToChoose - ? enableIsAddingColor - : () => onChange( removeFormat( value, name ) ) - } - /> - { isAddingColor && ( - - ) } - - ); -} - -export const textColor = { - name, - title, - tagName: 'mark', - className: 'has-inline-color', - attributes: { - style: 'style', - class: 'class', - }, - /* - * Since this format relies on the tag, it's important to - * prevent the default yellow background color applied by most - * browsers. The solution is to detect when this format is used with a - * text color but no background color, and in such cases to override - * the default styling with a transparent background. - * - * @see https://github.com/WordPress/gutenberg/pull/35516 - */ - __unstableFilterAttributeValue( key, value ) { - if ( key !== 'style' ) return value; - // We should not add a background-color if it's already set - if ( value && value.includes( 'background-color' ) ) return value; - const addedCSS = [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' ); - // Prepend `addedCSS` to avoid a double `;;` as any the existing CSS - // rules will already include a `;`. - return value ? [ addedCSS, value ].join( ';' ) : addedCSS; - }, - edit: TextColorEdit, -}; diff --git a/packages/format-library/src/text-color/inline.js b/packages/format-library/src/text-color/inline.js index fcb0a19589d8ce..11a01722e5328c 100644 --- a/packages/format-library/src/text-color/inline.js +++ b/packages/format-library/src/text-color/inline.js @@ -32,7 +32,7 @@ import { textColor as settings } from './index'; function parseCSS( css = '' ) { return css.split( ';' ).reduce( ( accumulator, rule ) => { if ( rule ) { - const [ property, value ] = rule.split( ':' ); + const [ property, value ] = rule.replace( / /g, '' ).split( ':' ); if ( property === 'color' ) accumulator.color = value; if ( property === 'background-color' ) accumulator.backgroundColor = value; diff --git a/packages/format-library/src/text-color/inline.native.js b/packages/format-library/src/text-color/inline.native.js index 9408cd45ca29a3..090550daf41028 100644 --- a/packages/format-library/src/text-color/inline.native.js +++ b/packages/format-library/src/text-color/inline.native.js @@ -86,6 +86,8 @@ function ColorPicker( { name, value, onChange } ) { ); } +export { getActiveColors }; + export default function InlineColorUI( { name, value, onChange, onClose } ) { return ( Date: Thu, 4 Nov 2021 13:43:05 +0100 Subject: [PATCH 11/29] Mobile - Move text color formatting button to its own ToolbarGroup --- .../rich-text/format-toolbar/index.native.js | 2 +- .../src/default-formats.native.js | 2 +- .../format-library/src/text-color/index.js | 20 ++- .../src/text-color/index.native.js | 123 ++++++++++++++++++ .../src/text-color/inline.native.js | 2 - 5 files changed, 134 insertions(+), 15 deletions(-) create mode 100644 packages/format-library/src/text-color/index.native.js diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js index 2b9101214516b5..4e0eec85e0bdb0 100644 --- a/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js +++ b/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js @@ -7,7 +7,7 @@ import { Slot } from '@wordpress/components'; const FormatToolbar = () => { return ( <> - { [ 'text-color', 'bold', 'italic', 'link' ].map( ( format ) => ( + { [ 'bold', 'italic', 'link' ].map( ( format ) => ( setIsAddingColor( false ), [ setIsAddingColor, ] ); - const colorIndicatorStyle = useMemo( () => { - const currentActiveColors = getActiveColors( value, name, colors ); - const isWeb = Platform.OS === 'web'; - - return isWeb - ? fillComputedColors( contentRef.current, currentActiveColors ) - : currentActiveColors?.color && { - color: currentActiveColors.color, - }; - }, [ value, colors ] ); + const colorIndicatorStyle = useMemo( + () => + fillComputedColors( + contentRef.current, + getActiveColors( value, name, colors ) + ), + [ value, colors ] + ); const hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl; if ( ! hasColorsToChoose && ! isActive ) { diff --git a/packages/format-library/src/text-color/index.native.js b/packages/format-library/src/text-color/index.native.js new file mode 100644 index 00000000000000..67bfa52b562d50 --- /dev/null +++ b/packages/format-library/src/text-color/index.native.js @@ -0,0 +1,123 @@ +/** + * External dependencies + */ +import { isEmpty } from 'lodash'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useCallback, useMemo, useState } from '@wordpress/element'; +import { BlockControls, useSetting } from '@wordpress/block-editor'; +import { ToolbarGroup, ToolbarButton } from '@wordpress/components'; +import { Icon, textColor as textColorIcon } from '@wordpress/icons'; +import { removeFormat } from '@wordpress/rich-text'; + +/** + * Internal dependencies + */ +import { getActiveColors } from './inline.js'; +import { default as InlineColorUI } from './inline'; + +const name = 'core/text-color'; +const title = __( 'Text color' ); + +const EMPTY_ARRAY = []; + +function TextColorEdit( { + value, + onChange, + isActive, + activeAttributes, + contentRef, +} ) { + const allowCustomControl = useSetting( 'color.custom' ); + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; + const [ isAddingColor, setIsAddingColor ] = useState( false ); + const enableIsAddingColor = useCallback( () => setIsAddingColor( true ), [ + setIsAddingColor, + ] ); + const disableIsAddingColor = useCallback( () => setIsAddingColor( false ), [ + setIsAddingColor, + ] ); + const colorIndicatorStyle = useMemo( () => { + const color = getActiveColors( value, name, colors )?.color; + + return { color: color?.replace( ' ', '' ) }; + }, [ value, colors ] ); + + const hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl; + if ( ! hasColorsToChoose && ! isActive ) { + return null; + } + + return ( + <> + + + + } + title={ title } + // If has no colors to choose but a color is active remove the color onClick + onClick={ + hasColorsToChoose + ? enableIsAddingColor + : () => onChange( removeFormat( value, name ) ) + } + /> + + + { isAddingColor && ( + + ) } + + ); +} + +export const textColor = { + name, + title, + tagName: 'mark', + className: 'has-inline-color', + attributes: { + style: 'style', + class: 'class', + }, + /* + * Since this format relies on the tag, it's important to + * prevent the default yellow background color applied by most + * browsers. The solution is to detect when this format is used with a + * text color but no background color, and in such cases to override + * the default styling with a transparent background. + * + * @see https://github.com/WordPress/gutenberg/pull/35516 + */ + __unstableFilterAttributeValue( key, value ) { + if ( key !== 'style' ) return value; + // We should not add a background-color if it's already set + if ( value && value.includes( 'background-color' ) ) return value; + const addedCSS = [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' ); + // Prepend `addedCSS` to avoid a double `;;` as any the existing CSS + // rules will already include a `;`. + return value ? [ addedCSS, value ].join( ';' ) : addedCSS; + }, + edit: TextColorEdit, +}; diff --git a/packages/format-library/src/text-color/inline.native.js b/packages/format-library/src/text-color/inline.native.js index 090550daf41028..9408cd45ca29a3 100644 --- a/packages/format-library/src/text-color/inline.native.js +++ b/packages/format-library/src/text-color/inline.native.js @@ -86,8 +86,6 @@ function ColorPicker( { name, value, onChange } ) { ); } -export { getActiveColors }; - export default function InlineColorUI( { name, value, onChange, onClose } ) { return ( Date: Thu, 4 Nov 2021 13:49:29 +0100 Subject: [PATCH 12/29] Text color - Share setColors with Mobile --- .../format-library/src/text-color/inline.js | 2 +- .../src/text-color/inline.native.js | 46 ++----------------- 2 files changed, 4 insertions(+), 44 deletions(-) diff --git a/packages/format-library/src/text-color/inline.js b/packages/format-library/src/text-color/inline.js index 11a01722e5328c..34eda67d8e9c5c 100644 --- a/packages/format-library/src/text-color/inline.js +++ b/packages/format-library/src/text-color/inline.js @@ -69,7 +69,7 @@ export function getActiveColors( value, name, colorSettings ) { }; } -function setColors( value, name, colorSettings, colors ) { +export function setColors( value, name, colorSettings, colors ) { const { color, backgroundColor } = { ...getActiveColors( value, name, colorSettings ), ...colors, diff --git a/packages/format-library/src/text-color/inline.native.js b/packages/format-library/src/text-color/inline.native.js index 9408cd45ca29a3..e91675f71a6648 100644 --- a/packages/format-library/src/text-color/inline.native.js +++ b/packages/format-library/src/text-color/inline.native.js @@ -2,55 +2,15 @@ * WordPress dependencies */ import { useCallback, useMemo } from '@wordpress/element'; -import { applyFormat, removeFormat } from '@wordpress/rich-text'; -import { - getColorClassName, - getColorObjectByColorValue, - useSetting, -} from '@wordpress/block-editor'; +import { removeFormat } from '@wordpress/rich-text'; +import { useSetting } from '@wordpress/block-editor'; import { BottomSheet, ColorSettings } from '@wordpress/components'; /** * Internal dependencies */ import { textColor as settings } from './index'; -import { getActiveColors } from './inline.js'; - -function setColors( value, name, colorSettings, colors ) { - const { color, backgroundColor } = { - ...getActiveColors( value, name, colorSettings ), - ...colors, - }; - - if ( ! color && ! backgroundColor ) { - return removeFormat( value, name ); - } - - const styles = []; - const classNames = []; - const attributes = {}; - - if ( backgroundColor ) { - styles.push( [ 'background-color', backgroundColor ].join( ':' ) ); - } else { - // Override default browser color for mark element. - styles.push( [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' ) ); - } - - if ( color ) { - const colorObject = getColorObjectByColorValue( colorSettings, color ); - if ( colorObject ) { - classNames.push( getColorClassName( 'color', colorObject.slug ) ); - } else { - styles.push( [ 'color', color ].join( ':' ) ); - } - } - - if ( styles.length ) attributes.style = styles.join( ';' ); - if ( classNames.length ) attributes.class = classNames.join( ' ' ); - - return applyFormat( value, { type: name, attributes } ); -} +import { getActiveColors, setColors } from './inline.js'; function ColorPicker( { name, value, onChange } ) { const property = 'color'; From 572d01a1ed7abe8a534567f98c3dbe87170e83c1 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Thu, 4 Nov 2021 14:17:14 +0100 Subject: [PATCH 13/29] Mobile - Color settings - Reset button: Reduce hit slop and fix the width of the touchable space --- .../src/mobile/color-settings/palette.screen.native.js | 2 +- packages/components/src/mobile/color-settings/style.native.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/color-settings/palette.screen.native.js b/packages/components/src/mobile/color-settings/palette.screen.native.js index 62c331339ec41f..9c6ae92486538a 100644 --- a/packages/components/src/mobile/color-settings/palette.screen.native.js +++ b/packages/components/src/mobile/color-settings/palette.screen.native.js @@ -26,7 +26,7 @@ import { colorsUtils } from './utils'; import styles from './style.scss'; -const HIT_SLOP = { top: 22, bottom: 22, left: 22, right: 22 }; +const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 }; const PaletteScreen = () => { const route = useRoute(); diff --git a/packages/components/src/mobile/color-settings/style.native.scss b/packages/components/src/mobile/color-settings/style.native.scss index a9ab1ffab935f7..8798a2e7bd088f 100644 --- a/packages/components/src/mobile/color-settings/style.native.scss +++ b/packages/components/src/mobile/color-settings/style.native.scss @@ -45,7 +45,7 @@ } .clearButtonContainer { - align-items: flex-end; + align-self: flex-end; } .clearButton { From 271e0d5e4481b327e6ed70109d75f3601c9e40f5 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Thu, 4 Nov 2021 15:48:46 +0100 Subject: [PATCH 14/29] Mobile - Button component - Allow for a custom background color for the isActive state --- packages/components/src/button/index.native.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js index add3778275f863..b535278ea38bde 100644 --- a/packages/components/src/button/index.native.js +++ b/packages/components/src/button/index.native.js @@ -93,6 +93,7 @@ export function Button( props ) { label, shortcut, tooltipPosition, + isActiveStyle, } = props; const preferredColorScheme = usePreferredColorScheme(); @@ -102,6 +103,9 @@ export function Button( props ) { opacity: isDisabled ? 0.3 : 1, ...( fixedRatio && styles.fixedRatio ), ...( isPressed ? styles.buttonActive : styles.buttonInactive ), + ...( isActiveStyle?.backgroundColor && { + backgroundColor: isActiveStyle?.backgroundColor, + } ), }; const states = []; From 5239d53c02f889746d9addd0e2b3fbcae10b4ace Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Thu, 4 Nov 2021 15:49:31 +0100 Subject: [PATCH 15/29] Mobile - Text color - Set the background color in the format button --- .../src/text-color/index.native.js | 49 ++++++++++++++++--- 1 file changed, 42 insertions(+), 7 deletions(-) diff --git a/packages/format-library/src/text-color/index.native.js b/packages/format-library/src/text-color/index.native.js index 67bfa52b562d50..150d6d78331022 100644 --- a/packages/format-library/src/text-color/index.native.js +++ b/packages/format-library/src/text-color/index.native.js @@ -24,6 +24,36 @@ const title = __( 'Text color' ); const EMPTY_ARRAY = []; +function getComputedStyleProperty( element, property ) { + const { + props: { style = {} }, + } = element; + + if ( property === 'background-color' ) { + const { backgroundColor, baseColors } = style; + + if ( backgroundColor !== 'transparent' ) { + return backgroundColor; + } else if ( baseColors && baseColors?.color?.background ) { + return baseColors?.color?.background; + } + } +} + +function fillComputedColors( element, { color, backgroundColor } ) { + if ( ! color && ! backgroundColor ) { + return; + } + + return { + color: color || getComputedStyleProperty( element, 'color' ), + backgroundColor: + backgroundColor.replace( / /g, '' ) === 'rgba(0,0,0,0)' + ? getComputedStyleProperty( element, 'background-color' ) + : 'transparent', + }; +} + function TextColorEdit( { value, onChange, @@ -40,11 +70,14 @@ function TextColorEdit( { const disableIsAddingColor = useCallback( () => setIsAddingColor( false ), [ setIsAddingColor, ] ); - const colorIndicatorStyle = useMemo( () => { - const color = getActiveColors( value, name, colors )?.color; - - return { color: color?.replace( ' ', '' ) }; - }, [ value, colors ] ); + const colorIndicatorStyle = useMemo( + () => + fillComputedColors( + contentRef, + getActiveColors( value, name, colors ) + ), + [ value, colors ] + ); const hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl; if ( ! hasColorsToChoose && ! isActive ) { @@ -63,12 +96,14 @@ function TextColorEdit( { } title={ title } + extraProps={ { isActiveStyle: colorIndicatorStyle } } // If has no colors to choose but a color is active remove the color onClick onClick={ hasColorsToChoose From f3eb9bbca64a04fb1d9998ab510db4c71edb73f4 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Tue, 9 Nov 2021 15:14:49 +0100 Subject: [PATCH 16/29] Mobile - Text color format: Manually set the current format when there's no text selected. As well as resetting the active text color formatting if the text selection changes. --- .../src/text-color/index.native.js | 15 +++-- .../format-library/src/text-color/inline.js | 2 +- .../src/text-color/inline.native.js | 63 ++++++++++++++++++- .../rich-text/src/component/index.native.js | 23 ++++--- 4 files changed, 87 insertions(+), 16 deletions(-) diff --git a/packages/format-library/src/text-color/index.native.js b/packages/format-library/src/text-color/index.native.js index 150d6d78331022..a13c8bfe48ccc8 100644 --- a/packages/format-library/src/text-color/index.native.js +++ b/packages/format-library/src/text-color/index.native.js @@ -80,6 +80,15 @@ function TextColorEdit( { ); const hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl; + + const onPressButton = useCallback( () => { + if ( hasColorsToChoose ) { + enableIsAddingColor(); + } else { + onChange( removeFormat( value, name ) ); + } + }, [ hasColorsToChoose, value ] ); + if ( ! hasColorsToChoose && ! isActive ) { return null; } @@ -105,11 +114,7 @@ function TextColorEdit( { title={ title } extraProps={ { isActiveStyle: colorIndicatorStyle } } // If has no colors to choose but a color is active remove the color onClick - onClick={ - hasColorsToChoose - ? enableIsAddingColor - : () => onChange( removeFormat( value, name ) ) - } + onClick={ onPressButton } /> diff --git a/packages/format-library/src/text-color/inline.js b/packages/format-library/src/text-color/inline.js index 34eda67d8e9c5c..11a01722e5328c 100644 --- a/packages/format-library/src/text-color/inline.js +++ b/packages/format-library/src/text-color/inline.js @@ -69,7 +69,7 @@ export function getActiveColors( value, name, colorSettings ) { }; } -export function setColors( value, name, colorSettings, colors ) { +function setColors( value, name, colorSettings, colors ) { const { color, backgroundColor } = { ...getActiveColors( value, name, colorSettings ), ...colors, diff --git a/packages/format-library/src/text-color/inline.native.js b/packages/format-library/src/text-color/inline.native.js index e91675f71a6648..565c09044ffcc6 100644 --- a/packages/format-library/src/text-color/inline.native.js +++ b/packages/format-library/src/text-color/inline.native.js @@ -2,15 +2,63 @@ * WordPress dependencies */ import { useCallback, useMemo } from '@wordpress/element'; -import { removeFormat } from '@wordpress/rich-text'; -import { useSetting } from '@wordpress/block-editor'; +import { applyFormat, removeFormat } from '@wordpress/rich-text'; +import { + useSetting, + getColorClassName, + getColorObjectByColorValue, +} from '@wordpress/block-editor'; import { BottomSheet, ColorSettings } from '@wordpress/components'; /** * Internal dependencies */ import { textColor as settings } from './index'; -import { getActiveColors, setColors } from './inline.js'; +import { getActiveColors } from './inline.js'; + +function setColors( value, name, colorSettings, colors ) { + const { color, backgroundColor } = { + ...getActiveColors( value, name, colorSettings ), + ...colors, + }; + + if ( ! color && ! backgroundColor ) { + return removeFormat( value, name ); + } + + const styles = []; + const classNames = []; + const attributes = {}; + + if ( backgroundColor ) { + styles.push( [ 'background-color', backgroundColor ].join( ':' ) ); + } else { + // Override default browser color for mark element. + styles.push( [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' ) ); + } + + if ( color ) { + const colorObject = getColorObjectByColorValue( colorSettings, color ); + + if ( colorObject ) { + classNames.push( getColorClassName( 'color', colorObject.slug ) ); + styles.push( [ 'color', colorObject.color ].join( ':' ) ); + } else { + styles.push( [ 'color', color ].join( ':' ) ); + } + } + + if ( styles.length ) attributes.style = styles.join( ';' ); + if ( classNames.length ) attributes.class = classNames.join( ' ' ); + + const format = { type: name, attributes }; + + return value?.start !== value?.end + ? applyFormat( value, format ) + : // For cases when there is no text selected, formatting is forced + // for the first empty character + applyFormat( value, format, value?.start - 1, value?.end + 1 ); +} function ColorPicker( { name, value, onChange } ) { const property = 'color'; @@ -25,6 +73,15 @@ function ColorPicker( { name, value, onChange } ) { onChange( setColors( value, name, colors, { [ property ]: color } ) ); + // Remove formatting if the color was reset, there's no + // current selection and the previous character is a space + } else if ( + value?.start === value?.end && + value.text?.charAt( value?.end - 1 ) === ' ' + ) { + onChange( + removeFormat( value, name, value.end - 1, value.end ) + ); } else { onChange( removeFormat( value, name ) ); } diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index e142b45c6757aa..9d2153d4eb7b39 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -593,6 +593,7 @@ export class RichText extends Component { } onSelectionChange( start, end ) { + const { activeFormats: currentActiveFormats } = this.state; const hasChanged = this.selectionStart !== start || this.selectionEnd !== end; @@ -606,18 +607,26 @@ export class RichText extends Component { const isManual = this.lastAztecEventType !== 'input' && this.props.value === this.value; - const isFormatChange = - this.lastAztecEventType === 'format change' && - this.props.value !== this.value; - if ( - ( hasChanged && isManual ) || - ( this.isIOS && hasChanged && isFormatChange ) - ) { + if ( hasChanged && isManual ) { const value = this.createRecord(); const activeFormats = getActiveFormats( value ); this.setState( { activeFormats } ); } + // This resets the current active format after the selection changes + const textColorFormat = 'core/text-color'; + const isColorFormatChange = + this.lastAztecEventType === 'format change' && + currentActiveFormats?.[ 0 ]?.type === textColorFormat; + if ( this.isIOS && hasChanged && isColorFormatChange ) { + const value = this.createRecord(); + + if ( ! value?.formats?.[ value?.end - 1 ] ) { + const activeFormats = getActiveFormats( value ); + this.setState( { activeFormats } ); + } + } + this.props.onSelectionChange( start, end ); } From fd53dcbaa0bf6dfda19760796481a069235ea0ea Mon Sep 17 00:00:00 2001 From: Gerardo Date: Mon, 29 Nov 2021 12:06:24 +0100 Subject: [PATCH 17/29] Mobile - Aztec Text format - Add mark support --- .../wordpress/mobile/ReactNativeAztec/ReactAztecText.java | 6 ++++++ packages/rich-text/src/component/index.native.js | 1 + 2 files changed, 7 insertions(+) diff --git a/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java b/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java index cb702492349a8d..13340484b0ab9a 100644 --- a/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java +++ b/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java @@ -93,6 +93,7 @@ public class ReactAztecText extends AztecText { put(AztecTextFormat.FORMAT_CITE, "italic"); put(AztecTextFormat.FORMAT_STRIKETHROUGH, "strikethrough"); put(AztecTextFormat.FORMAT_UNDERLINE, "underline"); + put(AztecTextFormat.FORMAT_MARK, "mark"); } }; @@ -327,6 +328,9 @@ private void updateToolbarButtons(ArrayList appliedStyles) { if (currentStyle == AztecTextFormat.FORMAT_STRIKETHROUGH) { formattingOptions.add("strikethrough"); } + if (currentStyle == AztecTextFormat.FORMAT_MARK) { + formattingOptions.add("mark"); + } } // Check if the same formatting event was already sent @@ -535,6 +539,8 @@ public void setActiveFormats(Iterable newFormats) { break; case "underline": newFormatsSet.add(AztecTextFormat.FORMAT_UNDERLINE); + case "mark": + newFormatsSet.add(AztecTextFormat.FORMAT_MARK); break; } } diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 9d2153d4eb7b39..56a5adfc835c32 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -54,6 +54,7 @@ const gutenbergFormatNamesToAztec = { 'core/bold': 'bold', 'core/italic': 'italic', 'core/strikethrough': 'strikethrough', + 'core/text-color': 'mark', }; const EMPTY_PARAGRAPH_TAGS = '

'; From efb10591be1ecd4e0186b116e67d4064fa3a0b05 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Mon, 29 Nov 2021 12:42:40 +0100 Subject: [PATCH 18/29] Mobile - Update Aztec version --- packages/react-native-aztec/android/build.gradle | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native-aztec/android/build.gradle b/packages/react-native-aztec/android/build.gradle index 5069187c3d4509..0587caa3ff769a 100644 --- a/packages/react-native-aztec/android/build.gradle +++ b/packages/react-native-aztec/android/build.gradle @@ -9,7 +9,7 @@ buildscript { jSoupVersion = '1.10.3' wordpressUtilsVersion = '1.22' espressoVersion = '3.0.1' - aztecVersion = 'v1.5.0' + aztecVersion = '943-96a3deb9fbedae362ac48e01b5deb1e350528e79' willPublishReactNativeAztecBinary = properties["willPublishReactNativeAztecBinary"]?.toBoolean() ?: false } } From 51e920be267da82539101003855638ab4f9071e4 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Tue, 30 Nov 2021 12:29:18 +0100 Subject: [PATCH 19/29] Mobile - Rich Text - Mark formatting support for iOS --- .../ios/RNTAztecView/RCTAztecView.swift | 2 ++ packages/rich-text/src/component/index.native.js | 15 --------------- 2 files changed, 2 insertions(+), 15 deletions(-) diff --git a/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift b/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift index cdd28ea38d39eb..8e94be11f8323e 100644 --- a/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift +++ b/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift @@ -121,6 +121,7 @@ class RCTAztecView: Aztec.TextView { .italic: "italic", .strikethrough: "strikethrough", .link: "link", + .mark: "mark" ] override init(defaultFont: UIFont, defaultParagraphStyle: ParagraphStyle, defaultMissingImage: UIImage) { @@ -689,6 +690,7 @@ class RCTAztecView: Aztec.TextView { case "bold": toggleBold(range: emptyRange) case "italic": toggleItalic(range: emptyRange) case "strikethrough": toggleStrikethrough(range: emptyRange) + case "mark": toggleMark(range: emptyRange) default: print("Format not recognized") } } diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 56a5adfc835c32..779ca79b306f53 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -594,7 +594,6 @@ export class RichText extends Component { } onSelectionChange( start, end ) { - const { activeFormats: currentActiveFormats } = this.state; const hasChanged = this.selectionStart !== start || this.selectionEnd !== end; @@ -614,20 +613,6 @@ export class RichText extends Component { this.setState( { activeFormats } ); } - // This resets the current active format after the selection changes - const textColorFormat = 'core/text-color'; - const isColorFormatChange = - this.lastAztecEventType === 'format change' && - currentActiveFormats?.[ 0 ]?.type === textColorFormat; - if ( this.isIOS && hasChanged && isColorFormatChange ) { - const value = this.createRecord(); - - if ( ! value?.formats?.[ value?.end - 1 ] ) { - const activeFormats = getActiveFormats( value ); - this.setState( { activeFormats } ); - } - } - this.props.onSelectionChange( start, end ); } From 5cb684abeeb11e28bded3e6d8ff6fa3c76736336 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Tue, 30 Nov 2021 14:09:42 +0100 Subject: [PATCH 20/29] Temp for testing - Use commit reference for Aztec --- .../ios/GutenbergDemo.xcodeproj/project.pbxproj | 4 ++-- packages/react-native-editor/ios/Podfile | 3 +++ packages/react-native-editor/ios/Podfile.lock | 14 +++++++++++--- 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/packages/react-native-editor/ios/GutenbergDemo.xcodeproj/project.pbxproj b/packages/react-native-editor/ios/GutenbergDemo.xcodeproj/project.pbxproj index c04522f8808aa2..3d5afd6acedd72 100644 --- a/packages/react-native-editor/ios/GutenbergDemo.xcodeproj/project.pbxproj +++ b/packages/react-native-editor/ios/GutenbergDemo.xcodeproj/project.pbxproj @@ -324,6 +324,7 @@ ); inputPaths = ( "${PODS_ROOT}/Target Support Files/Pods-GutenbergDemo/Pods-GutenbergDemo-frameworks.sh", + "${BUILT_PRODUCTS_DIR}/WordPress-Aztec-iOS-framework/Aztec.framework", "${BUILT_PRODUCTS_DIR}/BVLinearGradient/BVLinearGradient.framework", "${BUILT_PRODUCTS_DIR}/DoubleConversion/DoubleConversion.framework", "${BUILT_PRODUCTS_DIR}/FBReactNativeSpec/FBReactNativeSpec.framework", @@ -352,7 +353,6 @@ "${BUILT_PRODUCTS_DIR}/React-jsinspector/jsinspector.framework", "${BUILT_PRODUCTS_DIR}/React-perflogger/reactperflogger.framework", "${BUILT_PRODUCTS_DIR}/ReactCommon/ReactCommon.framework", - "${BUILT_PRODUCTS_DIR}/WordPress-Aztec-iOS/Aztec.framework", "${BUILT_PRODUCTS_DIR}/Yoga/yoga.framework", "${BUILT_PRODUCTS_DIR}/glog/glog.framework", "${BUILT_PRODUCTS_DIR}/react-native-blur/react_native_blur.framework", @@ -365,6 +365,7 @@ ); name = "[CP] Embed Pods Frameworks"; outputPaths = ( + "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Aztec.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/BVLinearGradient.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/DoubleConversion.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/FBReactNativeSpec.framework", @@ -393,7 +394,6 @@ "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/jsinspector.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/reactperflogger.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/ReactCommon.framework", - "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Aztec.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/yoga.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/glog.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_blur.framework", diff --git a/packages/react-native-editor/ios/Podfile b/packages/react-native-editor/ios/Podfile index ecf582c8cd8fae..72c6ff8e7ceaa9 100644 --- a/packages/react-native-editor/ios/Podfile +++ b/packages/react-native-editor/ios/Podfile @@ -5,6 +5,9 @@ platform :ios, '13.0' require_relative '../../../node_modules/react-native/scripts/react_native_pods' require_relative '../../../node_modules/@react-native-community/cli-platform-ios/native_modules' +pod 'WordPress-Aztec-iOS', :git => 'https://github.com/wordpress-mobile/WordPress-Aztec-iOS.git', :commit => '60cbbd879bd3572c1ad008c366dd2590a9444f58' + + target 'GutenbergDemo' do # Comment the next line if you don't want to use dynamic frameworks use_frameworks! diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock index 4577ee4de87ba9..ce4e8393922dd8 100644 --- a/packages/react-native-editor/ios/Podfile.lock +++ b/packages/react-native-editor/ios/Podfile.lock @@ -355,12 +355,12 @@ DEPENDENCIES: - RNScreens (from `../../../node_modules/react-native-screens`) - RNSVG (from `../../../node_modules/react-native-svg`) - RNTAztecView (from `../../react-native-aztec`) + - WordPress-Aztec-iOS (from `https://github.com/wordpress-mobile/WordPress-Aztec-iOS.git`, commit `60cbbd879bd3572c1ad008c366dd2590a9444f58`) - Yoga (from `../../../node_modules/react-native/ReactCommon/yoga`) SPEC REPOS: trunk: - boost-for-react-native - - WordPress-Aztec-iOS EXTERNAL SOURCES: BVLinearGradient: @@ -449,15 +449,23 @@ EXTERNAL SOURCES: :path: "../../../node_modules/react-native-svg" RNTAztecView: :path: "../../react-native-aztec" + WordPress-Aztec-iOS: + :commit: 60cbbd879bd3572c1ad008c366dd2590a9444f58 + :git: https://github.com/wordpress-mobile/WordPress-Aztec-iOS.git Yoga: :path: "../../../node_modules/react-native/ReactCommon/yoga" +CHECKOUT OPTIONS: + WordPress-Aztec-iOS: + :commit: 60cbbd879bd3572c1ad008c366dd2590a9444f58 + :git: https://github.com/wordpress-mobile/WordPress-Aztec-iOS.git + SPEC CHECKSUMS: boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c BVLinearGradient: 1e5474c982efcfcaed47f368a61431bb38a4faf8 DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de FBLazyVector: 49cbe4b43e445b06bf29199b6ad2057649e4c8f5 - FBReactNativeSpec: ee3fc80110975e231c8537d2e434a8afabe66fdc + FBReactNativeSpec: 80e9cf1155002ee4720084d8813326d913815e2f glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62 Gutenberg: cb22fce31133194d87ce74b3f3d45ebf91b585cf RCT-Folly: ec7a233ccc97cc556cf7237f0db1ff65b986f27c @@ -500,6 +508,6 @@ SPEC CHECKSUMS: WordPress-Aztec-iOS: af36d9cb86a0109b568f516874870e2801ba1bd9 Yoga: 8c8436d4171c87504c648ae23b1d81242bdf3bbf -PODFILE CHECKSUM: db5f67a29ecba75541dad181ff59246b6da2fb09 +PODFILE CHECKSUM: 881a1826345fd9dbdf7302c452bccd010d6c35b0 COCOAPODS: 1.10.1 From e6db8d2940e3bfe1ab8226c7e2bc872448caea37 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Wed, 1 Dec 2021 17:22:27 +0100 Subject: [PATCH 21/29] Mobile - Text Color - Fix applying format --- .../src/text-color/inline.native.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/format-library/src/text-color/inline.native.js b/packages/format-library/src/text-color/inline.native.js index 565c09044ffcc6..3b31b4c86c37e5 100644 --- a/packages/format-library/src/text-color/inline.native.js +++ b/packages/format-library/src/text-color/inline.native.js @@ -53,11 +53,17 @@ function setColors( value, name, colorSettings, colors ) { const format = { type: name, attributes }; - return value?.start !== value?.end - ? applyFormat( value, format ) - : // For cases when there is no text selected, formatting is forced - // for the first empty character - applyFormat( value, format, value?.start - 1, value?.end + 1 ); + // For cases when there is no text selected, formatting is forced + // for the first empty character + if ( + value?.start === value?.end && + ( value?.text.length === 0 || + value.text?.charAt( value.end - 1 ) === ' ' ) + ) { + return applyFormat( value, format, value?.start - 1, value?.end + 1 ); + } + + return applyFormat( value, format ); } function ColorPicker( { name, value, onChange } ) { From 6944bd99a3b02056f07594b9741bc1afd6edc2fc Mon Sep 17 00:00:00 2001 From: Gerardo Date: Thu, 2 Dec 2021 19:18:34 +0100 Subject: [PATCH 22/29] Mobile - Button component - Adds new customContainerStyles prop --- packages/components/src/button/index.native.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js index b535278ea38bde..49a8a43c393cc6 100644 --- a/packages/components/src/button/index.native.js +++ b/packages/components/src/button/index.native.js @@ -94,17 +94,27 @@ export function Button( props ) { shortcut, tooltipPosition, isActiveStyle, + customContainerStyles, } = props; const preferredColorScheme = usePreferredColorScheme(); const isDisabled = ariaDisabled || disabled; + const containerStyle = [ + styles.container, + customContainerStyles && { ...customContainerStyles }, + ]; + const buttonViewStyle = { opacity: isDisabled ? 0.3 : 1, ...( fixedRatio && styles.fixedRatio ), ...( isPressed ? styles.buttonActive : styles.buttonInactive ), + ...( isPressed && + isActiveStyle?.borderRadius && { + borderRadius: isActiveStyle.borderRadius, + } ), ...( isActiveStyle?.backgroundColor && { - backgroundColor: isActiveStyle?.backgroundColor, + backgroundColor: isActiveStyle.backgroundColor, } ), }; @@ -163,7 +173,7 @@ export function Button( props ) { accessibilityHint={ hint } onPress={ onClick } onLongPress={ onLongPress } - style={ styles.container } + style={ containerStyle } disabled={ isDisabled } testID={ testID } > From bf598e1ac89493818bf70187d21d52a8301a3b40 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Thu, 2 Dec 2021 19:20:26 +0100 Subject: [PATCH 23/29] Mobile - Inline Text Color - Update styles for the color indicator --- .../src/text-color/index.native.js | 31 +++++++++++++++++-- .../src/text-color/style.native.scss | 23 ++++++++++++++ 2 files changed, 51 insertions(+), 3 deletions(-) create mode 100644 packages/format-library/src/text-color/style.native.scss diff --git a/packages/format-library/src/text-color/index.native.js b/packages/format-library/src/text-color/index.native.js index a13c8bfe48ccc8..51dca9470b0abe 100644 --- a/packages/format-library/src/text-color/index.native.js +++ b/packages/format-library/src/text-color/index.native.js @@ -2,6 +2,7 @@ * External dependencies */ import { isEmpty } from 'lodash'; +import { View } from 'react-native'; /** * WordPress dependencies @@ -12,12 +13,14 @@ import { BlockControls, useSetting } from '@wordpress/block-editor'; import { ToolbarGroup, ToolbarButton } from '@wordpress/components'; import { Icon, textColor as textColorIcon } from '@wordpress/icons'; import { removeFormat } from '@wordpress/rich-text'; +import { usePreferredColorSchemeStyle } from '@wordpress/compose'; /** * Internal dependencies */ import { getActiveColors } from './inline.js'; import { default as InlineColorUI } from './inline'; +import styles from './style.scss'; const name = 'core/text-color'; const title = __( 'Text color' ); @@ -89,30 +92,52 @@ function TextColorEdit( { } }, [ hasColorsToChoose, value ] ); + const outlineStyle = usePreferredColorSchemeStyle( + styles[ 'components-inline-color__outline' ], + styles[ 'components-inline-color__outline--dark' ] + ); + if ( ! hasColorsToChoose && ! isActive ) { return null; } + const isActiveStyle = { + ...colorIndicatorStyle, + ...( ! colorIndicatorStyle?.backgroundColor + ? { backgroundColor: 'transparent' } + : {} ), + ...styles[ 'components-inline-color--is-active' ], + }; + + const customContainerStyles = + styles[ 'components-inline-color__button-container' ]; + return ( <> + { isActive && ( + + ) } + } title={ title } - extraProps={ { isActiveStyle: colorIndicatorStyle } } + extraProps={ { + isActiveStyle, + customContainerStyles, + } } // If has no colors to choose but a color is active remove the color onClick onClick={ onPressButton } /> diff --git a/packages/format-library/src/text-color/style.native.scss b/packages/format-library/src/text-color/style.native.scss new file mode 100644 index 00000000000000..43e84e81ea7e99 --- /dev/null +++ b/packages/format-library/src/text-color/style.native.scss @@ -0,0 +1,23 @@ +.components-inline-color--is-active { + border-radius: 18px; +} + +.components-inline-color__outline { + border-color: $light-dim; + top: 6px; + bottom: 6px; + left: 11px; + right: 11px; + border-radius: 24px; + border-width: $border-width; + position: absolute; + z-index: 2; +} + +.components-inline-color__outline--dark { + border-color: $dark-ultra-dim; +} + +.components-inline-color__button-container { + padding: 6px; +} From 36b3d098b369e4e9ada6933e81be6aeab1b5ff45 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Fri, 3 Dec 2021 12:05:37 +0100 Subject: [PATCH 24/29] Mobile - Update changelog --- packages/react-native-editor/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index b80407a27aeefe..083955546c0f8e 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -11,6 +11,7 @@ For each user feature we should also add a importance categorization label to i ## Unreleased - [**] [iOS] Fix scroll update when typing in RichText component [#36914] +- [***] Highlight text - enables color customization for specific text within a Pragraph block [#36028] ## 1.67.0 - [**] Adds Clipboard Link Suggestion to Image block and Button block [#35972] From 5c816f48b6f64e5a637a1758a3c75d42127d5a80 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Thu, 9 Dec 2021 10:04:02 +0100 Subject: [PATCH 25/29] Mobile - Text color - use transparentValue --- .../format-library/src/text-color/index.native.js | 13 ++++++++----- .../format-library/src/text-color/inline.native.js | 3 ++- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/format-library/src/text-color/index.native.js b/packages/format-library/src/text-color/index.native.js index 51dca9470b0abe..98d94e091b0227 100644 --- a/packages/format-library/src/text-color/index.native.js +++ b/packages/format-library/src/text-color/index.native.js @@ -19,6 +19,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose'; * Internal dependencies */ import { getActiveColors } from './inline.js'; +import { transparentValue } from './index.js'; import { default as InlineColorUI } from './inline'; import styles from './style.scss'; @@ -40,6 +41,8 @@ function getComputedStyleProperty( element, property ) { } else if ( baseColors && baseColors?.color?.background ) { return baseColors?.color?.background; } + + return 'transparent'; } } @@ -50,10 +53,10 @@ function fillComputedColors( element, { color, backgroundColor } ) { return { color: color || getComputedStyleProperty( element, 'color' ), - backgroundColor: - backgroundColor.replace( / /g, '' ) === 'rgba(0,0,0,0)' - ? getComputedStyleProperty( element, 'background-color' ) - : 'transparent', + backgroundColor: getComputedStyleProperty( + element, + 'background-color' + ), }; } @@ -179,7 +182,7 @@ export const textColor = { if ( key !== 'style' ) return value; // We should not add a background-color if it's already set if ( value && value.includes( 'background-color' ) ) return value; - const addedCSS = [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' ); + const addedCSS = [ 'background-color', transparentValue ].join( ':' ); // Prepend `addedCSS` to avoid a double `;;` as any the existing CSS // rules will already include a `;`. return value ? [ addedCSS, value ].join( ';' ) : addedCSS; diff --git a/packages/format-library/src/text-color/inline.native.js b/packages/format-library/src/text-color/inline.native.js index 3b31b4c86c37e5..8711130177c369 100644 --- a/packages/format-library/src/text-color/inline.native.js +++ b/packages/format-library/src/text-color/inline.native.js @@ -14,6 +14,7 @@ import { BottomSheet, ColorSettings } from '@wordpress/components'; * Internal dependencies */ import { textColor as settings } from './index'; +import { transparentValue } from './index.js'; import { getActiveColors } from './inline.js'; function setColors( value, name, colorSettings, colors ) { @@ -34,7 +35,7 @@ function setColors( value, name, colorSettings, colors ) { styles.push( [ 'background-color', backgroundColor ].join( ':' ) ); } else { // Override default browser color for mark element. - styles.push( [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' ) ); + styles.push( [ 'background-color', transparentValue ].join( ':' ) ); } if ( color ) { From a621e87111cc4863fa34bfc8d62b3a31850e8165 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Thu, 9 Dec 2021 10:44:50 +0100 Subject: [PATCH 26/29] Mobile - Update Aztec Android version --- packages/react-native-aztec/android/build.gradle | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native-aztec/android/build.gradle b/packages/react-native-aztec/android/build.gradle index 0587caa3ff769a..27d4e4de038851 100644 --- a/packages/react-native-aztec/android/build.gradle +++ b/packages/react-native-aztec/android/build.gradle @@ -9,7 +9,7 @@ buildscript { jSoupVersion = '1.10.3' wordpressUtilsVersion = '1.22' espressoVersion = '3.0.1' - aztecVersion = '943-96a3deb9fbedae362ac48e01b5deb1e350528e79' + aztecVersion = 'v1.5.2' willPublishReactNativeAztecBinary = properties["willPublishReactNativeAztecBinary"]?.toBoolean() ?: false } } From ebafc449f3128a1eab36561d6737a4eac7a4d7d3 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Thu, 9 Dec 2021 11:08:53 +0100 Subject: [PATCH 27/29] Mobile - Text color - Inline component, use native variant of parseCSS --- .../format-library/src/text-color/inline.js | 4 +-- .../src/text-color/inline.native.js | 33 +++++++++++++++++-- 2 files changed, 33 insertions(+), 4 deletions(-) diff --git a/packages/format-library/src/text-color/inline.js b/packages/format-library/src/text-color/inline.js index 46d60b13ccf8d9..03a80fb18e6871 100644 --- a/packages/format-library/src/text-color/inline.js +++ b/packages/format-library/src/text-color/inline.js @@ -33,7 +33,7 @@ import { textColor as settings, transparentValue } from './index'; function parseCSS( css = '' ) { return css.split( ';' ).reduce( ( accumulator, rule ) => { if ( rule ) { - const [ property, value ] = rule.replace( / /g, '' ).split( ':' ); + const [ property, value ] = rule.split( ':' ); if ( property === 'color' ) accumulator.color = value; if ( property === 'background-color' && value !== transparentValue ) accumulator.backgroundColor = value; @@ -42,7 +42,7 @@ function parseCSS( css = '' ) { }, {} ); } -function parseClassName( className = '', colorSettings ) { +export function parseClassName( className = '', colorSettings ) { return className.split( ' ' ).reduce( ( accumulator, name ) => { // `colorSlug` could contain dashes, so simply match the start and end. if ( name.startsWith( 'has-' ) && name.endsWith( '-color' ) ) { diff --git a/packages/format-library/src/text-color/inline.native.js b/packages/format-library/src/text-color/inline.native.js index 8711130177c369..efbf6db545e5dd 100644 --- a/packages/format-library/src/text-color/inline.native.js +++ b/packages/format-library/src/text-color/inline.native.js @@ -2,7 +2,11 @@ * WordPress dependencies */ import { useCallback, useMemo } from '@wordpress/element'; -import { applyFormat, removeFormat } from '@wordpress/rich-text'; +import { + applyFormat, + removeFormat, + getActiveFormat, +} from '@wordpress/rich-text'; import { useSetting, getColorClassName, @@ -15,7 +19,32 @@ import { BottomSheet, ColorSettings } from '@wordpress/components'; */ import { textColor as settings } from './index'; import { transparentValue } from './index.js'; -import { getActiveColors } from './inline.js'; +import { parseClassName } from './inline.js'; + +function parseCSS( css = '' ) { + return css.split( ';' ).reduce( ( accumulator, rule ) => { + if ( rule ) { + const [ property, value ] = rule.replace( / /g, '' ).split( ':' ); + if ( property === 'color' ) accumulator.color = value; + if ( property === 'background-color' && value !== transparentValue ) + accumulator.backgroundColor = value; + } + return accumulator; + }, {} ); +} + +function getActiveColors( value, name, colorSettings ) { + const activeColorFormat = getActiveFormat( value, name ); + + if ( ! activeColorFormat ) { + return {}; + } + + return { + ...parseCSS( activeColorFormat.attributes.style ), + ...parseClassName( activeColorFormat.attributes.class, colorSettings ), + }; +} function setColors( value, name, colorSettings, colors ) { const { color, backgroundColor } = { From 9624442d110b1edced96009011075c43de598c9f Mon Sep 17 00:00:00 2001 From: Gerardo Date: Thu, 9 Dec 2021 12:20:18 +0100 Subject: [PATCH 28/29] Mobile - Update Aztec iOS version --- .../react-native-aztec/RNTAztecView.podspec | 2 +- .../GutenbergDemo.xcodeproj/project.pbxproj | 4 ++-- packages/react-native-editor/ios/Podfile | 3 --- packages/react-native-editor/ios/Podfile.lock | 20 ++++++------------- 4 files changed, 9 insertions(+), 20 deletions(-) diff --git a/packages/react-native-aztec/RNTAztecView.podspec b/packages/react-native-aztec/RNTAztecView.podspec index cdb8deed1e12c9..970a8b6af6a709 100644 --- a/packages/react-native-aztec/RNTAztecView.podspec +++ b/packages/react-native-aztec/RNTAztecView.podspec @@ -18,6 +18,6 @@ Pod::Spec.new do |s| s.xcconfig = {'OTHER_LDFLAGS' => '-lxml2', 'HEADER_SEARCH_PATHS' => '/usr/include/libxml2'} s.dependency 'React-Core' - s.dependency 'WordPress-Aztec-iOS', '~> 1.19.5' + s.dependency 'WordPress-Aztec-iOS', '~> 1.19.6' end diff --git a/packages/react-native-editor/ios/GutenbergDemo.xcodeproj/project.pbxproj b/packages/react-native-editor/ios/GutenbergDemo.xcodeproj/project.pbxproj index 3d5afd6acedd72..c04522f8808aa2 100644 --- a/packages/react-native-editor/ios/GutenbergDemo.xcodeproj/project.pbxproj +++ b/packages/react-native-editor/ios/GutenbergDemo.xcodeproj/project.pbxproj @@ -324,7 +324,6 @@ ); inputPaths = ( "${PODS_ROOT}/Target Support Files/Pods-GutenbergDemo/Pods-GutenbergDemo-frameworks.sh", - "${BUILT_PRODUCTS_DIR}/WordPress-Aztec-iOS-framework/Aztec.framework", "${BUILT_PRODUCTS_DIR}/BVLinearGradient/BVLinearGradient.framework", "${BUILT_PRODUCTS_DIR}/DoubleConversion/DoubleConversion.framework", "${BUILT_PRODUCTS_DIR}/FBReactNativeSpec/FBReactNativeSpec.framework", @@ -353,6 +352,7 @@ "${BUILT_PRODUCTS_DIR}/React-jsinspector/jsinspector.framework", "${BUILT_PRODUCTS_DIR}/React-perflogger/reactperflogger.framework", "${BUILT_PRODUCTS_DIR}/ReactCommon/ReactCommon.framework", + "${BUILT_PRODUCTS_DIR}/WordPress-Aztec-iOS/Aztec.framework", "${BUILT_PRODUCTS_DIR}/Yoga/yoga.framework", "${BUILT_PRODUCTS_DIR}/glog/glog.framework", "${BUILT_PRODUCTS_DIR}/react-native-blur/react_native_blur.framework", @@ -365,7 +365,6 @@ ); name = "[CP] Embed Pods Frameworks"; outputPaths = ( - "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Aztec.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/BVLinearGradient.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/DoubleConversion.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/FBReactNativeSpec.framework", @@ -394,6 +393,7 @@ "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/jsinspector.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/reactperflogger.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/ReactCommon.framework", + "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Aztec.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/yoga.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/glog.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_blur.framework", diff --git a/packages/react-native-editor/ios/Podfile b/packages/react-native-editor/ios/Podfile index 72c6ff8e7ceaa9..ecf582c8cd8fae 100644 --- a/packages/react-native-editor/ios/Podfile +++ b/packages/react-native-editor/ios/Podfile @@ -5,9 +5,6 @@ platform :ios, '13.0' require_relative '../../../node_modules/react-native/scripts/react_native_pods' require_relative '../../../node_modules/@react-native-community/cli-platform-ios/native_modules' -pod 'WordPress-Aztec-iOS', :git => 'https://github.com/wordpress-mobile/WordPress-Aztec-iOS.git', :commit => '60cbbd879bd3572c1ad008c366dd2590a9444f58' - - target 'GutenbergDemo' do # Comment the next line if you don't want to use dynamic frameworks use_frameworks! diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock index ce4e8393922dd8..83d654fab35a05 100644 --- a/packages/react-native-editor/ios/Podfile.lock +++ b/packages/react-native-editor/ios/Podfile.lock @@ -305,8 +305,8 @@ PODS: - React-Core - RNTAztecView (1.67.0): - React-Core - - WordPress-Aztec-iOS (~> 1.19.5) - - WordPress-Aztec-iOS (1.19.5) + - WordPress-Aztec-iOS (~> 1.19.6) + - WordPress-Aztec-iOS (1.19.6) - Yoga (1.14.0) DEPENDENCIES: @@ -355,12 +355,12 @@ DEPENDENCIES: - RNScreens (from `../../../node_modules/react-native-screens`) - RNSVG (from `../../../node_modules/react-native-svg`) - RNTAztecView (from `../../react-native-aztec`) - - WordPress-Aztec-iOS (from `https://github.com/wordpress-mobile/WordPress-Aztec-iOS.git`, commit `60cbbd879bd3572c1ad008c366dd2590a9444f58`) - Yoga (from `../../../node_modules/react-native/ReactCommon/yoga`) SPEC REPOS: trunk: - boost-for-react-native + - WordPress-Aztec-iOS EXTERNAL SOURCES: BVLinearGradient: @@ -449,17 +449,9 @@ EXTERNAL SOURCES: :path: "../../../node_modules/react-native-svg" RNTAztecView: :path: "../../react-native-aztec" - WordPress-Aztec-iOS: - :commit: 60cbbd879bd3572c1ad008c366dd2590a9444f58 - :git: https://github.com/wordpress-mobile/WordPress-Aztec-iOS.git Yoga: :path: "../../../node_modules/react-native/ReactCommon/yoga" -CHECKOUT OPTIONS: - WordPress-Aztec-iOS: - :commit: 60cbbd879bd3572c1ad008c366dd2590a9444f58 - :git: https://github.com/wordpress-mobile/WordPress-Aztec-iOS.git - SPEC CHECKSUMS: boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c BVLinearGradient: 1e5474c982efcfcaed47f368a61431bb38a4faf8 @@ -504,10 +496,10 @@ SPEC CHECKSUMS: RNReanimated: 39a9478eb635667c9a4da08ac906add9901b145e RNScreens: 185dcb481fab2f3dc77413f62b43dc3df826029c RNSVG: 9c0db12736608e32841e90fe9773db70ea40de20 - RNTAztecView: 59ba50af03168074634543b40595a9c29afa39ff - WordPress-Aztec-iOS: af36d9cb86a0109b568f516874870e2801ba1bd9 + RNTAztecView: 28dd2b1cdb74cb8161d76a7c1defbda1ad2f737a + WordPress-Aztec-iOS: 129276e7d1391acb08157641a54394668bb0d7f8 Yoga: 8c8436d4171c87504c648ae23b1d81242bdf3bbf -PODFILE CHECKSUM: 881a1826345fd9dbdf7302c452bccd010d6c35b0 +PODFILE CHECKSUM: db5f67a29ecba75541dad181ff59246b6da2fb09 COCOAPODS: 1.10.1 From 34eec4128d7422150a9a0aaa44551b67cb6c2f15 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Thu, 9 Dec 2021 12:48:06 +0100 Subject: [PATCH 29/29] Mobile - Rich Text - Update core naming to default --- packages/rich-text/src/component/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index ed2cc88eb309ef..98491637663629 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -1181,7 +1181,7 @@ export default compose( [ const colorPalette = experimentalFeatures?.user ?? experimentalFeatures?.theme ?? - experimentalFeatures?.core ?? + experimentalFeatures?.default ?? settings?.colors; return {