Quote block: button for cite add/remove

packages/block-editor/src/components/rich-text/index.js

@@ -75,7 +75,6 @@ function removeNativeProps( props ) {
  fontStyle,
  minWidth,
  maxWidth,
- setRef,
  disableSuggestions,
  disableAutocorrection,
  ...restProps

packages/block-editor/src/components/rich-text/index.native.js

@@ -94,14 +94,13 @@ export function RichTextWrapper(
  minWidth,
  maxWidth,
  onBlur,
- setRef,
  disableSuggestions,
  disableAutocorrection,
  containerWidth,
  onEnter: onCustomEnter,
  ...props
  },
- forwardedRef
+ providedRef
 ) {
  const instanceId = useInstanceId( RichTextWrapper );
 
@@ -529,13 +528,13 @@ export function RichTextWrapper(
  [ onReplace, __unstableMarkAutomaticChange ]
  );
 
- const mergedRef = useMergeRefs( [ forwardedRef, fallbackRef ] );
+ const mergedRef = useMergeRefs( [ providedRef, fallbackRef ] );
 
  return (
  <RichText
  clientId={ clientId }
  identifier={ identifier }
- ref={ mergedRef }
+ nativeEditorRef={ mergedRef }
  value={ adjustedValue }
  onChange={ adjustedOnChange }
  selectionStart={ selectionStart }
@@ -586,7 +585,6 @@ export function RichTextWrapper(
  minWidth={ minWidth }
  maxWidth={ maxWidth }
  onBlur={ onBlur }
- setRef={ setRef }
  disableSuggestions={ disableSuggestions }
  disableAutocorrection={ disableAutocorrection }
  containerWidth={ containerWidth }
@@ -657,27 +655,32 @@ export function RichTextWrapper(
  );
 }
 
-const ForwardedRichTextContainer = withDeprecations(
+// This export does not actually implement a private API, but was exported
+// under this name for interoperability with the web version of the RichText
+// component.
+export const PrivateRichText = withDeprecations(
  forwardRef( RichTextWrapper )
 );
 
-ForwardedRichTextContainer.Content = Content;
+PrivateRichText.Content = Content;
 
-ForwardedRichTextContainer.isEmpty = ( value ) => {
+PrivateRichText.isEmpty = ( value ) => {
  return ! value || value.length === 0;
 };
 
-ForwardedRichTextContainer.Content.defaultProps = {
+PrivateRichText.Content.defaultProps = {
  format: 'string',
  value: '',
 };
 
-ForwardedRichTextContainer.Raw = RichText;
+PrivateRichText.Raw = forwardRef( ( props, ref ) => (
+ <RichText { ...props } nativeEditorRef={ ref } />
+) );
 
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md
  */
-export default ForwardedRichTextContainer;
+export default PrivateRichText;
 export { RichTextShortcut } from './shortcut';
 export { RichTextToolbarButton } from './toolbar-button';
 export { __unstableRichTextInputEvent } from './input-event';

packages/block-editor/src/components/rich-text/native/index.native.js

@@ -1222,8 +1222,8 @@ export class RichText extends Component {
  ref={ ( ref ) => {
  this._editor = ref;
 
- if ( this.props.setRef ) {
- this.props.setRef( ref );
+ if ( this.props.nativeEditorRef ) {
+ this.props.nativeEditorRef( ref );
  }
  } }
  style={ {

packages/block-editor/src/private-apis.native.js

@@ -5,6 +5,7 @@ import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
 import { getRichTextValues } from './components/rich-text/get-rich-text-values';
 import { lock } from './lock-unlock';
+import { PrivateRichText } from './components/rich-text/';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -14,4 +15,5 @@ lock( privateApis, {
  ...globalStyles,
  ExperimentalBlockEditorProvider,
  getRichTextValues,
+ PrivateRichText,
 } );

packages/block-library/src/button/edit.native.js

@@ -494,7 +494,7 @@ function ButtonEdit( props ) {
  <View pointerEvents="none" style={ outLineStyles } />
  ) }
  <RichText
- setRef={ onSetRef }
+ ref={ onSetRef }
  placeholder={ placeholderText }
  value={ text }
  onChange={ onChangeText }

packages/block-library/src/quote/edit.js

@@ -10,21 +10,21 @@ import { __ } from '@wordpress/i18n';
 import {
  AlignmentControl,
  BlockControls,
- RichText,
  useBlockProps,
  useInnerBlocksProps,
  store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { BlockQuotation } from '@wordpress/components';
-import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import { useDispatch, useRegistry } from '@wordpress/data';
 import { Platform, useEffect } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
+import { verse } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { migrateToQuoteV2 } from './deprecated';
+import { Caption } from '../utils/caption';
 
 const isWebPlatform = Platform.OS === 'web';
 
@@ -73,23 +73,12 @@ export default function QuoteEdit( {
  clientId,
  className,
  style,
+ isSelected,
 } ) {
- const { textAlign, citation } = attributes;
+ const { textAlign } = attributes;
 
  useMigrateOnLoad( attributes, clientId );
 
- const hasSelection = useSelect(
- ( select ) => {
- const { isBlockSelected, hasSelectedInnerBlock } =
- select( blockEditorStore );
- return (
- hasSelectedInnerBlock( clientId, true ) ||
- isBlockSelected( clientId )
- );
- },
- [ clientId ]
- );
-
  const blockProps = useBlockProps( {
  className: classNames( className, {
  [ `has-text-align-${ textAlign }` ]: textAlign,
@@ -114,33 +103,27 @@ export default function QuoteEdit( {
  </BlockControls>
  <BlockQuotation { ...innerBlocksProps }>
  { innerBlocksProps.children }
- { ( ! RichText.isEmpty( citation ) || hasSelection ) && (
- <RichText
- identifier="citation"
- tagName={ isWebPlatform ? 'cite' : undefined }
- style={ { display: 'block' } }
- value={ citation }
- onChange={ ( nextCitation ) => {
- setAttributes( {
- citation: nextCitation,
- } );
- } }
- __unstableMobileNoFocusOnMount
- aria-label={ __( 'Quote citation' ) }
- placeholder={
- // translators: placeholder text used for the
- // citation
- __( 'Add citation' )
- }
- className="wp-block-quote__citation"
- __unstableOnSplitAtEnd={ () =>
- insertBlocksAfter(
- createBlock( getDefaultBlockName() )
- )
- }
- { ...( ! isWebPlatform ? { textAlign } : {} ) }
- />
- ) }
+ <Caption
+ attributeKey="citation"
+ tagName={ isWebPlatform ? 'cite' : undefined }
+ style={ isWebPlatform && { display: 'block' } }
+ isSelected={ isSelected }
+ attributes={ attributes }
+ setAttributes={ setAttributes }
+ __unstableMobileNoFocusOnMount
+ icon={ verse }
+ label={ __( 'Quote citation' ) }
+ placeholder={
+ // translators: placeholder text used for the
+ // citation
+ __( 'Add citation' )
+ }
+ addLabel={ __( 'Add citation' ) }
+ removeLabel={ __( 'Remove citation' ) }
+ className="wp-block-quote__citation"
+ insertBlocksAfter={ insertBlocksAfter }
+ { ...( ! isWebPlatform ? { textAlign } : {} ) }
+ />
  </BlockQuotation>
  </>
  );

packages/block-library/src/quote/test/edit.native.js

@@ -10,7 +10,6 @@ import {
  getEditorHtml,
  fireEvent,
  within,
- waitFor,
  typeInRichText,
 } from 'test/helpers';
 
@@ -40,14 +39,9 @@ describe( 'Quote', () => {
  },
  }
  );
- // Await inner blocks to be rendered
- const citationBlock = await waitFor( () =>
- screen.getByPlaceholderText( 'Add citation' )
- );
 
  // Act
  fireEvent.press( quoteBlock );
- // screen.debug();
  let quoteTextInput =
  within( quoteBlock ).getByPlaceholderText( 'Start writing…' );
  typeInRichText( quoteTextInput, 'A great statement.' );
@@ -61,6 +55,10 @@ describe( 'Quote', () => {
  'Start writing…'
  )[ 1 ];
  typeInRichText( quoteTextInput, 'Again.' );
+ fireEvent.press( screen.getByLabelText( 'Navigate Up' ) );
+ fireEvent.press( screen.getByLabelText( 'Add citation' ) );
+ const citationBlock =
+ await screen.findByPlaceholderText( 'Add citation' );
  const citationTextInput =
  within( citationBlock ).getByPlaceholderText( 'Add citation' );
  typeInRichText( citationTextInput, 'A person' );

packages/block-library/src/utils/caption.js

@@ -23,10 +23,8 @@ import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
  */
 import { unlock } from '../lock-unlock';
 
-const { PrivateRichText: RichText } = unlock( blockEditorPrivateApis );
-
 export function Caption( {
- key = 'caption',
+ attributeKey = 'caption',
  attributes,
  setAttributes,
  isSelected,
@@ -36,9 +34,15 @@ export function Caption( {
  showToolbarButton = true,
  className,
  disableEditing,
+ tagName = 'figcaption',
+ addLabel = __( 'Add caption' ),
+ removeLabel = __( 'Remove caption' ),
+ icon = captionIcon,
+ ...props
 } ) {
- const caption = attributes[ key ];
+ const caption = attributes[ attributeKey ];
  const prevCaption = usePrevious( caption );
+ const { PrivateRichText: RichText } = unlock( blockEditorPrivateApis );
  const isCaptionEmpty = RichText.isEmpty( caption );
  const isPrevCaptionEmpty = RichText.isEmpty( prevCaption );
  const [ showCaption, setShowCaption ] = useState( ! isCaptionEmpty );
@@ -74,24 +78,22 @@ export function Caption( {
  onClick={ () => {
  setShowCaption( ! showCaption );
  if ( showCaption && caption ) {
- setAttributes( { caption: undefined } );
+ setAttributes( {
+ [ attributeKey ]: undefined,
+ } );
  }
  } }
- icon={ captionIcon }
+ icon={ icon }
  isPressed={ showCaption }
- label={
- showCaption
- ? __( 'Remove caption' )
- : __( 'Add caption' )
- }
+ label={ showCaption ? removeLabel : addLabel }
  />
  </BlockControls>
  ) }
  { showCaption &&
  ( ! RichText.isEmpty( caption ) || isSelected ) && (
  <RichText
- identifier={ key }
- tagName="figcaption"
+ identifier={ attributeKey }
+ tagName={ tagName }
  className={ classnames(
  className,
  __experimentalGetElementClassName( 'caption' )
@@ -101,7 +103,7 @@ export function Caption( {
  placeholder={ placeholder }
  value={ caption }
  onChange={ ( value ) =>
- setAttributes( { caption: value } )
+ setAttributes( { [ attributeKey ]: value } )
  }
  inlineToolbar
  __unstableOnSplitAtEnd={ () =>
@@ -110,6 +112,7 @@ export function Caption( {
  )
  }
  disableEditing={ disableEditing }
+ { ...props }
  />
  ) }
  </>

packages/editor/src/components/post-title/index.native.js

@@ -164,7 +164,7 @@ class PostTitle extends Component {
  accessibilityHint={ __( 'Updates the title.' ) }
  >
  <RichText.Raw
- setRef={ this.setRef }
+ ref={ this.setRef }
  accessibilityLabel={ this.getTitle( title, postType ) }
  tagName={ 'p' }
  tagsToEliminate={ [ 'strong' ] }