RNMobile - Insert a new Paragraph block when pressing Enter on end of…

… captions (#22928) * Insert block after pressing enter on caption. * Implement breaking captions on videos. * Add deleteEnter prop to caption * Add break support on gallery caption. * Fix lint error. Co-authored-by: Matt Chowning <[email protected]>
WordPress · Jun 8, 2020 · 1497b52 · 1497b52
1 parent 46b4161
commit 1497b52
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 0 deletions.
diff --git a/packages/block-editor/src/components/block-caption/index.native.js b/packages/block-editor/src/components/block-caption/index.native.js
@@ -24,6 +24,7 @@ const BlockCaption = ( {
  isSelected,
  shouldDisplay,
  text,
+ insertBlocksAfter,
 } ) => (
  <View style={ [ styles.container, shouldDisplay && styles.padding ] }>
  <Caption
@@ -35,6 +36,7 @@ const BlockCaption = ( {
  onFocus={ onFocus }
  shouldDisplay={ shouldDisplay }
  value={ text }
+ insertBlocksAfter={ insertBlocksAfter }
  />
  </View>
 );

diff --git a/packages/block-editor/src/components/caption/index.native.js b/packages/block-editor/src/components/caption/index.native.js
@@ -6,6 +6,7 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
+import { createBlock } from '@wordpress/blocks';
 import { RichText } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
@@ -22,6 +23,7 @@ const Caption = ( {
  shouldDisplay = true,
  style,
  value,
+ insertBlocksAfter = () => {},
 } ) => (
  <View
  accessibilityLabel={
@@ -49,6 +51,10 @@ const Caption = ( {
  underlineColorAndroid="transparent"
  unstableOnFocus={ onFocus }
  value={ value }
+ __unstableOnSplitAtEnd={ () =>
+ insertBlocksAfter( createBlock( 'core/paragraph' ) )
+ }
+ deleteEnter={ true }
  />
  </View>
 );

diff --git a/packages/block-library/src/gallery/gallery.native.js b/packages/block-library/src/gallery/gallery.native.js
@@ -50,6 +50,7 @@ export const Gallery = ( props ) => {
  isSelected,
  isNarrow,
  onFocus,
+ insertBlocksAfter,
  } = props;
 
  const {
@@ -143,6 +144,7 @@ export const Gallery = ( props ) => {
  }
  onFocus={ focusGalleryCaption }
  onBlur={ onBlur } // always assign onBlur as props
+ insertBlocksAfter={ insertBlocksAfter }
  />
  </View>
  );

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -619,6 +619,7 @@ export class ImageEdit extends React.Component {
  }
  onFocus={ this.onFocusCaption }
  onBlur={ this.props.onBlur } // always assign onBlur as props
+ insertBlocksAfter={ this.props.insertBlocksAfter }
  />
  </View>
  </TouchableWithoutFeedback>

diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js
@@ -354,6 +354,7 @@ class VideoEdit extends React.Component {
  isSelected={ this.state.isCaptionSelected }
  onFocus={ this.onFocusCaption }
  onBlur={ this.props.onBlur } // always assign onBlur as props
+ insertBlocksAfter={ this.props.insertBlocksAfter }
  />
  </View>
  </TouchableWithoutFeedback>