Update document.title when post title changes

editor/document-title/index.js

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+import { Component } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { getDocumentTitle } from '../selectors';
+
+class DocumentTitle extends Component {
+
+ constructor( props ) {
+ super( props );
+ this.originalDocumentTitle = document.title;
+ }
+
+ setDocumentTitle( title ) {
+ document.title = title + ' | ' + this.originalDocumentTitle;
+ }
+
+ componentDidMount() {
+ this.setDocumentTitle( this.props.title );
+ }
+
+ componentWillReceiveProps( nextProps ) {
+ if ( nextProps.title !== this.props.title ) {
+ this.setDocumentTitle( nextProps.title );
+ }
+ }
+
+ render() {
+ return null;
+ }
+
+ componentWillUnmount() {
+ document.title = this.originalDocumentTitle;
+ }
+}
+
+export default connect(
+ ( state ) => ( {
+ title: getDocumentTitle( state ),
+ } )
+)( DocumentTitle );

editor/layout/index.js

@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import classnames from 'classnames';
 
 /**
- * WordPress Dependencie
+ * WordPress dependencies
  */
 import { NoticeList } from 'components';
 
@@ -18,6 +18,7 @@ import Sidebar from '../sidebar';
 import TextEditor from '../modes/text-editor';
 import VisualEditor from '../modes/visual-editor';
 import UnsavedChangesWarning from '../unsaved-changes-warning';
