Media: Implement feature-flagged advanced media editing

client/components/tinymce/index.jsx

@@ -153,6 +153,10 @@ module.exports = React.createClass( {
 		onTogglePin: React.PropTypes.func
 	},
 
+	contextTypes: {
+		store: React.PropTypes.object
+	},
+
 	getDefaultProps: function() {
 		return {
 			mode: 'tinymce',
@@ -256,6 +260,7 @@ module.exports = React.createClass( {
 			entity_encoding: 'raw',
 			keep_styles: false,
 			wpeditimage_html5_captions: true,
+			redux_store: this.context.store,
 
 			// Limit the preview styles in the menu/toolbar
 			preview_styles: 'font-family font-size font-weight font-style text-decoration text-transform',

client/components/tinymce/plugins/media/advanced/index.jsx

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import ReactDomServer from 'react-dom/server';
+
+/**
+ * Internal dependencies
+ */
+import i18n from 'lib/mixins/i18n';
+import config from 'config';
+import { toggleEditorMediaAdvanced } from 'state/ui/editor/media/actions';
+import Gridicon from 'components/gridicon';
+
+export default function( editor ) {
+	const store = editor.getParam( 'redux_store' );
+	if ( ! config.isEnabled( 'post-editor/media-advanced' ) || ! store ) {
+		return;
+	}
+
+	editor.addButton( 'wp_img_advanced', {
+		tooltip: i18n.translate( 'Edit', { context: 'verb' } ),
+
+		classes: 'toolbar-segment-start',
+
+		onPostRender() {
+			this.innerHtml( ReactDomServer.renderToStaticMarkup(
+				<button type="button" role="presentation" tabIndex="-1">
+					<Gridicon icon="pencil" size={ 18 } />
+				</button>
+			) );
+		},
+
+		onClick() {
+			store.dispatch( toggleEditorMediaAdvanced() );
+		}
+	} );
+}

client/components/tinymce/plugins/media/plugin.jsx

@@ -32,6 +32,7 @@ var sites = require( 'lib/sites-list' )(),
 	notices = require( 'notices' ),
 	TinyMCEDropZone = require( './drop-zone' ),
 	restrictSize = require( './restrict-size' ),
+	advanced = require( './advanced' ),
 	Gridicon = require( 'components/gridicon' ),
 	config = require( 'config' );
 
@@ -647,6 +648,7 @@ function mediaButton( editor ) {
 	} );
 
 	restrictSize( editor );
+	advanced( editor );
 }
 
 module.exports = function() {

client/components/tinymce/plugins/wpeditimage/plugin.js

@@ -71,6 +71,7 @@ function wpEditImage( editor ) {
 			'wpcom_img_size_decrease',
 			'wpcom_img_size_increase',
 			'wp_img_caption', // See plugins/media
+			'wp_img_advanced', // See plugins/media/advanced
 			'wp_img_remove'
 		] );
 	} );

client/components/tinymce/style.scss

@@ -65,6 +65,10 @@
 		color: darken( $gray, 20% );
 	}
 
+	.mce-toolbar .mce-btn .gridicon {
+		fill: darken( $gray, 20% );
+	}
+
 	.mce-colorbutton .mce-preview {
 		background-color: $gray-dark;
 	}
@@ -94,6 +98,11 @@
 	.mce-toolbar .mce-btn-group .mce-btn:focus .mce-ico {
 		color: $gray-dark;
 	}
+
+	.mce-toolbar .mce-btn-group .mce-btn:hover .gridicon,
+	.mce-toolbar .mce-btn-group .mce-btn:focus .gridicon {
+		fill: $gray-dark;
+	}
 }
 
 .mce-toolbar .mce-btn-group .mce-btn.mce-toolbar-segment-start:not( :first-child )::before,

client/post-editor/editor-media-advanced/index.jsx

