-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add native support for the MediaText block (#16305)
* First working version of the MediaText component for native mobile * Fix adding a block to an innerblock list * Disable mediaText on production * MediaText native: improve editor visuals * Move BlockToolbar from BlockList to Layout * Remove BlockEditorProvider from BlockList and add native version of EditorProvider to Editor. Plus support InsertionPoint and BlockListAppender * Update BlockMover for native to hide if locked or if it's the only block * Make the vertical align button work, add more styling options for toolbar buttons * Make sure registerCoreBlocks does not break in production * Copy docblock comment from the web version for registerCoreBlocks * Fix focusing on the media placeholder * Only support adding image for now * Update usage of MediaPlaceholder in MediaContainer * Enable autoScroll for just the out most block list * Fix JS Unit tests * Roll back to IconButton refactor and fix tests * Fix BlockVerticalAlignmentToolbar buttons style on mobile * Fix thing for web and ensure ariaPressed is always passed down * Use AriaPressed directly to style SVG on mobile * Update snapshots
- Loading branch information
Showing
23 changed files
with
879 additions
and
84 deletions.
There are no files selected for viewing
30 changes: 30 additions & 0 deletions
30
packages/block-editor/src/components/block-icon/index.native.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { get } from 'lodash'; | ||
import { View } from 'react-native'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { Path, Icon, SVG } from '@wordpress/components'; | ||
|
||
export default function BlockIcon( { icon, showColors = false } ) { | ||
if ( get( icon, [ 'src' ] ) === 'block-default' ) { | ||
icon = { | ||
src: <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M19 7h-1V5h-4v2h-4V5H6v2H5c-1.1 0-2 .9-2 2v10h18V9c0-1.1-.9-2-2-2zm0 10H5V9h14v8z" /></SVG>, | ||
}; | ||
} | ||
|
||
const renderedIcon = <Icon icon={ icon && icon.src ? icon.src : icon } />; | ||
const style = showColors ? { | ||
backgroundColor: icon && icon.background, | ||
color: icon && icon.foreground, | ||
} : {}; | ||
|
||
return ( | ||
<View style={ style }> | ||
{ renderedIcon } | ||
</View> | ||
); | ||
} |
54 changes: 54 additions & 0 deletions
54
packages/block-editor/src/components/block-list-appender/index.native.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { last } from 'lodash'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { withSelect } from '@wordpress/data'; | ||
import { getDefaultBlockName } from '@wordpress/blocks'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import DefaultBlockAppender from '../default-block-appender'; | ||
import styles from './style.scss'; | ||
|
||
function BlockListAppender( { | ||
blockClientIds, | ||
rootClientId, | ||
canInsertDefaultBlock, | ||
isLocked, | ||
} ) { | ||
if ( isLocked ) { | ||
return null; | ||
} | ||
|
||
if ( canInsertDefaultBlock ) { | ||
return ( | ||
<DefaultBlockAppender | ||
rootClientId={ rootClientId } | ||
lastBlockClientId={ last( blockClientIds ) } | ||
containerStyle={ styles.blockListAppender } | ||
placeholder={ blockClientIds.length > 0 ? '' : null } | ||
/> | ||
); | ||
} | ||
|
||
return null; | ||
} | ||
|
||
export default withSelect( ( select, { rootClientId } ) => { | ||
const { | ||
getBlockOrder, | ||
canInsertBlockType, | ||
getTemplateLock, | ||
} = select( 'core/block-editor' ); | ||
|
||
return { | ||
isLocked: !! getTemplateLock( rootClientId ), | ||
blockClientIds: getBlockOrder( rootClientId ), | ||
canInsertDefaultBlock: canInsertBlockType( getDefaultBlockName(), rootClientId ), | ||
}; | ||
} )( BlockListAppender ); |
9 changes: 9 additions & 0 deletions
9
packages/block-editor/src/components/block-list-appender/style.native.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
|
||
.blockListAppender { | ||
background-color: $white; | ||
padding-left: 16; | ||
padding-right: 16; | ||
padding-top: 12; | ||
padding-bottom: 0; // will be flushed into inline toolbar height | ||
border-color: transparent; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 46 additions & 0 deletions
46
packages/block-editor/src/components/block-list/insertion-point.native.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { Text, View } from 'react-native'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { __ } from '@wordpress/i18n'; | ||
import { withSelect } from '@wordpress/data'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import styles from './style.scss'; | ||
|
||
const BlockInsertionPoint = ( { showInsertionPoint } ) => { | ||
if ( ! showInsertionPoint ) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<View style={ styles.containerStyleAddHere } > | ||
<View style={ styles.lineStyleAddHere }></View> | ||
<Text style={ styles.labelStyleAddHere } >{ __( 'ADD BLOCK HERE' ) }</Text> | ||
<View style={ styles.lineStyleAddHere }></View> | ||
</View> | ||
); | ||
}; | ||
|
||
export default withSelect( ( select, { clientId, rootClientId } ) => { | ||
const { | ||
getBlockIndex, | ||
getBlockInsertionPoint, | ||
isBlockInsertionPointVisible, | ||
} = select( 'core/block-editor' ); | ||
const blockIndex = getBlockIndex( clientId, rootClientId ); | ||
const insertionPoint = getBlockInsertionPoint(); | ||
const showInsertionPoint = ( | ||
isBlockInsertionPointVisible() && | ||
insertionPoint.index === blockIndex && | ||
insertionPoint.rootClientId === rootClientId | ||
); | ||
|
||
return { showInsertionPoint }; | ||
} )( BlockInsertionPoint ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.