From 881617f4cc752be971e95a91e0a44a4c3e8e4c3b Mon Sep 17 00:00:00 2001 From: Stefanos Togoulidis Date: Fri, 4 May 2018 10:09:00 +0300 Subject: [PATCH] Port the core/code block to be used by the ReactNative mobile GB app (#5816) * Android specific files for the Code block * CSS related imports are suppressed * classnames are left in only to minimize diff among the files but do not play a role, nor style the elements * Breaking change: Don't override the default JSX translation So far, that's the only way I found to have the android-specific jest tests succeed. * Add the platform specific files for iOS as well * Set TextInput to multiline for Code block * Hide the default TextInput underline on Android * Expose registerBlockType, getBlockType to the RN app * Use .native.js for common native code * Correct configuration for the babel plugins settings * transform-react-jsx for the production env as well * No need for pragma override Will define a `wp` global via RN and reuse the `createElement()` from `@gutenberg/component`. * Ignore mobile native files when linting * Revert "Ignore mobile native files when linting" This reverts commit a3d5ab4af34941e5afb12eba3b620dce565a78e6. * Comment out ununsed imports * Fix codestyle * Import is compatible anyway, uncomment it * Remove the React import. The RN project auto-imports it. * Limit native code to the edit function alone * Expose getBlockContent to RN * RN app tests need createElement exported * Export serialize from serializer * Load native version of plain-text's CSS module * Make it clear that RN uses styles, not classnames * Use the i18n package from @wordpress * Remove some commented out code * Utils are not currently used on native * 'Border' property not supported in shorthand form * Use hypens in css class names as traditionally * remove unused code * No need for platform-specific factory.js * Move native files after update from master * Codestyle fix * GB isn't using Prettier so, no need for the pragma * Comment on the need to import the `edit` function * Export the edit function as default * Remove reduntant line comment * Import block using the new pattern * Add a comment about styling * Use object property shorthand for `edit` --- blocks/api/index.native.js | 11 ++++++++ blocks/index.native.js | 12 +++++++++ blocks/plain-text/index.native.js | 21 +++++++++++++++ blocks/plain-text/style.native.scss | 9 +++++++ core-blocks/code/edit.js | 23 +++++++++++++++++ core-blocks/code/edit.native.js | 30 ++++++++++++++++++++++ core-blocks/code/index.js | 16 ++---------- core-blocks/index.native.js | 19 ++++++++++++++ element/index.native.js | 40 +++++++++++++++++++++++++++++ 9 files changed, 167 insertions(+), 14 deletions(-) create mode 100644 blocks/api/index.native.js create mode 100644 blocks/index.native.js create mode 100644 blocks/plain-text/index.native.js create mode 100644 blocks/plain-text/style.native.scss create mode 100644 core-blocks/code/edit.js create mode 100644 core-blocks/code/edit.native.js create mode 100644 core-blocks/index.native.js create mode 100644 element/index.native.js diff --git a/blocks/api/index.native.js b/blocks/api/index.native.js new file mode 100644 index 0000000000000..3bef99c41e803 --- /dev/null +++ b/blocks/api/index.native.js @@ -0,0 +1,11 @@ +export { + createBlock, +} from './factory'; +export { + default as serialize, + getBlockContent, +} from './serializer'; +export { + registerBlockType, + getBlockType, +} from './registration'; diff --git a/blocks/index.native.js b/blocks/index.native.js new file mode 100644 index 0000000000000..c949cf17d0a2a --- /dev/null +++ b/blocks/index.native.js @@ -0,0 +1,12 @@ +// A "block" is the abstract term used to describe units of markup that, +// when composed together, form the content or layout of a page. +// The API for blocks is exposed via `wp.blocks`. +// +// Supported blocks are registered by calling `registerBlockType`. Once registered, +// the block is made available as an option to the editor interface. +// +// Blocks are inferred from the HTML source of a post through a parsing mechanism +// and then stored as objects in state, from which it is then rendered for editing. +export * from './api'; + +export { default as PlainText } from './plain-text'; diff --git a/blocks/plain-text/index.native.js b/blocks/plain-text/index.native.js new file mode 100644 index 0000000000000..78f60593a6bfc --- /dev/null +++ b/blocks/plain-text/index.native.js @@ -0,0 +1,21 @@ +/** + * External dependencies + */ +import { TextInput } from 'react-native'; + +/** + * Internal dependencies + */ +import styles from './style.scss'; + +function PlainText( { onChange, className, ...props } ) { + return ( + onChange( text ) } + { ...props } + /> + ); +} + +export default PlainText; diff --git a/blocks/plain-text/style.native.scss b/blocks/plain-text/style.native.scss new file mode 100644 index 0000000000000..c1b9d5fe674d9 --- /dev/null +++ b/blocks/plain-text/style.native.scss @@ -0,0 +1,9 @@ +.blocks-plain-text { + box-shadow: none; + + border-width: 0; + + padding: 0; + margin: 0; + width: 100%; +} diff --git a/core-blocks/code/edit.js b/core-blocks/code/edit.js new file mode 100644 index 0000000000000..71414afaa6c00 --- /dev/null +++ b/core-blocks/code/edit.js @@ -0,0 +1,23 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import './editor.scss'; +import { PlainText } from '@wordpress/blocks'; + +export default function edit( { attributes, setAttributes, className } ) { + return ( +
+ setAttributes( { content } ) } + placeholder={ __( 'Write code…' ) } + aria-label={ __( 'Code' ) } + /> + </div> + ); +} diff --git a/core-blocks/code/edit.native.js b/core-blocks/code/edit.native.js new file mode 100644 index 0000000000000..bde686ed7f700 --- /dev/null +++ b/core-blocks/code/edit.native.js @@ -0,0 +1,30 @@ +import { View } from 'react-native'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { PlainText } from '@wordpress/blocks'; + +// Note: styling is applied directly to the (nested) PlainText component. Web-side components +// apply it to the container 'div' but we don't have a proper proposal for cascading styling yet. +export default function edit( { attributes, setAttributes, style } ) { + return ( + <View> + <PlainText + value={ attributes.content } + style={ style } + multiline={ true } + underlineColorAndroid="transparent" + onChange={ ( content ) => setAttributes( { content } ) } + placeholder={ __( 'Write code…' ) } + aria-label={ __( 'Code' ) } + /> + </View> + ); +} + diff --git a/core-blocks/code/index.js b/core-blocks/code/index.js index 4fcf09bd33248..0b26512d61865 100644 --- a/core-blocks/code/index.js +++ b/core-blocks/code/index.js @@ -4,13 +4,12 @@ import { __ } from '@wordpress/i18n'; import { createBlock, - PlainText, } from '@wordpress/blocks'; /** * Internal dependencies */ -import './editor.scss'; +import edit from './edit'; export const name = 'core/code'; @@ -66,18 +65,7 @@ export const settings = { ], }, - edit( { attributes, setAttributes, className } ) { - return ( - <div className={ className }> - <PlainText - value={ attributes.content } - onChange={ ( content ) => setAttributes( { content } ) } - placeholder={ __( 'Write code…' ) } - aria-label={ __( 'Code' ) } - /> - </div> - ); - }, + edit, save( { attributes } ) { return <pre><code>{ attributes.content }</code></pre>; diff --git a/core-blocks/index.native.js b/core-blocks/index.native.js new file mode 100644 index 0000000000000..44a282e6a1eae --- /dev/null +++ b/core-blocks/index.native.js @@ -0,0 +1,19 @@ +/** + * WordPress dependencies + */ +import { + registerBlockType, +} from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import * as code from './code'; + +export const registerCoreBlocks = () => { + [ + code, + ].forEach( ( { name, settings } ) => { + registerBlockType( name, settings ); + } ); +}; diff --git a/element/index.native.js b/element/index.native.js new file mode 100644 index 0000000000000..2976db326fbfd --- /dev/null +++ b/element/index.native.js @@ -0,0 +1,40 @@ +/** + * External dependencies + */ +import { + createElement, + Component, +} from 'react'; + +/** + * Internal dependencies + */ +import serialize from './serialize'; + +/** + * Returns a new element of given type. Type can be either a string tag name or + * another function which itself returns an element. + * + * @param {?(string|Function)} type Tag name or element creator + * @param {Object} props Element properties, either attribute + * set to apply to DOM node or values to + * pass through to element creator + * @param {...WPElement} children Descendant elements + * + * @return {WPElement} Element. + */ +export { createElement }; + +/** + * A base class to create WordPress Components (Refs, state and lifecycle hooks) + */ +export { Component }; + +/** + * Renders a given element into a string. + * + * @param {WPElement} element Element to render + * + * @return {string} HTML. + */ +export { serialize as renderToString };