RichText: remove native props for web (#25700)

* Fix passing native props * Fix comment
WordPress · Sep 29, 2020 · 363df9f · 363df9f
1 parent d3b04b8
commit 363df9f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 22 deletions.
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
@@ -106,7 +106,6 @@ function RichTextWrapper(
  multiline,
  inlineToolbar,
  wrapperClassName,
- className,
  autocompleters,
  onReplace,
  placeholder,
@@ -120,10 +119,6 @@ function RichTextWrapper(
  __unstableOnSplitAtEnd: onSplitAtEnd,
  __unstableOnSplitMiddle: onSplitMiddle,
  identifier,
- // To do: find a better way to implicitly inherit props.
- start: startAttr,
- reversed,
- style,
  preserveWhiteSpace,
  __unstableEmbedURLOnPaste,
  __unstableDisableFormats: disableFormats,
@@ -557,9 +552,6 @@ function RichTextWrapper(
  selectionEnd={ selectionEnd }
  onSelectionChange={ onSelectionChange }
  tagName={ tagName }
- className={ classnames( classes, className, {
- 'keep-placeholder-on-focus': keepPlaceholderOnFocus,
- } ) }
  placeholder={ placeholder }
  allowedFormats={ adjustedAllowedFormats }
  withoutInteractiveFormatting={ withoutInteractiveFormatting }
@@ -577,11 +569,8 @@ function RichTextWrapper(
  __unstableDidAutomaticChange={ didAutomaticChange }
  __unstableUndo={ undo }
  __unstableDisableFormats={ disableFormats }
- style={ style }
  preserveWhiteSpace={ preserveWhiteSpace }
  disabled={ disabled }
- start={ startAttr }
- reversed={ reversed }
  unstableOnFocus={ unstableOnFocus }
  __unstableAllowPrefixTransformations={
  __unstableAllowPrefixTransformations
@@ -611,9 +600,11 @@ function RichTextWrapper(
  maxWidth={ maxWidth }
  onBlur={ onBlur }
  setRef={ setRef }
- // Destructuring the id prop before { ...props } doesn't work
- // correctly on web https://github.com/WordPress/gutenberg/pull/25624
+ // Props to be set on the editable container are destructured on the
+ // element itself for web (see below), but passed through rich text
+ // for native.
  id={ props.id }
+ style={ props.style }
  >
  { ( {
  isSelected: nestedIsSelected,
@@ -643,13 +634,27 @@ function RichTextWrapper(
  <TagName
  { ...editableProps }
  { ...props }
+ style={
+ props.style
+ ? {
+ ...props.style,
+ ...editableProps.style,
+ }
+ : editableProps.style
+ }
+ className={ classnames(
+ classes,
+ props.className,
+ editableProps.className,
+ {
+ 'keep-placeholder-on-focus': keepPlaceholderOnFocus,
+ }
+ ) }
  aria-autocomplete={
  listBoxId ? 'list' : undefined
  }
  aria-owns={ listBoxId }
  aria-activedescendant={ activeId }
- start={ startAttr }
- reversed={ reversed }
  onKeyDown={ ( event ) => {
  onKeyDown( event );
  editableProps.onKeyDown( event );

diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
 import { find, isNil } from 'lodash';
 
 /**
@@ -139,8 +138,6 @@ function RichText(
  children,
  allowedFormats,
  withoutInteractiveFormatting,
- style,
- className,
  placeholder,
  disabled,
  preserveWhiteSpace,
@@ -168,7 +165,6 @@ function RichText(
  __unstableOnExitFormattedText: onExitFormattedText,
  __unstableOnCreateUndoLevel: onCreateUndoLevel,
  __unstableIsSelected: isSelected,
- ...remainingProps
  },
  ref
 ) {
@@ -1103,10 +1099,9 @@ function RichText(
  role: 'textbox',
  'aria-multiline': true,
  'aria-label': placeholder,
- ...remainingProps,
  ref,
- style: style ? { ...style, whiteSpace } : defaultStyle,
- className: classnames( 'rich-text', className ),
+ style: defaultStyle,
+ className: 'rich-text',
  onPaste: handlePaste,
  onInput: handleInput,
  onCompositionStart: handleCompositionStart,