@@ -0,0 +1,43 @@
+/**
+ * External depencencies
+ */
+import React, { PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+/**
+ * Internal dependencies
+ */
+import { toggleEditorMediaAdvanced } from 'state/ui/editor/media/actions';
+import Dialog from 'components/dialog';
+
+function EditorMediaAdvanced( { visible, toggleVisible } ) {
+	return (
+		<Dialog isVisible={ visible } onClose={ toggleVisible }>
+			WIP
+		</Dialog>
+	);
+}
+
+EditorMediaAdvanced.propTypes = {
+	visible: PropTypes.bool,
+	toggleVisible: PropTypes.func
+};
+
+EditorMediaAdvanced.defaultProps = {
+	visible: false,
+	toggleVisible: () => {}
+};
+
+export default connect(
+	( state ) => {
+		return {
+			visible: state.ui.editor.media.advanced
+		};
+	},
+	( dispatch ) => {
+		return bindActionCreators( {
+			toggleVisible: toggleEditorMediaAdvanced
+		}, dispatch );
+	}
+)( EditorMediaAdvanced );

client/post-editor/post-editor.jsx

@@ -21,6 +21,7 @@ var actions = require( 'lib/posts/actions' ),
 	EditorDrawer = require( 'post-editor/editor-drawer' ),
 	FeaturedImage = require( 'post-editor/editor-featured-image' ),
 	EditorGroundControl = require( 'post-editor/editor-ground-control' ),
+	EditorMediaAdvanced = require( 'post-editor/editor-media-advanced' ),
 	EditorTitleContainer = require( 'post-editor/editor-title/container' ),
 	EditorPageSlug = require( 'post-editor/editor-page-slug' ),
 	Button = require( 'components/button' ),
@@ -286,6 +287,9 @@ var PostEditor = React.createClass( {
 
 		return (
 			<div className="post-editor">
+				{ config.isEnabled( 'post-editor/media-advanced' ) && (
+					<EditorMediaAdvanced />
+				) }
 				<div className="post-editor__inner">
 					<div className="post-editor__content">
 						<EditorMobileNavigation site={ site } onClose={ this.onClose } />

client/post-editor/test/post-editor.jsx

@@ -42,6 +42,7 @@ mockery.registerMock( 'components/tinymce', MOCK_COMPONENT );
 mockery.registerMock( 'components/popover', MOCK_COMPONENT );
 mockery.registerMock( 'components/forms/clipboard-button', MOCK_COMPONENT );
 mockery.registerMock( 'post-editor/editor-mobile-navigation', MOCK_COMPONENT );
+mockery.registerMock( 'post-editor/editor-media-advanced', MOCK_COMPONENT );
 mockery.registerMock( 'post-editor/editor-ground-control', MOCK_COMPONENT );
 mockery.registerMock( 'post-editor/editor-drawer', MOCK_COMPONENT );
 mockery.registerMock( 'post-editor/editor-author', MOCK_COMPONENT );

client/state/action-types.js

@@ -7,6 +7,7 @@
 
 export const COMPLETE_EXPORT = 'COMPLETE_EXPORT';
 export const CURRENT_USER_ID_SET = 'CURRENT_USER_ID_SET';
+export const EDITOR_MEDIA_ADVANCED_TOGGLE = 'EDITOR_MEDIA_ADVANCED_TOGGLE';
 export const FAIL_EXPORT = 'FAIL_EXPORT';
 export const FETCH_SITE_PLANS = 'FETCH_SITE_PLANS';
 export const FETCH_SITE_PLANS_COMPLETED = 'FETCH_SITE_PLANS_COMPLETED';

client/state/ui/editor/media/actions.js

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import { EDITOR_MEDIA_ADVANCED_TOGGLE } from 'state/action-types';
+
+export function toggleEditorMediaAdvanced() {
+	return {
+		type: EDITOR_MEDIA_ADVANCED_TOGGLE
+	};
+}

client/state/ui/editor/media/reducer.js

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { combineReducers } from 'redux';
+
+/**
+ * Internal dependencies
+ */
+import { EDITOR_MEDIA_ADVANCED_TOGGLE } from 'state/action-types';
+
+function advanced( state = false, action ) {
+	switch ( action.type ) {
+		case EDITOR_MEDIA_ADVANCED_TOGGLE:
+			state = ! state;
+			break;
+	}
+
+	return state;
+}
+
+export default combineReducers( {
+	advanced
+} );

client/state/ui/editor/reducer.js

@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { combineReducers } from 'redux';
+
+/**
+ * Internal dependencies
+ */
+import media from './media/reducer';
+
+export default combineReducers( {
+	media
+} );

client/state/ui/reducer.js

@@ -11,6 +11,7 @@ import {
 	SET_SECTION,
 	CURRENT_USER_ID_SET
 } from 'state/action-types';
+import editor from './editor/reducer';
 
 /**
  * Tracks the currently selected site ID.
@@ -72,5 +73,6 @@ export default combineReducers( {
 	isLoading,
 	hasSidebar,
 	selectedSiteId,
-	currentUserId
+	currentUserId,
+	editor
 } );

config/development.json

@@ -46,6 +46,7 @@
 		"post-editor-github-link": false,
 		"post-editor/post-type-switch": false,
 		"post-editor/contact-form": true,
+		"post-editor/media-advanced": true,
 
 		"manage/media": true,
 		"manage/posts": true,