-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Mobile - BlockList - Only render ListEmptyComponent at root level * Mobile - Register ListItem block * ListItem block - Export IdentUI to share it with Mobile * Mobile - Export useRefEffect * List V2 - Make it compatible with mobile by passing two props to their inner blocks and selecting a native TagName * Mobile - ListItem block - Add native variant * List V2 - Add style prop for mobile * Mobile - ListItem block - Add color customization support * Mobile - ListItem - Pass style instead of specific values to prevent other data like fontSize/lineHeight * Mobile - Add List V2 feature flag * [Mobile] - List V2 - List Style Type (#42703) * Mobile - List V2: - List Item - Add support for list type for both ordered and standard icon. - List - Avoid passing the start prop on Mobile * Mobile - ListStyleType - Fix default color * Mobile - ListItem - Add margin for parent list * Mobile - ListItem - Check if there's a default font size from the theme * Mobile - ListItem - Add deleteEnter for RichText * Mobile - ListItem - Remove unneeded theme fontSize parsing * Mobile - ListItem - Fix list margins * Mobile - ListItem - Fix margins * Mobile - Global styles - Parse font sizes * Mobile - List Style - Use theme.json font size as a default if its a block based theme * Mobile - Update CHANGELOG * Mobile - List Block V2 - Unit tests * Mobile - BlockList - Fix appender * Mobile - RichText - Add container width prop * Mobile - List V2 - Fix issue on Android where the font size / line-height updates weren't showing correctly due to issues with the views layout * List V2 - Move TagName to its own file with both web and native variant * Mobile - Update RichText snapshots
- Loading branch information
Gerardo Pacheco
authored
Aug 3, 2022
1 parent
d43a152
commit 0c2ce6d
Showing
29 changed files
with
1,258 additions
and
45 deletions.
There are no files selected for viewing
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
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
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
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,148 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { View } from 'react-native'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| RichText, | ||
| useBlockProps, | ||
| useInnerBlocksProps, | ||
| BlockControls, | ||
| store as blockEditorStore, | ||
| } from '@wordpress/block-editor'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { useState, useCallback } from '@wordpress/element'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { useSplit, useMerge } from './hooks'; | ||
| import { convertToListItems } from './utils'; | ||
| import { IndentUI } from './edit.js'; | ||
| import styles from './style.scss'; | ||
| import ListStyleType from './list-style-type'; | ||
|
|
||
| export default function ListItemEdit( { | ||
| attributes, | ||
| setAttributes, | ||
| onReplace, | ||
| clientId, | ||
| style, | ||
| } ) { | ||
| const [ contentWidth, setContentWidth ] = useState(); | ||
| const { placeholder, content } = attributes; | ||
| const { | ||
| blockIndex, | ||
| hasInnerBlocks, | ||
| indentationLevel, | ||
| numberOfListItems, | ||
| ordered, | ||
| reversed, | ||
| start, | ||
| } = useSelect( | ||
| ( select ) => { | ||
| const { | ||
| getBlockAttributes, | ||
| getBlockCount, | ||
| getBlockIndex, | ||
| getBlockParentsByBlockName, | ||
| getBlockRootClientId, | ||
| } = select( blockEditorStore ); | ||
| const currentIdentationLevel = getBlockParentsByBlockName( | ||
| clientId, | ||
| 'core/list-item', | ||
| true | ||
| ).length; | ||
| const currentBlockIndex = getBlockIndex( clientId ); | ||
| const blockWithInnerBlocks = getBlockCount( clientId ) > 0; | ||
| const rootClientId = getBlockRootClientId( clientId ); | ||
| const blockAttributes = getBlockAttributes( rootClientId ); | ||
| const totalListItems = getBlockCount( rootClientId ); | ||
| const { | ||
| ordered: isOrdered, | ||
| reversed: isReversed, | ||
| start: startValue, | ||
| } = blockAttributes || {}; | ||
|
|
||
| return { | ||
| blockIndex: currentBlockIndex, | ||
| hasInnerBlocks: blockWithInnerBlocks, | ||
| indentationLevel: currentIdentationLevel, | ||
| numberOfListItems: totalListItems, | ||
| ordered: isOrdered, | ||
| reversed: isReversed, | ||
| start: startValue, | ||
| }; | ||
| }, | ||
| [ clientId ] | ||
| ); | ||
|
|
||
| const blockProps = useBlockProps( { | ||
| ...( hasInnerBlocks && styles[ 'wp-block-list-item__nested-blocks' ] ), | ||
| } ); | ||
| const innerBlocksProps = useInnerBlocksProps( blockProps, { | ||
| allowedBlocks: [ 'core/list' ], | ||
| renderAppender: false, | ||
| } ); | ||
|
|
||
| const onSplit = useSplit( clientId ); | ||
| const onMerge = useMerge( clientId ); | ||
| const onLayout = useCallback( ( { nativeEvent } ) => { | ||
| setContentWidth( ( prevState ) => { | ||
| const { width } = nativeEvent.layout; | ||
|
|
||
| if ( ! prevState || prevState.width !== width ) { | ||
| return Math.floor( width ); | ||
| } | ||
| return prevState; | ||
| } ); | ||
| }, [] ); | ||
|
|
||
| return ( | ||
| <View style={ styles[ 'wp-block-list-item__list-item-parent' ] }> | ||
| <View style={ styles[ 'wp-block-list-item__list-item' ] }> | ||
| <View style={ styles[ 'wp-block-list-item__list-item-icon' ] }> | ||
| <ListStyleType | ||
| blockIndex={ blockIndex } | ||
| indentationLevel={ indentationLevel } | ||
| numberOfListItems={ numberOfListItems } | ||
| ordered={ ordered } | ||
| reversed={ reversed } | ||
| start={ start } | ||
| style={ style } | ||
| /> | ||
| </View> | ||
| <View | ||
| style={ styles[ 'wp-block-list-item__list-item-content' ] } | ||
| onLayout={ onLayout } | ||
| > | ||
| <RichText | ||
| identifier="content" | ||
| tagName="p" | ||
| onChange={ ( nextContent ) => | ||
| setAttributes( { content: nextContent } ) | ||
| } | ||
| value={ content } | ||
| placeholder={ placeholder || __( 'List' ) } | ||
| onSplit={ onSplit } | ||
| onMerge={ onMerge } | ||
| onReplace={ ( blocks, ...args ) => { | ||
| onReplace( convertToListItems( blocks ), ...args ); | ||
| } } | ||
| style={ style } | ||
| deleteEnter={ true } | ||
| containerWidth={ contentWidth } | ||
| /> | ||
| </View> | ||
| </View> | ||
| <View { ...innerBlocksProps }></View> | ||
| <BlockControls group="block"> | ||
| <IndentUI clientId={ clientId } /> | ||
| </BlockControls> | ||
| </View> | ||
| ); | ||
| } |
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,34 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { SVG, Rect } from '@wordpress/components'; | ||
|
|
||
| export const circle = ( size, color ) => ( | ||
| <SVG fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <Rect width={ size } height={ size } rx={ size / 2 } fill={ color } /> | ||
| </SVG> | ||
| ); | ||
|
|
||
| export const circleOutline = ( size, color ) => ( | ||
| <SVG | ||
| width={ size } | ||
| height={ size } | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <Rect | ||
| x="0.5" | ||
| y="0.5" | ||
| width={ size - 1 } | ||
| height={ size - 1 } | ||
| rx={ size / 2 } | ||
| stroke={ color } | ||
| /> | ||
| </SVG> | ||
| ); | ||
|
|
||
| export const square = ( size, color ) => ( | ||
| <SVG fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <Rect width={ size } height={ size } fill={ color } /> | ||
| </SVG> | ||
| ); |
Oops, something went wrong.