Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slot/Fill pattern with Toolbar #199 #11115

Merged
merged 27 commits into from
Nov 7, 2018
Merged

Slot/Fill pattern with Toolbar #199 #11115

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
ec171db
Added support for native toolbar component
marecar3 Oct 25, 2018
2b21b1a
Merge branch 'master' into feature/native-toolbar-component
marecar3 Oct 26, 2018
ecf5da5
Expose BlockEdit to native
marecar3 Oct 31, 2018
8b4d948
Merge branch 'master' into rnmobile/native-toolbar-component
marecar3 Oct 31, 2018
8bf0d06
Merge branch 'master' into rnmobile/native-toolbar-component
marecar3 Nov 1, 2018
07646aa
Merge branch 'master' into rnmobile/native-toolbar-component
marecar3 Nov 1, 2018
1449764
Merge branch 'master' into rnmobile/native-toolbar-component
marecar3 Nov 1, 2018
237c9c7
Removed isSelected
marecar3 Nov 1, 2018
bf4fa94
Removed style from paragraph
marecar3 Nov 1, 2018
e52c994
Merge branch 'master' into rnmobile/native-toolbar-component
marecar3 Nov 1, 2018
7f49f78
Merge branch 'master' into rnmobile/native-toolbar-component
marecar3 Nov 1, 2018
5c26071
Fixed lint tests
marecar3 Nov 1, 2018
4f40a6d
Merge branch 'master' into rnmobile/native-toolbar-component
marecar3 Nov 1, 2018
0d3709b
Fixed lint
marecar3 Nov 1, 2018
90b13b7
Merge branch 'master' into rnmobile/native-toolbar-component
marecar3 Nov 5, 2018
cf5e3b4
Merge branch 'master' into rnmobile/native-toolbar-component
marecar3 Nov 6, 2018
211e3d2
Fix for iOS font crash
marecar3 Nov 6, 2018
ed31f31
Merge style with block code style
marecar3 Nov 6, 2018
4ab2b39
Merge branch 'master' into rnmobile/native-toolbar-component
marecar3 Nov 6, 2018
1a98cc8
Revert style
marecar3 Nov 6, 2018
5c9a7b5
Create edit.native.js file to bypass passing className from original one
marecar3 Nov 6, 2018
361166e
Fixed failing tests
marecar3 Nov 6, 2018
d9acc59
Disable styelint rule font-family-no-missing-generic-family-keyword f…
marecar3 Nov 6, 2018
2718990
Fixed tests
marecar3 Nov 6, 2018
5e9a9e5
Merge branch 'rnmobile/native-toolbar-component' of https://github.co…
marecar3 Nov 6, 2018
b8a9823
Merge
marecar3 Nov 7, 2018
4712418
Fix style little bit
marecar3 Nov 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/block-library/src/code/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ import { PlainText } from '@wordpress/editor';

// 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 CodeEdit( { attributes, setAttributes, style } ) {
export default function CodeEdit( { attributes, setAttributes } ) {
return (
<View>
<PlainText
value={ attributes.content }
style={ style }
style={ { fontFamily: 'monospace' } }
multiline={ true }
underlineColorAndroid="transparent"
onChange={ ( content ) => setAttributes( { content } ) }
Expand Down
6 changes: 4 additions & 2 deletions packages/block-library/src/heading/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { View } from 'react-native';
*/
import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { RichText } from '@wordpress/editor';
import { RichText, BlockControls } from '@wordpress/editor';
import { parse, createBlock } from '@wordpress/blocks';

/**
Expand Down Expand Up @@ -42,7 +42,9 @@ class HeadingEdit extends Component {

return (
<View>
<HeadingToolbar minLevel={ 2 } maxLevel={ 5 } selectedLevel={ level } onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) } />
<BlockControls>
<HeadingToolbar minLevel={ 2 } maxLevel={ 5 } selectedLevel={ level } onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) } />
</BlockControls>
<RichText
tagName={ tagName }
value={ content }
Expand Down
5 changes: 3 additions & 2 deletions packages/block-library/src/paragraph/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@ class ParagraphEdit extends Component {
const {
attributes,
setAttributes,
style,
mergeBlocks,
} = this.props;

Expand All @@ -83,7 +82,9 @@ class ParagraphEdit extends Component {
tagName="p"
value={ content }
style={ {
...style,
// We don't want to pass style here from upper leyers, because it's corrupted
Copy link
Contributor

@hypest hypest Nov 2, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be good if we can re-use the work we did for the Inserter's SVGs case where we take the concatenated string passed in the props and convert it to proper style format. Can we make a utility function out of that work and use it here? (Same for the code block above, or elsewhere)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this class name ever converted to style properly with the Babel plugin that's used in the project?

Copy link
Contributor Author

@marecar3 marecar3 Nov 2, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @hypest @gziolo, I saw the solution for converting style string to style object, but when I look at the input (style string) and output (style object) it doesn't make sense for this case.
This is what I get as a style"custom-class-1 custom-class-2 has-background has-drop-cap has-large-font-size has-vivid-red-background-color"' I think that I don't want that to be converted into style, as I didn't pass it. What do you think about it? I am open for suggestions.

// (when a `className` prop is passed it gets converted to `style` here)
// as we're using the react-native-classname-to-style plugin.
minHeight: Math.max( minHeight, typeof attributes.aztecHeight === 'undefined' ? 0 : attributes.aztecHeight ),
} }
onChange={ ( event ) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/button/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function Button( props ) {
onPress={ onClick }
style={ { borderColor: ariaPressed ? 'black' : 'white', borderWidth: 1, borderRadius: 2 } }
>
<View style={ { flex: 1, flexDirection: 'row' } }>
<View style={ { height: 44, width: 44, flexDirection: 'row' } }>
hypest marked this conversation as resolved.
Show resolved Hide resolved
{ children }
{ subscript && ( <Text style={ { fontVariant: [ 'small-caps' ], textAlignVertical: 'bottom' } }>{ subscript }</Text> ) }
</View>
Expand Down
2 changes: 2 additions & 0 deletions packages/components/src/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,5 @@ export * from './primitives';
export { default as Dashicon } from './dashicon';
export { default as Toolbar } from './toolbar';
export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
export { default as withFilters } from './higher-order/with-filters';
2 changes: 1 addition & 1 deletion packages/components/src/toolbar/toolbar-container.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import { View } from 'react-native';

export default ( props ) => (
<View style={ { flex: 1, flexDirection: 'row' } }>
<View style={ { flexDirection: 'row' } }>
{ props.children }
</View>
);
3 changes: 3 additions & 0 deletions packages/editor/src/components/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,6 @@ export * from './font-sizes';
export { default as PlainText } from './plain-text';
export { default as RichText } from './rich-text';
export { default as MediaPlaceholder } from './media-placeholder';
export { default as BlockFormatControls } from './block-format-controls';
export { default as BlockControls } from './block-controls';
export { default as BlockEdit } from './block-edit';
5 changes: 3 additions & 2 deletions packages/editor/src/components/rich-text/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
import { Component, RawHTML } from '@wordpress/element';
import { withInstanceId, compose } from '@wordpress/compose';
import { Toolbar } from '@wordpress/components';
import { BlockFormatControls } from '@wordpress/editor';
import {
isEmpty,
create,
Expand Down Expand Up @@ -349,9 +350,9 @@ export class RichText extends Component {

return (
<View>
<View style={ { flex: 1 } }>
<BlockFormatControls>
<Toolbar controls={ toolbarControls } />
</View>
</BlockFormatControls>
<RCTAztecView
ref={ ( ref ) => {
this._editor = ref;
Expand Down