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

Jump to bottom

[RNMobile] Update "add block" button style in default editor view #39726

Merged
merged 45 commits into from
Apr 13, 2022
Merged

[RNMobile] Update "add block" button style in default editor view #39726

Show file tree
Hide file tree
Changes from 28 commits
Commits
Show all changes
45 commits
Select commit Hold shift + click to select a range
2b3c19d
Update CHANGELOG
Mar 24, 2022
37960ce
Add 'add content' text
Mar 24, 2022
5ad815a
Add 'isDefaultView' check
Mar 24, 2022
556ac19
Rename CSS selectors to follow BEM methodology
Mar 24, 2022
53db20c
[WIP] Implement styles using 'isDefaultView' check
Mar 24, 2022
392832f
Separate 'defaultViewProps' for readability
Mar 25, 2022
b0693a7
Improvement to CSS code quality
Mar 29, 2022
8197083
Separate 'defaultViewText' into its own variable
Mar 29, 2022
46c31dd
Update CHANGELOG
Mar 29, 2022
03aa6ae
Merge branch 'trunk' into rnmobile/update/default-block-inserter-button
Mar 29, 2022
532c437
Remove redundant code causing unit test failure
Mar 29, 2022
b7ac622
Add styling for dark mode
Mar 29, 2022
d699e78
Merge branch 'trunk' into rnmobile/update/default-block-inserter-button
Mar 29, 2022
38df61c
Vertically align text within button
Mar 31, 2022
4af6403
Merge branch 'trunk' into rnmobile/update/default-block-inserter-button
Mar 31, 2022
005e6c7
Update text for clarity
Mar 31, 2022
4b5aa48
Assign larger height to toolbar in default view
Apr 6, 2022
19e5eb5
Hide new default view style when title's selected
Apr 6, 2022
ede9c16
Merge branch 'trunk' into rnmobile/update/default-block-inserter-button
Apr 6, 2022
0212fbf
Apply CSS for default toolbar
Apr 6, 2022
c31c897
Tweaks to button's styling
Apr 6, 2022
d8684a2
Update text in expanded button
Apr 7, 2022
0039c10
Set icon size to 24 (the default)
Apr 7, 2022
7769cac
Update height of editor's default toolbar
Apr 7, 2022
4a2ed4a
Refine expanded button's padding
Apr 7, 2022
c459a7b
Update button's background colour in light mode
Apr 7, 2022
d2822fe
Prevent expanded button displaying in some cases
Apr 7, 2022
82eeb5f
Merge branch 'trunk' into rnmobile/update/default-block-inserter-button
Apr 7, 2022
7d3399f
Revert "false fix"
Apr 8, 2022
fd73fa6
Turn 'isDefaultView' into 'global' editor setting
Apr 10, 2022
db5d32e
Prevent unwanted 'flash' of 'expanded' button
Apr 10, 2022
a35a8e5
Tweak code comment for clarity
Apr 10, 2022
3715ee6
Merge branch 'trunk' into rnmobile/update/default-block-inserter-button
Apr 10, 2022
ac5607e
Remove redundant code causing test failures
Apr 10, 2022
95cda71
Revert "Remove redundant code causing test failures"
Apr 10, 2022
24d9294
Revert "Turn 'isDefaultView' into 'global' editor setting"
fluiddot Apr 12, 2022
adf4173
Revert "Prevent unwanted 'flash' of 'expanded' button"
fluiddot Apr 12, 2022
bc9b4ea
Preserve isDefaultView value while inserter is open
fluiddot Apr 12, 2022
86fada7
Rename isInserterOpen state value
fluiddot Apr 12, 2022
28e772b
Apply BEM naming in header toolbar styles
fluiddot Apr 12, 2022
ee54130
Rename default view to expanded mode
fluiddot Apr 12, 2022
ee12890
Use hasSelectedBlock selector
fluiddot Apr 12, 2022
fc2403f
Fix header toolbar height in layout component
fluiddot Apr 12, 2022
4106e33
Add style mock
fluiddot Apr 12, 2022
1820356
Merge branch 'trunk' into rnmobile/update/default-block-inserter-button
fluiddot Apr 13, 2022
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
1 change: 1 addition & 0 deletions packages/base-styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ $block-bg-padding--h: 2.375em;

// Dimensions.
$mobile-header-toolbar-height: 44px;
$mobile-header-toolbar-default-height: 52px;
$mobile-floating-toolbar-height: 44px;
$mobile-floating-toolbar-margin: 8px;
$mobile-color-swatch: 48px;
Expand Down
85 changes: 60 additions & 25 deletions packages/block-editor/src/components/inserter/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { AccessibilityInfo, Platform } from 'react-native';
import { AccessibilityInfo, Platform, Text } from 'react-native';
import { delay } from 'lodash';

