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

Add more writing flow options: Reduced UI, theme styles, spotlight #22494

Merged
merged 11 commits into from Oct 2, 2020
Merged

Add more writing flow options: Reduced UI, theme styles, spotlight #22494

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
646fb57
Try a very opinionated spotlight mode
youknowriad May 20, 2020
409d0df
Reduced UI and theme styles
youknowriad May 28, 2020
f661708
Top toolbar fixes
youknowriad May 28, 2020
c28c148
Fix toolbar after rebase
youknowriad Sep 23, 2020
adaed29
Load default editor styles properly
youknowriad Sep 23, 2020
005c7bc
Tweak the complementary area buttons colors
youknowriad Sep 23, 2020
9881416
Hide sibling inserter, drag handle and block outline on reduced UI mode
youknowriad Sep 24, 2020
c25aa05
Fix unit tests
youknowriad Sep 24, 2020
877573b
Fix inserter button clunkiness
youknowriad Sep 24, 2020
2c82f19
Enable theme styles by default and rename Reduced UI
youknowriad Sep 25, 2020
4746463
Fix typo
youknowriad Oct 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 20 additions & 0 deletions lib/client-assets.php
View file
Open in desktop
Expand Up @@ -619,3 +619,23 @@ function gutenberg_extend_block_editor_styles( $settings ) {
return $settings;
}
add_filter( 'block_editor_settings', 'gutenberg_extend_block_editor_styles' );

