diff --git a/packages/block-editor/src/components/block-list/block-list-item.native.js b/packages/block-editor/src/components/block-list/block-list-item.native.js index 230b8d720e6b71..7e0b853eab0a88 100644 --- a/packages/block-editor/src/components/block-list/block-list-item.native.js +++ b/packages/block-editor/src/components/block-list/block-list-item.native.js @@ -22,13 +22,6 @@ const stretchStyle = { flex: 1, }; -const { - isFullWidth, - isWideWidth, - isWider, - isContainerRelated, -} = alignmentHelpers; - export class BlockListItem extends Component { constructor() { super( ...arguments ); @@ -60,6 +53,12 @@ export class BlockListItem extends Component { parentWidth, } = this.props; const { blockWidth } = this.state; + const { + isFullWidth, + isWideWidth, + isWider, + isContainerRelated, + } = alignmentHelpers; if ( isFullWidth( blockAlignment ) ) { if ( ! hasParents ) { @@ -106,6 +105,7 @@ export class BlockListItem extends Component { hasParents, parentBlockName, } = this.props; + const { isFullWidth, isContainerRelated } = alignmentHelpers; return [ readableContentViewStyle, @@ -138,6 +138,8 @@ export class BlockListItem extends Component { } = this.props; const readableContentViewStyle = contentResizeMode === 'stretch' && stretchStyle; + const { isContainerRelated } = alignmentHelpers; + return ( 1; + const { isWider } = alignmentHelpers; return ( { - const butonWrapperStyles = usePreferredColorSchemeStyle( - styles.buttonWrapper, - styles.buttonWrapperDark - ); - const buttonStyles = usePreferredColorSchemeStyle( - styles.button, - styles.buttonDark - ); - const buttonTextStyles = usePreferredColorSchemeStyle( - styles.buttonText, - styles.buttonTextDark - ); - - return ( - - - { icon } - { label } - - - ); -}; - -export default PickerButton; diff --git a/packages/block-editor/src/components/page-template-picker/container.native.js b/packages/block-editor/src/components/page-template-picker/container.native.js deleted file mode 100644 index d5f49b27aabc14..00000000000000 --- a/packages/block-editor/src/components/page-template-picker/container.native.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * External dependencies - */ -import { ScrollView } from 'react-native'; - -/** - * Internal dependencies - */ -import styles from './styles.scss'; - -const Container = ( { style, children } ) => { - return ( - - { children } - - ); -}; - -export default Container; diff --git a/packages/block-editor/src/components/page-template-picker/default-templates.native.js b/packages/block-editor/src/components/page-template-picker/default-templates.native.js deleted file mode 100644 index f5a6911f49bf2f..00000000000000 --- a/packages/block-editor/src/components/page-template-picker/default-templates.native.js +++ /dev/null @@ -1,44 +0,0 @@ -/** - * WordPress dependencies - */ -import { createBlock } from '@wordpress/blocks'; - -/** - * External dependencies - */ -import { map } from 'lodash'; -import memoize from 'memize'; - -/** - * Internal dependencies - */ -import { About, Blog, Contact, Portfolio, Services, Team } from './templates'; - -const defaultTemplates = [ About, Blog, Contact, Portfolio, Services, Team ]; - -const createInnerBlocks = ( { name, attributes, innerBlocks } ) => { - return createBlock( - name, - attributes, - map( innerBlocks, createInnerBlocks ) - ); -}; - -const createBlocks = ( template ) => { - return template.map( ( { name, attributes, innerBlocks } ) => { - return createBlock( - name, - attributes, - map( innerBlocks, createInnerBlocks ) - ); - } ); -}; - -const parsedTemplates = memoize( () => - defaultTemplates.map( ( template ) => ( { - ...template, - blocks: createBlocks( template.content ), - } ) ) -); - -export default parsedTemplates; diff --git a/packages/block-editor/src/components/page-template-picker/index.native.js b/packages/block-editor/src/components/page-template-picker/index.native.js deleted file mode 100644 index cbf4d1feaac928..00000000000000 --- a/packages/block-editor/src/components/page-template-picker/index.native.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Internal dependencies - */ -import __experimentalPageTemplatePicker from './picker'; -import __experimentalWithPageTemplatePicker from './with-page-template-picker'; -import { Preview } from './preview'; - -export { __experimentalPageTemplatePicker }; -export { __experimentalWithPageTemplatePicker }; -export { Preview }; diff --git a/packages/block-editor/src/components/page-template-picker/picker.native.js b/packages/block-editor/src/components/page-template-picker/picker.native.js deleted file mode 100644 index 072897d90ff670..00000000000000 --- a/packages/block-editor/src/components/page-template-picker/picker.native.js +++ /dev/null @@ -1,167 +0,0 @@ -/** - * WordPress dependencies - */ -import { useState, useEffect, useRef } from '@wordpress/element'; -import { useDispatch, useSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import Tooltip from './tooltip'; - -/** - * External dependencies - */ -import { - logUserEvent, - userEvents, - requestStarterPageTemplatesTooltipShown, - setStarterPageTemplatesTooltipShown, -} from '@wordpress/react-native-bridge'; -import { Animated, Dimensions, Keyboard } from 'react-native'; - -/** - * Internal dependencies - */ -import Button from './button'; -import Container from './container'; -import getDefaultTemplates from './default-templates'; -import ModalPreview from './preview'; - -// Used to hide the picker if there's no enough space in the window -const PICKER_HEIGHT_OFFSET = 150; - -const __experimentalPageTemplatePicker = ( { - templates = getDefaultTemplates(), - visible, -} ) => { - const { editPost } = useDispatch( 'core/editor' ); - const { title } = useSelect( ( select ) => { - const { getEditedPostAttribute } = select( 'core/editor' ); - - return { - title: getEditedPostAttribute( 'title' ), - }; - } ); - - const [ templatePreview, setTemplatePreview ] = useState(); - const [ pickerVisible, setPickerVisible ] = useState( visible ); - const [ tooltipVisible, setTooltipVisible ] = useState( false ); - const contentOpacity = useRef( new Animated.Value( 0 ) ).current; - - useEffect( () => { - if ( shouldShowPicker() && visible && ! pickerVisible ) { - setPickerVisible( true ); - } - - startPickerAnimation( visible ); - shouldShowTooltip(); - - Keyboard.addListener( 'keyboardDidShow', onKeyboardDidShow ); - Keyboard.addListener( 'keyboardDidHide', onKeyboardDidHide ); - - return () => { - Keyboard.removeListener( 'keyboardDidShow', onKeyboardDidShow ); - Keyboard.removeListener( 'keyboardDidHide', onKeyboardDidHide ); - }; - }, [ visible ] ); - - useEffect( () => { - if ( tooltipVisible && templatePreview ) { - setTooltipVisible( false ); - } - }, [ templatePreview ] ); - - const onKeyboardDidShow = () => { - if ( visible ) { - startPickerAnimation( shouldShowPicker() ); - } - }; - - const onKeyboardDidHide = () => { - if ( visible ) { - setPickerVisible( true ); - startPickerAnimation( true ); - } - }; - - const shouldShowPicker = () => { - // On smaller devices on landscape we hide the picker - // so it doesn't overlap with the editor's content - const windowHeight = Dimensions.get( 'window' ).height; - return PICKER_HEIGHT_OFFSET < windowHeight / 3; - }; - - const shouldShowTooltip = () => { - requestStarterPageTemplatesTooltipShown( ( tooltipShown ) => { - if ( ! tooltipShown ) { - setTooltipVisible( true ); - setStarterPageTemplatesTooltipShown( true ); - } - } ); - }; - - const onApply = () => { - editPost( { - title: title || templatePreview.name, - blocks: templatePreview.blocks, - } ); - logUserEvent( userEvents.editorSessionTemplateApply, { - template: templatePreview.key, - } ); - setTemplatePreview( undefined ); - }; - - const onTooltipHidden = () => { - setTooltipVisible( false ); - }; - - const startPickerAnimation = ( isVisible ) => { - Animated.timing( contentOpacity, { - toValue: isVisible ? 1 : 0, - duration: 300, - useNativeDriver: true, - } ).start( () => { - if ( ! isVisible ) { - setPickerVisible( isVisible ); - } - } ); - }; - - if ( ! pickerVisible ) { - return null; - } - - return ( - - { tooltipVisible && ( - - ) } - - { templates.map( ( template ) => ( -