From 26179dafd562469be79f352c0b4167c7aa96611e Mon Sep 17 00:00:00 2001 From: Tugdual de Kerviler Date: Wed, 19 Feb 2020 13:19:51 +0100 Subject: [PATCH 1/9] Make a simple version of ContactInfo that displays on mobile --- extensions/blocks/contact-info/edit.native.js | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 extensions/blocks/contact-info/edit.native.js diff --git a/extensions/blocks/contact-info/edit.native.js b/extensions/blocks/contact-info/edit.native.js new file mode 100644 index 00000000000..78a23249781 --- /dev/null +++ b/extensions/blocks/contact-info/edit.native.js @@ -0,0 +1,38 @@ +/** + * External dependencies + */ +import { InnerBlocks } from '@wordpress/block-editor'; +import { View } from 'react-native'; + +/** + * Internal dependencies + */ +const ALLOWED_BLOCKS = [ + 'core/paragraph', + 'core/image', + 'core/heading', + 'core/gallery', + 'core/list', + 'core/quote', + 'core/shortcode', + 'core/audio', + 'core/code', + 'core/cover', + 'core/html', + 'core/separator', + 'core/spacer', + 'core/subhead', + 'core/video', +]; + +const TEMPLATE = [ [ 'core/paragraph' ], [ 'core/paragraph' ], [ 'core/paragraph' ] ]; + +const ContactInfoEdit = () => { + return ( + + + + ); +}; + +export default ContactInfoEdit; From fbb7640f78df150f69e0f53e6e832ec67d26a319 Mon Sep 17 00:00:00 2001 From: Tugdual de Kerviler Date: Wed, 19 Feb 2020 13:59:36 +0100 Subject: [PATCH 2/9] Make a native version of contact-info/index as well as register-jetpack-block --- .../blocks/contact-info/index.native.js | 75 +++++++++++++++++++ .../shared/register-jetpack-block.native.js | 58 ++++++++++++++ 2 files changed, 133 insertions(+) create mode 100644 extensions/blocks/contact-info/index.native.js create mode 100644 extensions/shared/register-jetpack-block.native.js diff --git a/extensions/blocks/contact-info/index.native.js b/extensions/blocks/contact-info/index.native.js new file mode 100644 index 00000000000..6dc26ac40b7 --- /dev/null +++ b/extensions/blocks/contact-info/index.native.js @@ -0,0 +1,75 @@ +/** + * External dependencies + */ +import { __, _x } from '@wordpress/i18n'; +import { InnerBlocks } from '@wordpress/block-editor'; +import { Path } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import edit from './edit'; +import renderMaterialIcon from '../../shared/render-material-icon'; + +const attributes = {}; + +const save = ( { className } ) => ( +
+ +
+); + +export const name = 'contact-info'; + +export const settings = { + title: __( 'Contact Info', 'jetpack' ), + description: __( + 'Lets you add an email address, phone number, and physical address with improved markup for better SEO results.', + 'jetpack' + ), + keywords: [ + _x( 'email', 'block search term', 'jetpack' ), + _x( 'phone', 'block search term', 'jetpack' ), + _x( 'address', 'block search term', 'jetpack' ), + ], + icon: renderMaterialIcon( + + ), + category: 'jetpack', + supports: { + align: [ 'wide', 'full' ], + html: false, + }, + attributes, + edit, + save, + example: { + attributes: {}, + innerBlocks: [ + { + name: 'jetpack/email', + attributes: { + email: 'hello@yourjetpack.blog', + }, + }, + { + name: 'jetpack/phone', + attributes: { + phone: '123-456-7890', + }, + }, + { + name: 'jetpack/address', + attributes: { + address: '987 Photon Drive', + city: 'Speedyville', + region: 'CA', + postal: '12345', + country: 'USA', + }, + }, + ], + }, +}; + +export const childBlocks = []; diff --git a/extensions/shared/register-jetpack-block.native.js b/extensions/shared/register-jetpack-block.native.js new file mode 100644 index 00000000000..093496e2f45 --- /dev/null +++ b/extensions/shared/register-jetpack-block.native.js @@ -0,0 +1,58 @@ +/** + * External dependencies + */ +import { registerBlockType } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import extensionList from '../index.json'; +import getJetpackExtensionAvailability from './get-jetpack-extension-availability'; + +const betaExtensions = extensionList.beta || []; + +function requiresPlan( unavailableReason, details ) { + if ( unavailableReason === 'missing_plan' ) { + return details.required_plan; + } + return false; +} + +/** + * Registers a gutenberg block if the availability requirements are met. + * + * @param {string} name The block's name. + * @param {object} settings The block's settings. + * @param {object} childBlocks The block's child blocks. + * @returns {object|false} Either false if the block is not available, or the results of `registerBlockType` + */ +export default function registerJetpackBlock( name, settings, childBlocks = [] ) { + const { available, details, unavailableReason } = getJetpackExtensionAvailability( name ); + + const requiredPlan = requiresPlan( unavailableReason, details ); + + if ( ! available && ! requiredPlan ) { + if ( 'production' !== process.env.NODE_ENV ) { + // eslint-disable-next-line no-console + console.warn( + `Block ${ name } couldn't be registered because it is unavailable (${ unavailableReason }).` + ); + } + return false; + } + + const result = registerBlockType( `jetpack/${ name }`, { + ...settings, + title: betaExtensions.includes( name ) ? `${ settings.title } (beta)` : settings.title, + edit: settings.edit, + example: requiredPlan ? undefined : settings.example, + } ); + + // Register child blocks. Using `registerBlockType()` directly avoids availability checks -- if + // their parent is available, we register them all, without checking for their individual availability. + childBlocks.forEach( childBlock => + registerBlockType( `jetpack/${ childBlock.name }`, childBlock.settings ) + ); + + return result; +} From d9bbec6d07f3e40614525fd1dc956297e6196316 Mon Sep 17 00:00:00 2001 From: Tugdual de Kerviler Date: Wed, 19 Feb 2020 14:39:00 +0100 Subject: [PATCH 3/9] Register jetpack block category --- extensions/editor.native.js | 4 ++++ extensions/shared/register-jetpack-block.native.js | 4 ++++ 2 files changed, 8 insertions(+) create mode 100644 extensions/editor.native.js diff --git a/extensions/editor.native.js b/extensions/editor.native.js new file mode 100644 index 00000000000..e339d354620 --- /dev/null +++ b/extensions/editor.native.js @@ -0,0 +1,4 @@ +/** + * Internal dependencies + */ +import './shared/block-category'; diff --git a/extensions/shared/register-jetpack-block.native.js b/extensions/shared/register-jetpack-block.native.js index 093496e2f45..ed70cac8481 100644 --- a/extensions/shared/register-jetpack-block.native.js +++ b/extensions/shared/register-jetpack-block.native.js @@ -48,6 +48,10 @@ export default function registerJetpackBlock( name, settings, childBlocks = [] ) example: requiredPlan ? undefined : settings.example, } ); + console.log( + `Block jetpack/${ name } registered.` + ); + // Register child blocks. Using `registerBlockType()` directly avoids availability checks -- if // their parent is available, we register them all, without checking for their individual availability. childBlocks.forEach( childBlock => From b34e858230be2ea4155288bb7ead0bd2b5ac7a6f Mon Sep 17 00:00:00 2001 From: Tugdual de Kerviler Date: Thu, 20 Feb 2020 10:46:11 +0100 Subject: [PATCH 4/9] Add support for contact-infor inner blocks: address email and phone --- .../contact-info/address/edit.native.js | 121 ++++++++++++++++++ extensions/blocks/contact-info/edit.native.js | 5 +- .../blocks/contact-info/index.native.js | 75 ----------- extensions/shared/simple-input.native.js | 25 ++++ 4 files changed, 150 insertions(+), 76 deletions(-) create mode 100644 extensions/blocks/contact-info/address/edit.native.js delete mode 100644 extensions/blocks/contact-info/index.native.js create mode 100644 extensions/shared/simple-input.native.js diff --git a/extensions/blocks/contact-info/address/edit.native.js b/extensions/blocks/contact-info/address/edit.native.js new file mode 100644 index 00000000000..984c21cf478 --- /dev/null +++ b/extensions/blocks/contact-info/address/edit.native.js @@ -0,0 +1,121 @@ +/** + * External dependencies + */ +import { View } from 'react-native'; +import { __ } from '@wordpress/i18n'; +import { Component, Fragment } from '@wordpress/element'; +import { PlainText } from '@wordpress/block-editor'; +import { ToggleControl } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import save from './save'; + +class AddressEdit extends Component { + constructor( ...args ) { + super( ...args ); + + this.preventEnterKey = this.preventEnterKey.bind( this ); + } + + preventEnterKey( event ) { + if ( event.key === 'Enter' ) { + event.preventDefault(); + return; + } + } + + render() { + const { + attributes: { + address, + addressLine2, + addressLine3, + city, + region, + postal, + country, + linkToGoogleMaps, + }, + isSelected, + setAttributes, + } = this.props; + + const hasContent = [ address, addressLine2, addressLine3, city, region, postal, country ].some( + value => value !== '' + ); + + const externalLink = ( + + setAttributes( { linkToGoogleMaps: newlinkToGoogleMaps } ) + } + /> + ); + + return ( + + { ! isSelected && hasContent && save( this.props ) } + { ( isSelected || ! hasContent ) && ( + + setAttributes( { address: newAddress } ) } + onKeyDown={ this.preventEnterKey } + /> + <PlainText + value={ addressLine2 } + placeholder={ __( 'Address Line 2', 'jetpack' ) } + aria-label={ __( 'Address Line 2', 'jetpack' ) } + onChange={ newAddressLine2 => setAttributes( { addressLine2: newAddressLine2 } ) } + onKeyDown={ this.preventEnterKey } + /> + <PlainText + value={ addressLine3 } + placeholder={ __( 'Address Line 3', 'jetpack' ) } + aria-label={ __( 'Address Line 3', 'jetpack' ) } + onChange={ newAddressLine3 => setAttributes( { addressLine3: newAddressLine3 } ) } + onKeyDown={ this.preventEnterKey } + /> + <PlainText + value={ city } + placeholder={ __( 'City', 'jetpack' ) } + aria-label={ __( 'City', 'jetpack' ) } + onChange={ newCity => setAttributes( { city: newCity } ) } + onKeyDown={ this.preventEnterKey } + /> + <PlainText + value={ region } + placeholder={ __( 'State/Province/Region', 'jetpack' ) } + aria-label={ __( 'State/Province/Region', 'jetpack' ) } + onChange={ newRegion => setAttributes( { region: newRegion } ) } + onKeyDown={ this.preventEnterKey } + /> + <PlainText + value={ postal } + placeholder={ __( 'Postal/Zip Code', 'jetpack' ) } + aria-label={ __( 'Postal/Zip Code', 'jetpack' ) } + onChange={ newPostal => setAttributes( { postal: newPostal } ) } + onKeyDown={ this.preventEnterKey } + /> + <PlainText + value={ country } + placeholder={ __( 'Country', 'jetpack' ) } + aria-label={ __( 'Country', 'jetpack' ) } + onChange={ newCountry => setAttributes( { country: newCountry } ) } + onKeyDown={ this.preventEnterKey } + /> + { externalLink } + </Fragment> + ) } + </View> + ); + } +} + +export default AddressEdit; diff --git a/extensions/blocks/contact-info/edit.native.js b/extensions/blocks/contact-info/edit.native.js index 78a23249781..f71edf5c300 100644 --- a/extensions/blocks/contact-info/edit.native.js +++ b/extensions/blocks/contact-info/edit.native.js @@ -8,6 +8,9 @@ import { View } from 'react-native'; * Internal dependencies */ const ALLOWED_BLOCKS = [ + 'jetpack/address', + 'jetpack/email', + 'jetpack/phone', 'core/paragraph', 'core/image', 'core/heading', @@ -25,7 +28,7 @@ const ALLOWED_BLOCKS = [ 'core/video', ]; -const TEMPLATE = [ [ 'core/paragraph' ], [ 'core/paragraph' ], [ 'core/paragraph' ] ]; +const TEMPLATE = [ [ 'jetpack/email' ], [ 'jetpack/phone' ], [ 'jetpack/address' ] ]; const ContactInfoEdit = () => { return ( diff --git a/extensions/blocks/contact-info/index.native.js b/extensions/blocks/contact-info/index.native.js deleted file mode 100644 index 6dc26ac40b7..00000000000 --- a/extensions/blocks/contact-info/index.native.js +++ /dev/null @@ -1,75 +0,0 @@ -/** - * External dependencies - */ -import { __, _x } from '@wordpress/i18n'; -import { InnerBlocks } from '@wordpress/block-editor'; -import { Path } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import edit from './edit'; -import renderMaterialIcon from '../../shared/render-material-icon'; - -const attributes = {}; - -const save = ( { className } ) => ( - <div className={ className }> - <InnerBlocks.Content /> - </div> -); - -export const name = 'contact-info'; - -export const settings = { - title: __( 'Contact Info', 'jetpack' ), - description: __( - 'Lets you add an email address, phone number, and physical address with improved markup for better SEO results.', - 'jetpack' - ), - keywords: [ - _x( 'email', 'block search term', 'jetpack' ), - _x( 'phone', 'block search term', 'jetpack' ), - _x( 'address', 'block search term', 'jetpack' ), - ], - icon: renderMaterialIcon( - <Path d="M19 5v14H5V5h14m0-2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 9c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3zm0-4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm6 10H6v-1.53c0-2.5 3.97-3.58 6-3.58s6 1.08 6 3.58V18zm-9.69-2h7.38c-.69-.56-2.38-1.12-3.69-1.12s-3.01.56-3.69 1.12z" /> - ), - category: 'jetpack', - supports: { - align: [ 'wide', 'full' ], - html: false, - }, - attributes, - edit, - save, - example: { - attributes: {}, - innerBlocks: [ - { - name: 'jetpack/email', - attributes: { - email: 'hello@yourjetpack.blog', - }, - }, - { - name: 'jetpack/phone', - attributes: { - phone: '123-456-7890', - }, - }, - { - name: 'jetpack/address', - attributes: { - address: '987 Photon Drive', - city: 'Speedyville', - region: 'CA', - postal: '12345', - country: 'USA', - }, - }, - ], - }, -}; - -export const childBlocks = []; diff --git a/extensions/shared/simple-input.native.js b/extensions/shared/simple-input.native.js new file mode 100644 index 00000000000..d3f46617ccf --- /dev/null +++ b/extensions/shared/simple-input.native.js @@ -0,0 +1,25 @@ +/** + * External dependencies + */ +import { PlainText } from '@wordpress/block-editor'; +import { View } from 'react-native'; + +const simpleInput = ( type, props, label, view, onChange ) => { + const { isSelected } = props; + const value = props.attributes[ type ]; + return ( + <View> + { ! isSelected && value !== '' && view( props ) } + { ( isSelected || value === '' ) && ( + <PlainText + value={ value } + placeholder={ label } + aria-label={ label } + onChange={ onChange } + /> + ) } + </View> + ); +}; + +export default simpleInput; From 276e42512e1baae09727d1e1ef129c263a5b207d Mon Sep 17 00:00:00 2001 From: Tugdual de Kerviler <dekervit@gmail.com> Date: Wed, 26 Feb 2020 16:14:26 +0100 Subject: [PATCH 5/9] Explicitely import native compatible blocks --- extensions/editor.native.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/extensions/editor.native.js b/extensions/editor.native.js index e339d354620..cb3628e4bbb 100644 --- a/extensions/editor.native.js +++ b/extensions/editor.native.js @@ -2,3 +2,6 @@ * Internal dependencies */ import './shared/block-category'; + +// Register blocks +import './blocks/contact-info/editor'; From 09d73e94da3b5005578b6d5d2ba490de690e186c Mon Sep 17 00:00:00 2001 From: Cameron Voell <cameronvoell@gmail.com> Date: Fri, 27 Mar 2020 01:07:03 -0700 Subject: [PATCH 6/9] Do not use save output to render unfocused edit --- extensions/blocks/contact-info/address/edit.native.js | 6 +++--- extensions/shared/simple-input.native.js | 5 ++--- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/extensions/blocks/contact-info/address/edit.native.js b/extensions/blocks/contact-info/address/edit.native.js index 984c21cf478..46b9a3a937d 100644 --- a/extensions/blocks/contact-info/address/edit.native.js +++ b/extensions/blocks/contact-info/address/edit.native.js @@ -58,8 +58,8 @@ class AddressEdit extends Component { return ( <View> - { ! isSelected && hasContent && save( this.props ) } - { ( isSelected || ! hasContent ) && ( + {/* { ! isSelected && hasContent && save( this.props ) } + { ( isSelected || ! hasContent ) && ( */} <Fragment> <PlainText value={ address } @@ -112,7 +112,7 @@ class AddressEdit extends Component { /> { externalLink } </Fragment> - ) } + {/* ) } */} </View> ); } diff --git a/extensions/shared/simple-input.native.js b/extensions/shared/simple-input.native.js index d3f46617ccf..38da5b419ca 100644 --- a/extensions/shared/simple-input.native.js +++ b/extensions/shared/simple-input.native.js @@ -9,15 +9,14 @@ const simpleInput = ( type, props, label, view, onChange ) => { const value = props.attributes[ type ]; return ( <View> - { ! isSelected && value !== '' && view( props ) } - { ( isSelected || value === '' ) && ( + {/* { ( isSelected || value === '' ) && ( */} <PlainText value={ value } placeholder={ label } aria-label={ label } onChange={ onChange } /> - ) } + {/* ) } */} </View> ); }; From 97092d79b00e33869d0f97e57ef1327ab7994639 Mon Sep 17 00:00:00 2001 From: Cameron Voell <cameronvoell@gmail.com> Date: Thu, 9 Apr 2020 01:19:12 -0700 Subject: [PATCH 7/9] Contact Info mobile inner blocks fixed focus --- .../contact-info/address/edit.native.js | 15 +++++++++++--- extensions/shared/simple-input.native.js | 20 ++++++++++--------- 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/extensions/blocks/contact-info/address/edit.native.js b/extensions/blocks/contact-info/address/edit.native.js index 46b9a3a937d..270a491ba6e 100644 --- a/extensions/blocks/contact-info/address/edit.native.js +++ b/extensions/blocks/contact-info/address/edit.native.js @@ -40,6 +40,7 @@ class AddressEdit extends Component { }, isSelected, setAttributes, + onFocus, } = this.props; const hasContent = [ address, addressLine2, addressLine3, city, region, postal, country ].some( @@ -50,9 +51,10 @@ class AddressEdit extends Component { <ToggleControl label={ __( 'Link address to Google Maps', 'jetpack' ) } checked={ linkToGoogleMaps } - onChange={ newlinkToGoogleMaps => - setAttributes( { linkToGoogleMaps: newlinkToGoogleMaps } ) - } + onChange={ ( newlinkToGoogleMaps ) => { + setAttributes( { linkToGoogleMaps: newlinkToGoogleMaps } ); + onFocus(); + } } /> ); @@ -67,6 +69,7 @@ class AddressEdit extends Component { aria-label={ __( 'Street Address', 'jetpack' ) } onChange={ newAddress => setAttributes( { address: newAddress } ) } onKeyDown={ this.preventEnterKey } + onFocus={ onFocus } /> <PlainText value={ addressLine2 } @@ -74,6 +77,7 @@ class AddressEdit extends Component { aria-label={ __( 'Address Line 2', 'jetpack' ) } onChange={ newAddressLine2 => setAttributes( { addressLine2: newAddressLine2 } ) } onKeyDown={ this.preventEnterKey } + onFocus={ onFocus } /> <PlainText value={ addressLine3 } @@ -81,6 +85,7 @@ class AddressEdit extends Component { aria-label={ __( 'Address Line 3', 'jetpack' ) } onChange={ newAddressLine3 => setAttributes( { addressLine3: newAddressLine3 } ) } onKeyDown={ this.preventEnterKey } + onFocus={ onFocus } /> <PlainText value={ city } @@ -88,6 +93,7 @@ class AddressEdit extends Component { aria-label={ __( 'City', 'jetpack' ) } onChange={ newCity => setAttributes( { city: newCity } ) } onKeyDown={ this.preventEnterKey } + onFocus={ onFocus } /> <PlainText value={ region } @@ -95,6 +101,7 @@ class AddressEdit extends Component { aria-label={ __( 'State/Province/Region', 'jetpack' ) } onChange={ newRegion => setAttributes( { region: newRegion } ) } onKeyDown={ this.preventEnterKey } + onFocus={ onFocus } /> <PlainText value={ postal } @@ -102,6 +109,7 @@ class AddressEdit extends Component { aria-label={ __( 'Postal/Zip Code', 'jetpack' ) } onChange={ newPostal => setAttributes( { postal: newPostal } ) } onKeyDown={ this.preventEnterKey } + onFocus={ onFocus } /> <PlainText value={ country } @@ -109,6 +117,7 @@ class AddressEdit extends Component { aria-label={ __( 'Country', 'jetpack' ) } onChange={ newCountry => setAttributes( { country: newCountry } ) } onKeyDown={ this.preventEnterKey } + onFocus={ onFocus } /> { externalLink } </Fragment> diff --git a/extensions/shared/simple-input.native.js b/extensions/shared/simple-input.native.js index 38da5b419ca..a690641b991 100644 --- a/extensions/shared/simple-input.native.js +++ b/extensions/shared/simple-input.native.js @@ -5,18 +5,20 @@ import { PlainText } from '@wordpress/block-editor'; import { View } from 'react-native'; const simpleInput = ( type, props, label, view, onChange ) => { - const { isSelected } = props; + const { + isSelected, + onFocus, + } = props; const value = props.attributes[ type ]; return ( <View> - {/* { ( isSelected || value === '' ) && ( */} - <PlainText - value={ value } - placeholder={ label } - aria-label={ label } - onChange={ onChange } - /> - {/* ) } */} + <PlainText + value={ value } + placeholder={ label } + aria-label={ label } + onChange={ onChange } + onFocus={ onFocus } + /> </View> ); }; From 3052f50ead87fd1c59f37ebfb0f381dbe1e9c14e Mon Sep 17 00:00:00 2001 From: Cameron Voell <cameronvoell@gmail.com> Date: Fri, 10 Apr 2020 10:57:28 -0700 Subject: [PATCH 8/9] Fixed lint errors --- .../contact-info/address/edit.native.js | 133 ++++++++---------- .../shared/register-jetpack-block.native.js | 7 +- extensions/shared/simple-input.native.js | 5 +- 3 files changed, 65 insertions(+), 80 deletions(-) diff --git a/extensions/blocks/contact-info/address/edit.native.js b/extensions/blocks/contact-info/address/edit.native.js index 270a491ba6e..dc9ccd3c5c1 100644 --- a/extensions/blocks/contact-info/address/edit.native.js +++ b/extensions/blocks/contact-info/address/edit.native.js @@ -7,11 +7,6 @@ import { Component, Fragment } from '@wordpress/element'; import { PlainText } from '@wordpress/block-editor'; import { ToggleControl } from '@wordpress/components'; -/** - * Internal dependencies - */ -import save from './save'; - class AddressEdit extends Component { constructor( ...args ) { super( ...args ); @@ -38,20 +33,15 @@ class AddressEdit extends Component { country, linkToGoogleMaps, }, - isSelected, setAttributes, onFocus, } = this.props; - const hasContent = [ address, addressLine2, addressLine3, city, region, postal, country ].some( - value => value !== '' - ); - const externalLink = ( <ToggleControl label={ __( 'Link address to Google Maps', 'jetpack' ) } checked={ linkToGoogleMaps } - onChange={ ( newlinkToGoogleMaps ) => { + onChange={ newlinkToGoogleMaps => { setAttributes( { linkToGoogleMaps: newlinkToGoogleMaps } ); onFocus(); } } @@ -60,68 +50,65 @@ class AddressEdit extends Component { return ( <View> - {/* { ! isSelected && hasContent && save( this.props ) } - { ( isSelected || ! hasContent ) && ( */} - <Fragment> - <PlainText - value={ address } - placeholder={ __( 'Street Address', 'jetpack' ) } - aria-label={ __( 'Street Address', 'jetpack' ) } - onChange={ newAddress => setAttributes( { address: newAddress } ) } - onKeyDown={ this.preventEnterKey } - onFocus={ onFocus } - /> - <PlainText - value={ addressLine2 } - placeholder={ __( 'Address Line 2', 'jetpack' ) } - aria-label={ __( 'Address Line 2', 'jetpack' ) } - onChange={ newAddressLine2 => setAttributes( { addressLine2: newAddressLine2 } ) } - onKeyDown={ this.preventEnterKey } - onFocus={ onFocus } - /> - <PlainText - value={ addressLine3 } - placeholder={ __( 'Address Line 3', 'jetpack' ) } - aria-label={ __( 'Address Line 3', 'jetpack' ) } - onChange={ newAddressLine3 => setAttributes( { addressLine3: newAddressLine3 } ) } - onKeyDown={ this.preventEnterKey } - onFocus={ onFocus } - /> - <PlainText - value={ city } - placeholder={ __( 'City', 'jetpack' ) } - aria-label={ __( 'City', 'jetpack' ) } - onChange={ newCity => setAttributes( { city: newCity } ) } - onKeyDown={ this.preventEnterKey } - onFocus={ onFocus } - /> - <PlainText - value={ region } - placeholder={ __( 'State/Province/Region', 'jetpack' ) } - aria-label={ __( 'State/Province/Region', 'jetpack' ) } - onChange={ newRegion => setAttributes( { region: newRegion } ) } - onKeyDown={ this.preventEnterKey } - onFocus={ onFocus } - /> - <PlainText - value={ postal } - placeholder={ __( 'Postal/Zip Code', 'jetpack' ) } - aria-label={ __( 'Postal/Zip Code', 'jetpack' ) } - onChange={ newPostal => setAttributes( { postal: newPostal } ) } - onKeyDown={ this.preventEnterKey } - onFocus={ onFocus } - /> - <PlainText - value={ country } - placeholder={ __( 'Country', 'jetpack' ) } - aria-label={ __( 'Country', 'jetpack' ) } - onChange={ newCountry => setAttributes( { country: newCountry } ) } - onKeyDown={ this.preventEnterKey } - onFocus={ onFocus } - /> - { externalLink } - </Fragment> - {/* ) } */} + <Fragment> + <PlainText + value={ address } + placeholder={ __( 'Street Address', 'jetpack' ) } + aria-label={ __( 'Street Address', 'jetpack' ) } + onChange={ newAddress => setAttributes( { address: newAddress } ) } + onKeyDown={ this.preventEnterKey } + onFocus={ onFocus } + /> + <PlainText + value={ addressLine2 } + placeholder={ __( 'Address Line 2', 'jetpack' ) } + aria-label={ __( 'Address Line 2', 'jetpack' ) } + onChange={ newAddressLine2 => setAttributes( { addressLine2: newAddressLine2 } ) } + onKeyDown={ this.preventEnterKey } + onFocus={ onFocus } + /> + <PlainText + value={ addressLine3 } + placeholder={ __( 'Address Line 3', 'jetpack' ) } + aria-label={ __( 'Address Line 3', 'jetpack' ) } + onChange={ newAddressLine3 => setAttributes( { addressLine3: newAddressLine3 } ) } + onKeyDown={ this.preventEnterKey } + onFocus={ onFocus } + /> + <PlainText + value={ city } + placeholder={ __( 'City', 'jetpack' ) } + aria-label={ __( 'City', 'jetpack' ) } + onChange={ newCity => setAttributes( { city: newCity } ) } + onKeyDown={ this.preventEnterKey } + onFocus={ onFocus } + /> + <PlainText + value={ region } + placeholder={ __( 'State/Province/Region', 'jetpack' ) } + aria-label={ __( 'State/Province/Region', 'jetpack' ) } + onChange={ newRegion => setAttributes( { region: newRegion } ) } + onKeyDown={ this.preventEnterKey } + onFocus={ onFocus } + /> + <PlainText + value={ postal } + placeholder={ __( 'Postal/Zip Code', 'jetpack' ) } + aria-label={ __( 'Postal/Zip Code', 'jetpack' ) } + onChange={ newPostal => setAttributes( { postal: newPostal } ) } + onKeyDown={ this.preventEnterKey } + onFocus={ onFocus } + /> + <PlainText + value={ country } + placeholder={ __( 'Country', 'jetpack' ) } + aria-label={ __( 'Country', 'jetpack' ) } + onChange={ newCountry => setAttributes( { country: newCountry } ) } + onKeyDown={ this.preventEnterKey } + onFocus={ onFocus } + /> + { externalLink } + </Fragment> </View> ); } diff --git a/extensions/shared/register-jetpack-block.native.js b/extensions/shared/register-jetpack-block.native.js index ed70cac8481..ed285e98088 100644 --- a/extensions/shared/register-jetpack-block.native.js +++ b/extensions/shared/register-jetpack-block.native.js @@ -48,9 +48,10 @@ export default function registerJetpackBlock( name, settings, childBlocks = [] ) example: requiredPlan ? undefined : settings.example, } ); - console.log( - `Block jetpack/${ name } registered.` - ); + if ( 'production' !== process.env.NODE_ENV ) { + // eslint-disable-next-line no-console + console.log( `Block jetpack/${ name } registered.` ); + } // Register child blocks. Using `registerBlockType()` directly avoids availability checks -- if // their parent is available, we register them all, without checking for their individual availability. diff --git a/extensions/shared/simple-input.native.js b/extensions/shared/simple-input.native.js index a690641b991..a90066b9dd3 100644 --- a/extensions/shared/simple-input.native.js +++ b/extensions/shared/simple-input.native.js @@ -5,10 +5,7 @@ import { PlainText } from '@wordpress/block-editor'; import { View } from 'react-native'; const simpleInput = ( type, props, label, view, onChange ) => { - const { - isSelected, - onFocus, - } = props; + const { onFocus } = props; const value = props.attributes[ type ]; return ( <View> From 91ed9da32c963e6ed50c38616c5013afe257af52 Mon Sep 17 00:00:00 2001 From: Tugdual de Kerviler <dekervit@gmail.com> Date: Wed, 15 Apr 2020 19:39:31 +0200 Subject: [PATCH 9/9] Mention native files in README --- extensions/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/extensions/README.md b/extensions/README.md index 91375f3469d..b7de2b67563 100644 --- a/extensions/README.md +++ b/extensions/README.md @@ -233,3 +233,9 @@ The build pipeline also supports [Color studio](https://github.com/Automattic/co ### Icons Please use outline versions of [Material icons](https://material.io/tools/icons/?style=outline) to stay in line with Gutenberg. Don't rely on icons used in WordPress core to avoid visual mixing up with core blocks. + +## Native support + +This is still very much experimental and subject to change. +React Native support for Jetpack blocks is being added as part of the WordPress [Android](https://github.com/wordpress-mobile/WordPress-Android) and [iOS](https://github.com/wordpress-mobile/WordPress-iOS) apps. +A react-native build configuration will attempt to resolve `.native.js` extensions before `.js` ones, making `.native.js` a simple approach to write "cross-platform" gutenberg blocks.