+import DocumentTitle from '../document-title';
 import { removeNotice } from '../actions';
 import {
  getEditorMode,
@@ -32,6 +33,7 @@ function Layout( { mode, isSidebarOpened, notices, ...props } ) {
 
  return (
  <div className={ className }>
+ <DocumentTitle />
  <NoticeList onRemove={ props.removeNotice } notices={ notices } />
  <UnsavedChangesWarning />
  <Header />

editor/selectors.js

@@ -15,6 +15,11 @@ import { getBlockType } from 'blocks';
  */
 import { addQueryArgs } from './utils/url';
 
+/**
+ * WordPress dependencies
+ */
+import { __ } from 'i18n';
+
 /**
  * Returns the current editing mode.
  *
@@ -88,6 +93,17 @@ export function isEditedPostDirty( state ) {
  return state.editor.dirty;
 }
 
+/**
+ * Returns true if there are no unsaved values for the current edit session and if
+ * the currently edited post is new (and has never been saved before).
+ *
+ * @param {Object} state Global application state
+ * @return {Boolean} Whether new post and unsaved values exist
+ */
+export function isCleanNewPost( state ) {
+ return ! isEditedPostDirty( state ) && isEditedPostNew( state );
+}
+
 /**
  * Returns the post currently being edited in its last known saved state, not
  * including unsaved edits. Returns an object containing relevant default post
@@ -226,9 +242,26 @@ export function isEditedPostBeingScheduled( state ) {
  * @return {String} Raw post title
  */
 export function getEditedPostTitle( state ) {
- return state.editor.edits.title === undefined
- ? get( state.currentPost, 'title.raw' )
- : state.editor.edits.title;
+ const editedTitle = get( state.editor, 'edits.title' );
+ if ( editedTitle !== undefined ) {
+ return editedTitle;
+ }
+ return get( state.currentPost, 'title.raw' );
+}
+
+/**
+ * Gets the document title to be used.
+ *
+ * @param {Object} state Global application state
+ * @return {string} Document title
+ */
+export function getDocumentTitle( state ) {
+ let title = getEditedPostTitle( state );
+
+ if ( ! title || '' === title.trim() ) {
+ title = isCleanNewPost( state ) ? __( 'New post' ) : __( '(Untitled)' );
+ }
+ return title;
 }
 
 /**

editor/state.js

@@ -4,7 +4,7 @@
 import optimist from 'redux-optimist';
 import { combineReducers, applyMiddleware, createStore } from 'redux';
 import refx from 'refx';
-import { reduce, keyBy, first, last, omit, without, flowRight } from 'lodash';
+import { reduce, keyBy, first, last, omit, without, flowRight, forOwn } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -18,6 +18,7 @@ import { combineUndoableReducers } from './utils/undoable-reducer';
 import effects from './effects';
 
 const isMobile = window.innerWidth < 782;
+const renderedPostProps = new Set( [ 'guid', 'title', 'excerpt', 'content' ] );
 
 /**
  * Undoable reducer returning the editor post state, including blocks parsed
@@ -263,7 +264,15 @@ export function currentPost( state = {}, action ) {
  return action.post;
 
  case 'UPDATE_POST':
- return { ...state, ...action.edits };
+ const post = { ...state };
+ forOwn( action.edits, ( value, key ) => {
+ if ( renderedPostProps.has( key ) ) {
+ post[ key ] = { raw: value };
+ } else {
+ post[ key ] = value;
+ }
+ } );
+ return post;
  }
 
  return state;

editor/test/selectors.js

@@ -13,11 +13,13 @@ import {
  hasEditorRedo,
  isEditedPostNew,
  isEditedPostDirty,
+ isCleanNewPost,
  getCurrentPost,
  getCurrentPostId,
  getCurrentPostType,
  getPostEdits,
  getEditedPostTitle,
+ getDocumentTitle,
  getEditedPostExcerpt,
  getEditedPostVisibility,
  isEditedPostPublished,
@@ -53,6 +55,11 @@ import {
  getNotices,
 } from '../selectors';
 
+/**
+ * WordPress dependencies
+ */
+import { __ } from 'i18n';
+
 describe( 'selectors', () => {
  describe( 'getEditorMode', () => {
  it( 'should return the selected editor mode', () => {
@@ -174,12 +181,48 @@ describe( 'selectors', () => {
  editor: {
  dirty: false,
  },
+ currentPost: {},
  };
 
  expect( isEditedPostDirty( state ) ).toBe( false );
  } );
  } );
 
+ describe( 'isCleanNewPost', () => {
+ it( 'should return true when the post is not dirty and has not been saved before', () => {
+ const state = {
+ editor: {
+ dirty: false,
+ },
+ currentPost: {},
+ };
+
+ expect( isCleanNewPost( state ) ).toBe( true );
+ } );
+
+ it( 'should return false when the post is not dirty but the post has been saved', () => {
+ const state = {
+ editor: {
+ dirty: false,
+ },
+ currentPost: { id: 1 },
+ };
+
+ expect( isCleanNewPost( state ) ).toBe( false );
+ } );
+
+ it( 'should return false when the post is dirty but the post has not been saved', () => {
+ const state = {
+ editor: {
+ dirty: true,
+ currentPost: {},
+ },
+ };
+
+ expect( isCleanNewPost( state ) ).toBe( false );
+ } );
+ } );
+
  describe( 'getCurrentPost', () => {
  it( 'should return the current post', () => {
  const state = {
@@ -260,6 +303,77 @@ describe( 'selectors', () => {
  } );
  } );
 
+ describe( 'getDocumentTitle', () => {
+ it( 'should return current title unedited existing post', () => {
+ const state = {
+ currentPost: {
+ id: 123,
+ title: { raw: 'The Title' },
+ },
+ editor: {
+ dirty: false,
+ },
+ };
+
+ expect( getDocumentTitle( state ) ).toBe( 'The Title' );
+ } );
+
+ it( 'should return current title for edited existing post', () => {
+ const state = {
+ currentPost: {
+ id: 123,
+ title: { raw: 'The Title' },
+ },
+ editor: {
+ dirty: true,
+ edits: { title: 'Modified Title' },
+ },
+ };
+
+ expect( getDocumentTitle( state ) ).toBe( 'Modified Title' );
+ } );
+
+ it( 'should return new post title when new post is clean', () => {
+ const state = {
+ currentPost: {
+ title: { raw: '' },
+ },
+ editor: {
+ dirty: false,
+ },
+ };
+
+ expect( getDocumentTitle( state ) ).toBe( __( 'New post' ) );
+ } );
+
+ it( 'should return untitled title when new post is dirty', () => {
+ const state = {
+ currentPost: {
+ title: { raw: '' },
+ },
+ editor: {
+ dirty: true,
+ },
+ };
+
+ expect( getDocumentTitle( state ) ).toBe( __( '(Untitled)' ) );
+ } );
+
+ it( 'should return untitled title', () => {
+ const state = {
+ currentPost: {
+ id: 123,
+ title: { raw: '' },
+ },
+ editor: {
+ dirty: true,
+ },
+ };
+
+ expect( getDocumentTitle( state ) ).toBe( __( '(Untitled)' ) );
+ } );
+ } );
+
  describe( 'getEditedPostExcerpt', () => {
  it( 'should return the post saved excerpt if the excerpt is not edited', () => {
  const state = {

editor/test/state.js

@@ -603,22 +603,22 @@ describe( 'state', () => {
 
  describe( 'currentPost()', () => {
  it( 'should reset a post object', () => {
- const original = deepFreeze( { title: 'unmodified' } );
+ const original = deepFreeze( { title: { raw: 'unmodified' } } );
 
  const state = currentPost( original, {
  type: 'RESET_POST',
  post: {
- title: 'new post',
+ title: { raw: 'new post' },
  },
  } );
 
  expect( state ).toEqual( {
- title: 'new post',
+ title: { raw: 'new post' },
  } );
  } );
 
  it( 'should update the post object with UPDATE_POST', () => {
- const original = deepFreeze( { title: 'unmodified', status: 'publish' } );
+ const original = deepFreeze( { title: { raw: 'unmodified' }, status: 'publish' } );
 
  const state = currentPost( original, {
  type: 'UPDATE_POST',
@@ -628,7 +628,7 @@ describe( 'state', () => {
  } );
 
  expect( state ).toEqual( {
- title: 'updated post object from server',
+ title: { raw: 'updated post object from server' },
  status: 'publish',
  } );
  } );

lib/register.php

@@ -44,7 +44,7 @@ function gutenberg_menu() {
 
  add_submenu_page(
  'gutenberg',
- __( 'New Post', 'gutenberg' ),
+ __( 'Gutenberg', 'gutenberg' ),
  __( 'New Post', 'gutenberg' ),
  'edit_posts',
  'gutenberg',