From 906407bb8fb7af332541f2462092b38d6895d3bc Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Fri, 8 Jan 2021 14:18:38 +0100 Subject: [PATCH] [Mobile] - Remove old Layout Picker (#27640) * Mobile - Removing the old Layout picker except the Preview which was moved to the mobile components directory. * Mobile - Remove isModalLayoutPicker flag * Mobile - alignmentHelpers - fix tests * Mobile - Remove unused modalLayoutPicker --- .../block-list/block-list-item.native.js | 16 +- .../src/components/block-list/block.native.js | 4 +- .../src/components/block-list/index.native.js | 2 +- .../src/components/index.native.js | 5 - .../page-template-picker/button.native.js | 47 ---- .../page-template-picker/container.native.js | 26 -- .../default-templates.native.js | 44 --- .../page-template-picker/index.native.js | 10 - .../page-template-picker/picker.native.js | 167 ------------ .../page-template-picker/preview.native.js | 128 --------- .../page-template-picker/styles.native.scss | 68 ----- .../templates/about.native.js | 144 ---------- .../templates/blog.native.js | 52 ---- .../templates/contact.native.js | 75 ----- .../templates/index.native.js | 6 - .../templates/portfolio.native.js | 223 --------------- .../templates/services.native.js | 183 ------------- .../templates/team.native.js | 258 ------------------ .../tooltip/index.native.js | 100 ------- .../tooltip/style.native.scss | 34 --- .../use-page-template-picker.native.js | 29 -- .../with-page-template-picker.native.js | 35 --- packages/components/src/index.native.js | 2 +- .../src/mobile/modal-header-bar/README.md | 32 --- .../modal-header-bar/button.android.scss | 10 - .../mobile/modal-header-bar/button.ios.scss | 5 - .../mobile/modal-header-bar/button.native.js | 68 ----- .../modal-header-bar/button.native.scss | 8 - .../src/mobile/modal-header-bar/close-icon.js | 11 - .../mobile/modal-header-bar/index.native.js | 64 ----- .../modal-header-bar/styles.native.scss | 60 ---- .../src/mobile/preview/index.native.js | 62 +++++ .../src/mobile/preview/styles.native.scss | 13 + .../src/components/layout/index.native.js | 22 +- packages/edit-post/src/editor.native.js | 3 +- .../GutenbergBridgeJS2Parent.java | 8 - .../RNReactNativeGutenbergBridgeModule.java | 20 -- .../mobile/WPAndroidGlue/GutenbergProps.kt | 5 +- .../WPAndroidGlue/WPAndroidGlueCode.java | 19 -- packages/react-native-bridge/index.js | 12 - .../ios/GutenbergBridgeDelegate.swift | 8 - .../ios/RNReactNativeGutenbergBridge.m | 2 - .../ios/RNReactNativeGutenbergBridge.swift | 10 - .../java/com/gutenberg/MainApplication.java | 8 - .../GutenbergViewController.swift | 8 - 45 files changed, 91 insertions(+), 2025 deletions(-) delete mode 100644 packages/block-editor/src/components/page-template-picker/button.native.js delete mode 100644 packages/block-editor/src/components/page-template-picker/container.native.js delete mode 100644 packages/block-editor/src/components/page-template-picker/default-templates.native.js delete mode 100644 packages/block-editor/src/components/page-template-picker/index.native.js delete mode 100644 packages/block-editor/src/components/page-template-picker/picker.native.js delete mode 100644 packages/block-editor/src/components/page-template-picker/preview.native.js delete mode 100644 packages/block-editor/src/components/page-template-picker/styles.native.scss delete mode 100644 packages/block-editor/src/components/page-template-picker/templates/about.native.js delete mode 100644 packages/block-editor/src/components/page-template-picker/templates/blog.native.js delete mode 100644 packages/block-editor/src/components/page-template-picker/templates/contact.native.js delete mode 100644 packages/block-editor/src/components/page-template-picker/templates/index.native.js delete mode 100644 packages/block-editor/src/components/page-template-picker/templates/portfolio.native.js delete mode 100644 packages/block-editor/src/components/page-template-picker/templates/services.native.js delete mode 100644 packages/block-editor/src/components/page-template-picker/templates/team.native.js delete mode 100644 packages/block-editor/src/components/page-template-picker/tooltip/index.native.js delete mode 100644 packages/block-editor/src/components/page-template-picker/tooltip/style.native.scss delete mode 100644 packages/block-editor/src/components/page-template-picker/use-page-template-picker.native.js delete mode 100644 packages/block-editor/src/components/page-template-picker/with-page-template-picker.native.js delete mode 100644 packages/components/src/mobile/modal-header-bar/README.md delete mode 100644 packages/components/src/mobile/modal-header-bar/button.android.scss delete mode 100644 packages/components/src/mobile/modal-header-bar/button.ios.scss delete mode 100644 packages/components/src/mobile/modal-header-bar/button.native.js delete mode 100644 packages/components/src/mobile/modal-header-bar/button.native.scss delete mode 100644 packages/components/src/mobile/modal-header-bar/close-icon.js delete mode 100644 packages/components/src/mobile/modal-header-bar/index.native.js delete mode 100644 packages/components/src/mobile/modal-header-bar/styles.native.scss create mode 100644 packages/components/src/mobile/preview/index.native.js create mode 100644 packages/components/src/mobile/preview/styles.native.scss 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 230b8d720e6b7..7e0b853eab0a8 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 d5f49b27aabc1..0000000000000 --- 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 f5a6911f49bf2..0000000000000 --- 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 cbf4d1feaac92..0000000000000 --- 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 072897d90ff67..0000000000000 --- 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 ) => ( -