/**
* Load the default editor styles.
* These styles are used if the "no theme styles" options is triggered.
*
* @param array $settings Default editor settings.
*
* @return array Filtered editor settings.
*/
function gutenberg_extend_block_editor_settings_with_default_editor_styles( $settings ) {
$editor_styles_file = gutenberg_dir_path() . 'build/editor/editor-styles.css';
$settings['defaultEditorStyles'] = array(
array(
'css' => file_get_contents( $editor_styles_file ),
Copy link
Member

Choose a reason for hiding this comment

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

Did we previously not use these styles?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We don't have a way to get just these styles, previously we just received an array containing the editor styles the theme wants, it can or can't include these.

Copy link
Contributor

Choose a reason for hiding this comment

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

Should we handle file-access failures?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This file is already loaded that way in Core and in other places in Gutenberg, so I'm not sure we need special treatment here.

),
);

return $settings;
}
add_filter( 'block_editor_settings', 'gutenberg_extend_block_editor_settings_with_default_editor_styles' );
6 changes: 5 additions & 1 deletion packages/block-editor/src/components/block-list/insertion-point.js
View file
Open in desktop
Expand Up @@ -31,10 +31,14 @@ function InsertionPointInserter( {
getMultiSelectedBlockClientIds,
getSelectedBlockClientId,
hasMultiSelection,
getSettings,
} = select( 'core/block-editor' );
const { hasReducedUI } = getSettings();
if ( hasReducedUI ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

isInserterHidden seems to only affect a classname. Is it the best way to hide?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

this was intentional to keep it in the tab sequence (show it when you tab into it)

return true;
}
const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds();
const selectedBlockClientId = getSelectedBlockClientId();

return hasMultiSelection()
? multiSelectedBlockClientIds.includes( clientId )
: clientId === selectedBlockClientId;
Expand Down
10 changes: 8 additions & 2 deletions packages/block-editor/src/components/block-toolbar/index.js
View file
Open in desktop
Expand Up @@ -33,6 +33,7 @@ export default function BlockToolbar( {
blockClientId,
blockType,
hasFixedToolbar,
hasReducedUI,
isValid,
isVisual,
} = useSelect( ( select ) => {
Expand All @@ -47,14 +48,16 @@ export default function BlockToolbar( {
const selectedBlockClientIds = getSelectedBlockClientIds();
const selectedBlockClientId = selectedBlockClientIds[ 0 ];
const blockRootClientId = getBlockRootClientId( selectedBlockClientId );
const settings = getSettings();

return {
blockClientIds: selectedBlockClientIds,
blockClientId: selectedBlockClientId,
blockType:
selectedBlockClientId &&
getBlockType( getBlockName( selectedBlockClientId ) ),
hasFixedToolbar: getSettings().hasFixedToolbar,
hasFixedToolbar: settings.hasFixedToolbar,
hasReducedUI: settings.hasReducedUI,
rootClientId: blockRootClientId,
isValid: selectedBlockClientIds.every( ( id ) =>
isBlockValid( id )
Expand All @@ -72,6 +75,9 @@ export default function BlockToolbar( {
{
ref: nodeRef,
onChange( isFocused ) {
if ( isFocused && hasReducedUI ) {
return;
}
toggleBlockHighlight( blockClientId, isFocused );
},
}
Expand Down Expand Up @@ -117,7 +123,7 @@ export default function BlockToolbar( {
<BlockSwitcher clientIds={ blockClientIds } />
<BlockMover
clientIds={ blockClientIds }
hideDragHandle={ hideDragHandle }
hideDragHandle={ hideDragHandle || hasReducedUI }
/>
</ToolbarGroup>
) }
Expand Down
5 changes: 0 additions & 5 deletions packages/block-editor/src/components/block-toolbar/style.scss
View file
Open in desktop
Expand Up @@ -105,11 +105,6 @@
opacity: 1;
transform: translateY(-($block-toolbar-height + $grid-unit-15));
}

// Hide the Parent button in Top Toolbar mode.
.edit-post-header-toolbar__block-toolbar & {
display: none;
}
}

.block-editor-block-toolbar-animated-width-container {
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/button/style.scss
View file
Open in desktop
Expand Up @@ -307,6 +307,7 @@
}

&:hover:not(:disabled) {
color: $white;
background: $gray-900;
}
}
Expand Down
193 changes: 102 additions & 91 deletions packages/edit-post/src/components/header/header-toolbar/index.js
View file
Open in desktop
Expand Up @@ -29,6 +29,7 @@ function HeaderToolbar() {
const inserterButton = useRef();
const { setIsInserterOpened } = useDispatch( 'core/edit-post' );
const {
hasReducedUI,
hasFixedToolbar,
isInserterEnabled,
isInserterOpened,
Expand Down Expand Up @@ -64,11 +65,15 @@ function HeaderToolbar() {
'showIconLabels'
),
isNavigationTool: select( 'core/block-editor' ).isNavigationMode(),
hasReducedUI: select( 'core/edit-post' ).isFeatureActive(
'reducedUI'
),
};
}, [] );
const isLargeViewport = useViewportMatch( 'medium' );
const isWideViewport = useViewportMatch( 'wide' );
const isSmallViewport = useViewportMatch( 'small', '<' );
const { setNavigationMode } = useDispatch( 'core/block-editor' );

const displayBlockToolbar =
! isLargeViewport || previewDeviceType !== 'Desktop' || hasFixedToolbar;
Expand All @@ -79,8 +84,6 @@ function HeaderToolbar() {
: /* translators: accessibility text for the editor toolbar when Top Toolbar is off */
__( 'Document tools' );

const { setNavigationMode } = useDispatch( 'core/block-editor' );

const onSwitchMode = ( mode ) => {
setNavigationMode( mode === 'edit' ? false : true );
};
Expand Down Expand Up @@ -108,102 +111,110 @@ function HeaderToolbar() {
className="edit-post-header-toolbar"
aria-label={ toolbarAriaLabel }
>
<ToolbarItem
ref={ inserterButton }
as={ Button }
className="edit-post-header-toolbar__inserter-toggle"
isPrimary
isPressed={ isInserterOpened }
onMouseDown={ ( event ) => {
event.preventDefault();
} }
onClick={ () => {
if ( isInserterOpened ) {
// Focusing the inserter button closes the inserter popover
inserterButton.current.focus();
} else {
setIsInserterOpened( true );
}
} }
disabled={ ! isInserterEnabled }
icon={ plus }
/* translators: button label text should, if possible, be under 16
<div className="edit-post-header-toolbar__left">
<ToolbarItem
ref={ inserterButton }
as={ Button }
className="edit-post-header-toolbar__inserter-toggle"
isPrimary
isPressed={ isInserterOpened }
onMouseDown={ ( event ) => {
event.preventDefault();
} }
onClick={ () => {
if ( isInserterOpened ) {
// Focusing the inserter button closes the inserter popover
inserterButton.current.focus();
} else {
setIsInserterOpened( true );
}
} }
disabled={ ! isInserterEnabled }
icon={ plus }
/* translators: button label text should, if possible, be under 16
characters. */
label={ _x(
'Add block',
'Generic label for block inserter button'
) }
showTooltip={ ! showIconLabels }
>
{ showIconLabels && __( 'Add' ) }
</ToolbarItem>
{ ( isWideViewport || ! showIconLabels ) && (
<>
{ isLargeViewport && (
label={ _x(
'Add block',
'Generic label for block inserter button'
) }
showTooltip={ ! showIconLabels }
>
{ showIconLabels && __( 'Add' ) }
</ToolbarItem>
{ ! hasReducedUI && ( isWideViewport || ! showIconLabels ) && (
<>
{ isLargeViewport && (
<ToolbarItem
as={ ToolSelector }
showTooltip={ ! showIconLabels }
isTertiary={ showIconLabels }
disabled={ isTextModeEnabled }
/>
) }
<ToolbarItem
as={ ToolSelector }
as={ EditorHistoryUndo }
showTooltip={ ! showIconLabels }
isTertiary={ showIconLabels }
disabled={ isTextModeEnabled }
/>
) }
<ToolbarItem
as={ EditorHistoryUndo }
showTooltip={ ! showIconLabels }
isTertiary={ showIconLabels }
/>
<ToolbarItem
as={ EditorHistoryRedo }
showTooltip={ ! showIconLabels }
isTertiary={ showIconLabels }
/>
{ overflowItems }
</>
) }
{ ! isWideViewport && ! isSmallViewport && showIconLabels && (
<DropdownMenu
position="bottom right"
label={
/* translators: button label text should, if possible, be under 16
<ToolbarItem
as={ EditorHistoryRedo }
showTooltip={ ! showIconLabels }
isTertiary={ showIconLabels }
/>
{ overflowItems }
</>
) }
{ ! hasReducedUI &&
! isWideViewport &&
! isSmallViewport &&
showIconLabels && (
<DropdownMenu
position="bottom right"
label={
/* translators: button label text should, if possible, be under 16
characters. */
__( 'Tools' )
}
>
{ () => (
<div className="edit-post-header__dropdown">
<MenuGroup label={ __( 'Modes' ) }>
<MenuItemsChoice
value={
isNavigationTool ? 'select' : 'edit'
}
onSelect={ onSwitchMode }
choices={ [
{
value: 'edit',
label: __( 'Edit' ),
},
{
value: 'select',
label: __( 'Select' ),
},
] }
/>
</MenuGroup>
<MenuGroup label={ __( 'Edit' ) }>
<EditorHistoryUndo
showTooltip={ ! showIconLabels }
isTertiary={ showIconLabels }
/>
<EditorHistoryRedo
showTooltip={ ! showIconLabels }
isTertiary={ showIconLabels }
/>
</MenuGroup>
<MenuGroup>{ overflowItems }</MenuGroup>
</div>
__( 'Tools' )
}
>
{ () => (
<div className="edit-post-header__dropdown">
<MenuGroup label={ __( 'Modes' ) }>
<MenuItemsChoice
value={
isNavigationTool
? 'select'
: 'edit'
}
onSelect={ onSwitchMode }
choices={ [
{
value: 'edit',
label: __( 'Edit' ),
},
{
value: 'select',
label: __( 'Select' ),
},
] }
/>
</MenuGroup>
<MenuGroup label={ __( 'Edit' ) }>
<EditorHistoryUndo
showTooltip={ ! showIconLabels }
isTertiary={ showIconLabels }
/>
<EditorHistoryRedo
showTooltip={ ! showIconLabels }
isTertiary={ showIconLabels }
/>
</MenuGroup>
<MenuGroup>{ overflowItems }</MenuGroup>
</div>
) }
</DropdownMenu>
) }
</DropdownMenu>
) }
</div>

{ displayBlockToolbar && (
<div className="edit-post-header-toolbar__block-toolbar">
<BlockToolbar hideDragHandle />
Expand Down