Skip to content

Commit

Permalink
Mobile: remove rich text multiline (#56117)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ellatrix
ellatrix authored Dec 7, 2023
1 parent b45f22c commit d541afc
Show file tree
Hide file tree
Showing 5 changed files with 70 additions and 119 deletions.
51 changes: 5 additions & 46 deletions packages/block-editor/src/components/rich-text/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,11 @@ import {
createContext,
} from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
import { children as childrenSource } from '@wordpress/blocks';
import { useInstanceId, useMergeRefs } from '@wordpress/compose';
import { useMergeRefs } from '@wordpress/compose';
import {
__unstableUseRichText as useRichText,
__unstableCreateElement,
removeFormat,
} from '@wordpress/rich-text';
import deprecated from '@wordpress/deprecated';
import { Popover } from '@wordpress/components';

/**
Expand All @@ -46,7 +43,7 @@ import { useFirefoxCompat } from './use-firefox-compat';
import FormatEdit from './format-edit';
import { getAllowedFormats } from './utils';
import { Content } from './content';
import RichTextMultiline from './multiline';
import { withDeprecations } from './with-deprecations';

export const keyboardShortcutContext = createContext();
export const inputEventContext = createContext();
Expand Down Expand Up @@ -387,47 +384,9 @@ export function RichTextWrapper(
);
}

const ForwardedRichTextWrapper = forwardRef( RichTextWrapper );

function RichTextSwitcher( props, ref ) {
let value = props.value;
let onChange = props.onChange;

// Handle deprecated format.
if ( Array.isArray( value ) ) {
deprecated( 'wp.blockEditor.RichText value prop as children type', {
since: '6.1',
version: '6.3',
alternative: 'value prop as string',
link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
} );

value = childrenSource.toHTML( props.value );
onChange = ( newValue ) =>
props.onChange(
childrenSource.fromDOM(
__unstableCreateElement( document, newValue ).childNodes
)
);
}

const Component = props.multiline
? RichTextMultiline
: ForwardedRichTextWrapper;
const instanceId = useInstanceId( RichTextSwitcher );

return (
<Component
{ ...props }
identifier={ props.identifier || instanceId }
value={ value }
onChange={ onChange }
ref={ ref }
/>
);
}

const ForwardedRichTextContainer = forwardRef( RichTextSwitcher );
const ForwardedRichTextContainer = withDeprecations(
forwardRef( RichTextWrapper )
);

ForwardedRichTextContainer.Content = Content;
ForwardedRichTextContainer.isEmpty = ( value ) => {
Expand Down
33 changes: 8 additions & 25 deletions packages/block-editor/src/components/rich-text/index.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,17 +39,17 @@ import FormatToolbarContainer from './format-toolbar-container';
import { store as blockEditorStore } from '../../store';
import {
addActiveFormats,
getMultilineTag,
getAllowedFormats,
createLinkInParagraph,
} from './utils';
import EmbedHandlerPicker from './embed-handler-picker';
import { Content } from './content';
import RichText from './native';
import { withDeprecations } from './with-deprecations';

const classes = 'block-editor-rich-text__editable';

function RichTextWrapper(
export function RichTextWrapper(
{
children,
tagName,
Expand All @@ -58,7 +58,6 @@ function RichTextWrapper(
value: originalValue,
onChange: originalOnChange,
isSelected: originalIsSelected,
multiline,
inlineToolbar,
wrapperClassName,
autocompleters,
Expand All @@ -80,7 +79,6 @@ function RichTextWrapper(
disableLineBreaks,
unstableOnFocus,
__unstableAllowPrefixTransformations,
__unstableMultilineRootTag,
// Native props.
__unstableMobileNoFocusOnMount,
deleteEnter,
Expand Down Expand Up @@ -179,7 +177,6 @@ function RichTextWrapper(
selectionChange,
__unstableMarkAutomaticChange,
} = useDispatch( blockEditorStore );
const multilineTag = getMultilineTag( multiline );
const adjustedAllowedFormats = getAllowedFormats( {
allowedFormats,
disableFormats,
Expand Down Expand Up @@ -261,10 +258,7 @@ function RichTextWrapper(
if ( ! hasPastedBlocks || ! isEmpty( before ) ) {
blocks.push(
onSplit(
toHTMLString( {
value: before,
multilineTag,
} ),
toHTMLString( { value: before } ),
! isAfterOriginal
)
);
Expand All @@ -288,13 +282,7 @@ function RichTextWrapper(
: ! onSplitMiddle || ! isEmpty( after )
) {
blocks.push(
onSplit(
toHTMLString( {
value: after,
multilineTag,
} ),
isAfterOriginal
)
onSplit( toHTMLString( { value: after } ), isAfterOriginal )
);
}

Expand All @@ -308,7 +296,7 @@ function RichTextWrapper(

onReplace( blocks, indexToSelect, initialPosition );
},
[ onReplace, onSplit, multilineTag, onSplitMiddle ]
[ onReplace, onSplit, onSplitMiddle ]
);

const onEnter = useCallback(
Expand Down Expand Up @@ -370,7 +358,6 @@ function RichTextWrapper(
onReplace,
onSplit,
__unstableMarkAutomaticChange,
multiline,
splitValue,
onSplitAtEnd,
]
Expand All @@ -392,9 +379,6 @@ function RichTextWrapper(
if ( isInternal ) {
const pastedValue = create( {
html,
multilineTag,
multilineWrapperTags:
multilineTag === 'li' ? [ 'ul', 'ol' ] : undefined,
preserveWhiteSpace,
} );
addActiveFormats( pastedValue, activeFormats );
Expand Down Expand Up @@ -496,7 +480,6 @@ function RichTextWrapper(
onSplit,
splitValue,
__unstableEmbedURLOnPaste,
multilineTag,
preserveWhiteSpace,
pastePlainText,
]
Expand Down Expand Up @@ -568,7 +551,6 @@ function RichTextWrapper(
onPaste={ onPaste }
__unstableIsSelected={ isSelected }
__unstableInputRule={ inputRule }
__unstableMultilineTag={ multilineTag }
__unstableOnEnterFormattedText={ enterFormattedText }
__unstableOnExitFormattedText={ exitFormattedText }
__unstableOnCreateUndoLevel={ __unstableMarkLastChangeAsPersistent }
Expand All @@ -582,7 +564,6 @@ function RichTextWrapper(
__unstableAllowPrefixTransformations={
__unstableAllowPrefixTransformations
}
__unstableMultilineRootTag={ __unstableMultilineRootTag }
// Native props.
blockIsSelected={
originalIsSelected !== undefined
Expand Down Expand Up @@ -675,7 +656,9 @@ function RichTextWrapper(
);
}

const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
const ForwardedRichTextContainer = withDeprecations(
forwardRef( RichTextWrapper )
);

ForwardedRichTextContainer.Content = Content;

Expand Down
53 changes: 6 additions & 47 deletions packages/block-editor/src/components/rich-text/native/index.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,27 +105,11 @@ const DEFAULT_FONT_SIZE = 16;
const MIN_LINE_HEIGHT = 1;

export class RichText extends Component {
constructor( {
value,
selectionStart,
selectionEnd,
__unstableMultilineTag: multiline,
} ) {
constructor( { value, selectionStart, selectionEnd } ) {
super( ...arguments );

this.isMultiline = false;
if ( multiline === true || multiline === 'p' || multiline === 'li' ) {
this.multilineTag = multiline === true ? 'p' : multiline;
this.isMultiline = true;
}

if ( this.multilineTag === 'li' ) {
this.multilineWrapperTags = [ 'ul', 'ol' ];
}

this.isIOS = Platform.OS === 'ios';
this.createRecord = this.createRecord.bind( this );
this.restoreParagraphTags = this.restoreParagraphTags.bind( this );
this.onChangeFromAztec = this.onChangeFromAztec.bind( this );
this.onKeyDown = this.onKeyDown.bind( this );
this.handleEnter = this.handleEnter.bind( this );
Expand Down Expand Up @@ -223,8 +207,6 @@ export class RichText extends Component {
...create( {
html: this.value,
range: null,
multilineTag: this.multilineTag,
multilineWrapperTags: this.multilineWrapperTags,
preserveWhiteSpace,
} ),
};
Expand All @@ -235,12 +217,7 @@ export class RichText extends Component {

valueToFormat( value ) {
// Remove the outer root tags.
return this.removeRootTagsProducedByAztec(
toHTMLString( {
value,
multilineTag: this.multilineTag,
} )
);
return this.removeRootTagsProducedByAztec( toHTMLString( { value } ) );
}

getActiveFormatNames( record ) {
Expand Down Expand Up @@ -357,29 +334,15 @@ export class RichText extends Component {
const contentWithoutRootTag = this.removeRootTagsProducedByAztec(
unescapeSpaces( event.nativeEvent.text )
);
let formattedContent = contentWithoutRootTag;
if ( ! this.isIOS ) {
formattedContent = this.restoreParagraphTags(
contentWithoutRootTag,
this.multilineTag
);
}

this.debounceCreateUndoLevel();
const refresh = this.value !== formattedContent;
this.value = formattedContent;
const refresh = this.value !== contentWithoutRootTag;
this.value = contentWithoutRootTag;

// We don't want to refresh if our goal is just to create a record.
if ( refresh ) {
this.props.onChange( formattedContent );
}
}

restoreParagraphTags( value, tag ) {
if ( tag === 'p' && ( ! value || ! value.startsWith( '<p>' ) ) ) {
return '<p>' + value + '</p>';
this.props.onChange( contentWithoutRootTag );
}
return value;
}

/*
Expand Down Expand Up @@ -739,17 +702,13 @@ export class RichText extends Component {
if ( Array.isArray( value ) ) {
return create( {
html: childrenBlock.toHTML( value ),
multilineTag: this.multilineTag,
multilineWrapperTags: this.multilineWrapperTags,
preserveWhiteSpace,
} );
}

if ( this.props.format === 'string' ) {
return create( {
html: value,
multilineTag: this.multilineTag,
multilineWrapperTags: this.multilineWrapperTags,
preserveWhiteSpace,
} );
}
Expand Down Expand Up @@ -1323,7 +1282,7 @@ export class RichText extends Component {
fontWeight={ this.props.fontWeight }
fontStyle={ this.props.fontStyle }
disableEditingMenu={ disableEditingMenu }
isMultiline={ this.isMultiline }
isMultiline={ false }
textAlign={ this.props.textAlign }
{ ...( this.isIOS ? { maxWidth } : {} ) }
minWidth={ minWidth }
Expand Down
51 changes: 51 additions & 0 deletions packages/block-editor/src/components/rich-text/with-deprecations.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/**
* WordPress dependencies
*/
import { forwardRef } from '@wordpress/element';
import { children as childrenSource } from '@wordpress/blocks';
import { useInstanceId } from '@wordpress/compose';
import { __unstableCreateElement } from '@wordpress/rich-text';
import deprecated from '@wordpress/deprecated';

/**
* Internal dependencies
*/
import RichTextMultiline from './multiline';

export function withDeprecations( Component ) {
return forwardRef( ( props, ref ) => {
let value = props.value;
let onChange = props.onChange;

// Handle deprecated format.
if ( Array.isArray( value ) ) {
deprecated( 'wp.blockEditor.RichText value prop as children type', {
since: '6.1',
version: '6.3',
alternative: 'value prop as string',
link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
} );

value = childrenSource.toHTML( props.value );
onChange = ( newValue ) =>
props.onChange(
childrenSource.fromDOM(
__unstableCreateElement( document, newValue ).childNodes
)
);
}

const NewComponent = props.multiline ? RichTextMultiline : Component;
const instanceId = useInstanceId( NewComponent );

return (
<NewComponent
{ ...props }
identifier={ props.identifier || instanceId }
value={ value }
onChange={ onChange }
ref={ ref }
/>
);
} );
}
1 change: 0 additions & 1 deletion packages/editor/src/components/post-title/index.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,6 @@ class PostTitle extends Component {
tagsToEliminate={ [ 'strong' ] }
unstableOnFocus={ this.props.onSelect }
onBlur={ this.props.onBlur } // Always assign onBlur as a props.
multiline={ false }
style={ titleStyles }
styles={ styles }
fontSize={ 24 }
Expand Down

1 comment on commit d541afc

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in d541afc.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7134863930
📝 Reported issues:

Please sign in to comment.