diff --git a/blocks/api/index.native.js b/blocks/api/index.native.js new file mode 100644 index 00000000000000..3bef99c41e8035 --- /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 00000000000000..c949cf17d0a2a7 --- /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 00000000000000..78f60593a6bfc8 --- /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 00000000000000..c1b9d5fe674d9c --- /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 00000000000000..71414afaa6c00e --- /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 00000000000000..bde686ed7f7009 --- /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 7587d697e3fb67..125909bab19244 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'; @@ -55,18 +54,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 00000000000000..44a282e6a1eaeb --- /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 00000000000000..2976db326fbfd5 --- /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 };