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.

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

Code Editor: unselect blocks and disable inserter #9815

Merged
merged 3 commits into from Sep 12, 2018
Jump to file or symbol
Failed to load files and symbols.
+41 −4
Diff settings

Always

Just for now

@@ -25,15 +25,15 @@ import {
import './style.scss';
import FullscreenModeClose from '../fullscreen-mode-close';
function HeaderToolbar( { hasFixedToolbar, isLargeViewport } ) {
function HeaderToolbar( { hasFixedToolbar, isLargeViewport, mode } ) {
return (
<NavigableToolbar
className="edit-post-header-toolbar"
aria-label={ __( 'Editor Toolbar' ) }
>
<FullscreenModeClose />
<div>
<Inserter position="bottom right" />
<Inserter disabled={ mode !== 'visual' } position="bottom right" />

This comment has been minimized.

@tofumatt

tofumatt Sep 12, 2018

Member

These sorts of magic constants always irk me, even when they're strings. This is pretty obvious in its intent, but it's still possible to make typos, etc. 🤷‍♂️

Not really isolated to this PR though.

<DotTip id="core/editor.inserter">
{ __( 'Welcome to the wonderful world of blocks! Click the “+” (“Add block”) button to add a new block. There are blocks available for all kind of content: you can insert text, headings, images, lists, and lots more!' ) }
</DotTip>
@@ -53,6 +53,7 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport } ) {
export default compose( [
withSelect( ( select ) => ( {
hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ),
mode: select( 'core/edit-post' ).getEditorMode(),
} ) ),
withViewportMatch( { isLargeViewport: 'medium' } ),
] )( HeaderToolbar );
Copy path View file
@@ -6,7 +6,7 @@ import { reduce, some } from 'lodash';
/**
* WordPress dependencies
*/
import { select, subscribe } from '@wordpress/data';
import { select, subscribe, dispatch } from '@wordpress/data';
import { speak } from '@wordpress/a11y';
import { __ } from '@wordpress/i18n';
import apiFetch from '@wordpress/api-fetch';
@@ -120,6 +120,11 @@ const effects = {
.then( () => store.dispatch( metaBoxUpdatesSuccess() ) );
},
SWITCH_MODE( action ) {
// Unselect blocks when we switch to the code editor.
if ( action.mode !== 'visual' ) {
dispatch( 'core/editor' ).clearSelectedBlock();
}
const message = action.mode === 'visual' ? __( 'Visual editor selected' ) : __( 'Code editor selected' );
speak( message, 'assertive' );
},
@@ -39,6 +39,7 @@ class Inserter extends Component {
children,
onInsertBlock,
rootClientId,
disabled,
} = this.props;
if ( items.length === 0 ) {
@@ -61,6 +62,7 @@ class Inserter extends Component {
className="editor-inserter__toggle"
aria-haspopup="true"
aria-expanded={ isOpen }
disabled={ disabled }
>
{ children }
</IconButton>
@@ -1,7 +1,7 @@
/**
* Internal dependencies
*/
import { clickBlockAppender, newPost } from '../support/utils';
import { clickBlockAppender, newPost, switchToEditor } from '../support/utils';
describe( 'Editing modes (visual/HTML)', () => {
beforeEach( async () => {
@@ -80,4 +80,33 @@ describe( 'Editing modes (visual/HTML)', () => {
htmlBlockContent = await page.$eval( '.editor-block-list__layout .editor-block-list__block .editor-block-list__block-html-textarea', ( node ) => node.textContent );
expect( htmlBlockContent ).toEqual( '<p class="has-large-font-size">Hello world!</p>' );
} );
it( 'the code editor should unselect blocks and disable the inserter', async () => {
// The paragraph block should be selected
const title = await page.$eval(
'.editor-block-inspector__card-title',
( element ) => element.innerText
);
expect( title ).toBe( 'Paragraph' );
// The Block inspector should be active
let blockInspectorTab = await page.$( '.edit-post-sidebar__panel-tab.is-active[aria-label="Block settings"]' );
expect( blockInspectorTab ).not.toBeNull();
// Switch to Code Editor
await switchToEditor( 'Code' );
// The Block inspector should not be active anymore
blockInspectorTab = await page.$( '.edit-post-sidebar__panel-tab.is-active[aria-label="Block settings"]' );
expect( blockInspectorTab ).toBeNull();
// No block is selected
await page.click( '.edit-post-sidebar__panel-tab[aria-label="Block settings"]' );
const noBlocksElement = await page.$( '.editor-block-inspector__no-blocks' );
expect( noBlocksElement ).not.toBeNull();
// The inserter is disabled
const disabledInserter = await page.$( '.editor-inserter > button:disabled' );
expect( disabledInserter ).not.toBeNull();
} );
} );
ProTip! Use n and p to navigate between commits in a pull request.