/**
Expand All @@ -15,6 +15,7 @@ import { compose, withPreferredColorScheme } from '@wordpress/compose';
import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
import {
Icon,
plus,
plusCircle,
plusCircleFilled,
insertAfter,
Expand All @@ -32,27 +33,51 @@ import { store as blockEditorStore } from '../../store';

const VOICE_OVER_ANNOUNCEMENT_DELAY = 1000;

const defaultRenderToggle = ( { onToggle, disabled, style, onLongPress } ) => (
<ToolbarButton
title={ _x( 'Add block', 'Generic label for block inserter button' ) }
icon={
<Icon
icon={ plusCircleFilled }
style={ style }
color={ style.color }
/>
}
onClick={ onToggle }
extraProps={ {
hint: __( 'Double tap to add a block' ),
// testID is present to disambiguate this element for native UI tests. It's not
// usually required for components. See: https://git.io/JeQ7G.
testID: 'add-block-button',
onLongPress,
} }
isDisabled={ disabled }
/>
);
const defaultRenderToggle = ( {
onToggle,
disabled,
style,
containerStyle,
onLongPress,
isDefaultView,
} ) => {
// The "default view" refers to the editor's appearance when no blocks
SiobhyB marked this conversation as resolved.
Show resolved Hide resolved
// are currently selected. The "add block" button has a separate style
// for the "default view", which are added via the below "defaultViewProps"
// and "defaultViewText" variables.
const defaultViewProps = isDefaultView && {
icon: <Icon icon={ plus } style={ style } />,
customContainerStyles: containerStyle,
fixedRatio: false,
};
const defaultViewText = (
<Text style={ styles[ 'inserter-menu__add-block-button-text' ] }>
{ __( 'Add Blocks' ) }
</Text>
);

return (
<ToolbarButton
title={ _x(
'Add block',
'Generic label for block inserter button'
) }
icon={ <Icon icon={ plusCircleFilled } style={ style } /> }
onClick={ onToggle }
extraProps={ {
hint: __( 'Double tap to add a block' ),
// testID is present to disambiguate this element for native UI tests. It's not
// usually required for components. See: https://git.io/JeQ7G.
testID: 'add-block-button',
onLongPress,
} }
isDisabled={ disabled }
{ ...defaultViewProps }
>
{ isDefaultView && defaultViewText }
Copy link
Contributor

Choose a reason for hiding this comment

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

👋 @SiobhyB , not sure if you have tried this already for fixing the button flashing issue, but wanted to share some of my findings: a bit of promising success by using the shouldReplaceBlock state variable in the Inserter class. Specifically, by adding a && ! shouldReplaceBlock conditional. This way, the text label is not shown when the editor is in the process of replacing the default richtext block.

But as I said, that's half-success, since the toolbar styling is not correct, since that's governed by the HeaderToolbar component. Not sure yet how to pass such transitional state to the HeaderToolbar yet.

Hope this all helps!

Copy link
Contributor Author

@SiobhyB SiobhyB Apr 11, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

@hypest, thank you so much for this! 🙇‍♀️

I think you're right that the trickiest part to this is with updating the parent component. With that in mind, I've made a change to set isDefaultView as an editor setting, which I envisage as being similar to other editor settings that influence the editor's appearance, such as fixedToolbar, reducedUI, focusMode, etc.

I've been able to get some code that's functionally working with that approach (which I've committed to this PR) but it still has some issues. The biggest of which is: As my latest code changes involve an import of @wordpress/editor inside a @wordpress/block-editor file, the automated tests fail with the Cannot read property 'SETTINGS_DEFAULTS' of undefined, js engine: hermes error (same issue that ended up blocking this PR: #35021).

I feel like this is on the right track, though, and it's a case of finding a better way to control the new setting's data. I'll keep looking into this, but want to be transparent that I don't think it's something that will be quick for me to get to the bottom of.

Copy link
Contributor

Choose a reason for hiding this comment

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

With that in mind, I've made a change to set isDefaultView as an editor setting, which I envisage as being similar to other editor settings that influence the editor's appearance, such as fixedToolbar, reducedUI, focusMode, etc

Hmm, feels to me that the this showing/hiding of the textual part of the inserter button is not a setting per se. I mean, it's not configuration that we are expecting to hold through the lifecycle of the editor instance. Instead, it's state that changes depending on the user/caret focus. Are there other similar examples already in place perhaps, where we use the settings for state like this?

Perhaps what we need to "copy" is the way the settings are implemented (hooks/events/etc) but not piggyback on the settings component itself.

That said, I wonder if @jhnstn you have thoughts on this?

Copy link
Contributor Author

@SiobhyB SiobhyB Apr 11, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Instead, it's state that changes depending on the user/caret focus. Are there other similar examples already in place perhaps, where we use the settings for state like this?

The only other one that comes to mind is that we use the settings to update impressions, which is then used to update parts of the native UI. It was seeing this line of code in the Inserter component that got me thinking of using the approach I've taken in the latest commits. It feels kind of similar to me in that the impressions are more of a state than a setting.

Perhaps what we need to "copy" is the way the settings are implemented (hooks/events/etc) but not piggyback on the settings component itself.

I wonder if there might be a way to use context to change this data. 🤔 Looking forward to hearing any ideas from Jason!

Copy link
Contributor

Choose a reason for hiding this comment

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

This issue was addressed in bc9b4ea.

</ToolbarButton>
);
};

export class Inserter extends Component {
constructor() {
Expand Down Expand Up @@ -219,13 +244,21 @@ export class Inserter extends Component {
renderToggle = defaultRenderToggle,
getStylesFromColorScheme,
showSeparator,
isDefaultView,
} = this.props;
if ( showSeparator && isOpen ) {
return <BlockInsertionPoint />;
}
const style = getStylesFromColorScheme(
styles.addBlockButton,
styles.addBlockButtonDark
const style = isDefaultView
? styles[ 'inserter-menu__add-block-button-icon--default' ]
: getStylesFromColorScheme(
styles[ 'inserter-menu__add-block-button-icon' ],
styles[ 'inserter-menu__add-block-button-icon--dark' ]
);

const containerStyle = getStylesFromColorScheme(
styles[ 'inserter-menu__add-block-button' ],
styles[ 'inserter-menu__add-block-button--dark' ]
);

const onPress = () => {
Expand Down Expand Up @@ -265,7 +298,9 @@ export class Inserter extends Component {
isOpen,
disabled,
style,
containerStyle,
onLongPress,
isDefaultView,
} ) }
<Picker
ref={ ( instance ) => ( this.picker = instance ) }
Expand Down
27 changes: 24 additions & 3 deletions packages/block-editor/src/components/inserter/style.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,34 @@
/** @format */

