Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Toggle mobile Quote block citation #59097

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/block-editor/src/components/rich-text/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,6 @@ function removeNativeProps( props ) {
fontStyle,
minWidth,
maxWidth,
setRef,
disableSuggestions,
disableAutocorrection,
...restProps
Expand Down
12 changes: 6 additions & 6 deletions packages/block-editor/src/components/rich-text/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -94,14 +94,13 @@ export function RichTextWrapper(
minWidth,
maxWidth,
onBlur,
setRef,
disableSuggestions,
disableAutocorrection,
containerWidth,
onEnter: onCustomEnter,
...props
},
forwardedRef
providedRef
) {
const instanceId = useInstanceId( RichTextWrapper );

Expand Down Expand Up @@ -528,13 +527,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 }
Expand Down Expand Up @@ -585,7 +584,6 @@ export function RichTextWrapper(
minWidth={ minWidth }
maxWidth={ maxWidth }
onBlur={ onBlur }
setRef={ setRef }
disableSuggestions={ disableSuggestions }
disableAutocorrection={ disableAutocorrection }
containerWidth={ containerWidth }
Expand Down Expand Up @@ -671,7 +669,9 @@ ForwardedRichTextContainer.Content.defaultProps = {
value: '',
};

ForwardedRichTextContainer.Raw = RichText;
ForwardedRichTextContainer.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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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={ {
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/button/edit.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -494,7 +494,7 @@ function ButtonEdit( props ) {
<View pointerEvents="none" style={ outLineStyles } />
) }
<RichText
setRef={ onSetRef }
ref={ onSetRef }
placeholder={ placeholderText }
value={ text }
onChange={ onChangeText }
Expand Down
55 changes: 29 additions & 26 deletions packages/block-library/src/pullquote/edit.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,16 @@ import {
__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
} from '@wordpress/block-editor';
import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
import { Platform } from '@wordpress/element';

/**
* Internal dependencies
*/
import { Figure } from './figure';
import { BlockQuote } from './blockquote';
import { Caption } from '../utils/caption';

const isWebPlatform = Platform.OS === 'web';

const getBackgroundColor = ( { attributes, colors, style } ) => {
const { backgroundColor } = attributes;
Expand Down Expand Up @@ -60,15 +64,13 @@ const getBorderColor = ( props ) => {

function PullQuoteEdit( props ) {
const { attributes, setAttributes, isSelected, insertBlocksAfter } = props;
const { textAlign, citation, value } = attributes;
const { textAlign, value } = attributes;

const blockProps = useBlockProps( {
backgroundColor: getBackgroundColor( props ),
borderColor: getBorderColor( props ),
} );

const shouldShowCitation = ! RichText.isEmpty( citation ) || isSelected;

return (
<>
<BlockControls group="block">
Expand Down Expand Up @@ -96,29 +98,30 @@ function PullQuoteEdit( props ) {
}
textAlign={ textAlign ?? 'center' }
/>
{ shouldShowCitation && (
<RichText
identifier="citation"
value={ citation }
aria-label={ __( 'Pullquote citation text' ) }
placeholder={
// translators: placeholder text used for the citation
__( 'Add citation' )
}
onChange={ ( nextCitation ) =>
setAttributes( {
citation: nextCitation,
} )
}
__unstableMobileNoFocusOnMount
textAlign={ textAlign ?? 'center' }
__unstableOnSplitAtEnd={ () =>
insertBlocksAfter(
createBlock( getDefaultBlockName() )
)
}
/>
) }
<Caption
attributeKey="citation"
tagName={ isWebPlatform ? 'cite' : undefined }
style={ isWebPlatform && { display: 'block' } }
isSelected={ isSelected }
attributes={ attributes }
setAttributes={ setAttributes }
label={ __( 'Pullquote citation text' ) }
placeholder={
// translators: placeholder text used for the citation
__( 'Add citation' )
}
addLabel={ __( 'Add citation' ) }
removeLabel={ __( 'Remove citation' ) }
className="wp-block-pullquote__citation"
__unstableMobileNoFocusOnMount
textAlign={ textAlign ?? 'center' }
insertBlocksAfter={ insertBlocksAfter }
__unstableOnSplitAtEnd={ () =>
insertBlocksAfter(
createBlock( getDefaultBlockName() )
)
}
/>
</BlockQuote>
</Figure>
</>
Expand Down
9 changes: 3 additions & 6 deletions packages/block-library/src/pullquote/test/edit.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
getEditorHtml,
fireEvent,
within,
waitFor,
typeInRichText,
} from 'test/helpers';

Expand All @@ -26,10 +25,6 @@ describe( 'Pullquote', () => {
// Arrange
const screen = await initializeEditor();
await addBlock( screen, 'Pullquote' );
// Await inner blocks to be rendered
const citationBlock = await waitFor( () =>
screen.getByPlaceholderText( 'Add citation' )
);

// Act
const pullquoteBlock = getBlock( screen, 'Pullquote' );
Expand All @@ -43,7 +38,9 @@ describe( 'Pullquote', () => {
keyCode: ENTER,
} );
typeInRichText( pullquoteTextInput, 'Again' );

fireEvent.press( screen.getByLabelText( 'Add citation' ) );
const citationBlock =
await screen.findByPlaceholderText( 'Add citation' );
const citationTextInput =
within( citationBlock ).getByPlaceholderText( 'Add citation' );
typeInRichText( citationTextInput, 'A person' );
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/quote/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export default function QuoteEdit( {
<Caption
attributeKey="citation"
tagName={ isWebPlatform ? 'cite' : undefined }
style={ { display: 'block' } }
style={ isWebPlatform && { display: 'block' } }
isSelected={ isSelected }
attributes={ attributes }
setAttributes={ setAttributes }
Expand Down
10 changes: 4 additions & 6 deletions packages/block-library/src/quote/test/edit.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
getEditorHtml,
fireEvent,
within,
waitFor,
typeInRichText,
} from 'test/helpers';

Expand Down Expand Up @@ -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.' );
Expand All @@ -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' );
Expand Down
2 changes: 1 addition & 1 deletion packages/editor/src/components/post-title/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -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' ] }
Expand Down
Loading