.addBlockButton {
color: $blue-wordpress;
.inserter-menu__add-block-button-icon {
color: $blue-50;
}

.addBlockButtonDark {
.inserter-menu__add-block-button-icon--dark {
color: $blue-30;
}

.inserter-menu__add-block-button-icon--default {
color: $white;
}

.inserter-menu__add-block-button {
border-radius: 22px;
background-color: $blue-50;
margin: 8px;
padding: 6px 16px 6px 12px;
}

.inserter-menu__add-block-button--dark {
background-color: $blue-30;
}

.inserter-menu__add-block-button-text {
color: $white;
font-weight: 500;
align-self: center;
}

.inserter-menu__list-wrapper {
flex: 1;
}
Expand Down
34 changes: 28 additions & 6 deletions packages/edit-post/src/components/header/header-toolbar/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Platform, ScrollView, View } from 'react-native';
/**
* WordPress dependencies
*/
import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
import { useRef } from '@wordpress/element';
import { compose, withPreferredColorScheme } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
Expand Down Expand Up @@ -40,6 +41,7 @@ function HeaderToolbar( {
getStylesFromColorScheme,
onHideKeyboard,
isRTL,
isDefaultView,
} ) {
const scrollViewRef = useRef( null );
const scrollToStart = () => {
Expand Down Expand Up @@ -81,10 +83,13 @@ function HeaderToolbar( {

return (
<View
style={ getStylesFromColorScheme(
styles.container,
styles.containerDark
) }
style={ [
getStylesFromColorScheme(
styles.container,
styles.containerDark
),
isDefaultView && styles.containerDefault,
] }
>
<ScrollView
ref={ scrollViewRef }
Expand All @@ -95,7 +100,10 @@ function HeaderToolbar( {
alwaysBounceHorizontal={ false }
contentContainerStyle={ styles.scrollableContent }
>
<Inserter disabled={ ! showInserter } />
<Inserter
disabled={ ! showInserter }
isDefaultView={ isDefaultView }
/>
{ renderHistoryButtons() }
<BlockToolbar />
</ScrollView>
Expand All @@ -121,8 +129,18 @@ export default compose( [
getBlockRootClientId,
getBlockSelectionEnd,
hasInserterItems,
getSelectedBlockClientId,
getBlock,
} = select( blockEditorStore );
const { getEditorSettings } = select( editorStore );
const { getEditorSettings, isPostTitleSelected } = select(
editorStore
);
const isAnyBlockSelected = getSelectedBlockClientId();
const isTitleSelected = isPostTitleSelected();
const isBlockBeingReplaced =
isAnyBlockSelected &&
isUnmodifiedDefaultBlock( getBlock( getBlockSelectionEnd() ) );

return {
hasRedo: select( editorStore ).hasEditorRedo(),
hasUndo: select( editorStore ).hasEditorUndo(),
Expand All @@ -136,6 +154,10 @@ export default compose( [
isTextModeEnabled:
select( editPostStore ).getEditorMode() === 'text',
isRTL: select( blockEditorStore ).getSettings().isRTL,
isDefaultView:
isBlockBeingReplaced === null
? false
: ! isAnyBlockSelected && ! isTitleSelected,
};
} ),
withDispatch( ( dispatch ) => {
Expand Down
4 changes: 4 additions & 0 deletions packages/edit-post/src/components/header/header-toolbar/style.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@
border-top-color: $background-dark-elevated;
}

.containerDefault {
height: $mobile-header-toolbar-default-height;
}

.scrollableContent {
flex-grow: 1; // Fixes RTL issue on Android.
}
Expand Down
1 change: 1 addition & 0 deletions packages/react-native-editor/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ For each user feature we should also add a importance categorization label to i

## Unreleased

- [**] Update "add block" button's style in default editor view. [#39726]
- [*] Remove banner error notification on upload failure [#39694]

## 1.73.1
Expand Down