diff --git a/WordPressEditor/build.gradle b/WordPressEditor/build.gradle
index 4ae2db70b456..5b9e57069298 100644
--- a/WordPressEditor/build.gradle
+++ b/WordPressEditor/build.gradle
@@ -25,8 +25,8 @@ android {
     buildToolsVersion "22.0.1"
 
     defaultConfig {
-        versionCode 1
-        versionName "0.1"
+        versionCode 2
+        versionName "0.2"
         minSdkVersion 14
         targetSdkVersion 22
     }
diff --git a/WordPressEditor/src/androidTest/java/org.wordpress.android.editor/EditorFragmentTest.java b/WordPressEditor/src/androidTest/java/org.wordpress.android.editor/EditorFragmentTest.java
index 14d1132aff0d..6ebb9d09fc47 100644
--- a/WordPressEditor/src/androidTest/java/org.wordpress.android.editor/EditorFragmentTest.java
+++ b/WordPressEditor/src/androidTest/java/org.wordpress.android.editor/EditorFragmentTest.java
@@ -7,6 +7,7 @@
 
 import java.util.HashMap;
 import java.util.Map;
+import java.util.concurrent.CountDownLatch;
 
 import static org.wordpress.android.editor.TestingUtils.waitFor;
 
@@ -29,13 +30,7 @@ public void testDomLoadedCallbackReceived() {
         // initJsEditor() should have been called on setup
         assertTrue(mFragment.mInitCalled);
 
-        long start = System.currentTimeMillis();
-        while(!mFragment.mDomLoaded) {
-            waitFor(10);
-            if (System.currentTimeMillis() - start > 5000) {
-                throw(new RuntimeException("Callback wait timed out"));
-            }
-        }
+        waitForOnDomLoaded();
 
         // The JS editor should have sent out a callback when the DOM loaded, triggering onDomLoaded()
         assertTrue(mFragment.mDomLoaded);
@@ -103,4 +98,78 @@ public void testFormatBarToggledOnSelectedFieldChanged() {
         // The HTML button should always be enabled
         assertTrue(htmlButton.isEnabled());
     }
+
+    public void testHtmlModeToggleTextTransfer() throws InterruptedException {
+        waitForOnDomLoaded();
+
+        final View view = mFragment.getView();
+
+        if (view == null) {
+            throw (new IllegalStateException("Fragment view is empty"));
+        }
+
+        final ToggleButton htmlButton = (ToggleButton) view.findViewById(R.id.format_bar_button_html);
+
+        String content = mFragment.getContent().toString();
+
+        final SourceViewEditText titleText = (SourceViewEditText) view.findViewById(R.id.sourceview_title);
+        final SourceViewEditText contentText = (SourceViewEditText) view.findViewById(R.id.sourceview_content);
+
+        // -- Check that title and content text is properly loaded into the EditTexts when switching to HTML mode
+
+        final CountDownLatch uiThreadLatch1 = new CountDownLatch(1);
+
+        mActivity.runOnUiThread(new Runnable() {
+            @Override
+            public void run() {
+                htmlButton.performClick(); // Turn on HTML mode
+
+                uiThreadLatch1.countDown();
+            }
+        });
+
+        uiThreadLatch1.await();
+
+        // The HTML mode fields should be populated with the raw HTML loaded into the WebView on load
+        // (see MockEditorActivity)
+        assertEquals("A title", titleText.getText().toString());
+        assertEquals(content, contentText.getText().toString());
+
+        // -- Check that the title and content text is updated in the WebView when switching back from HTML mode
+
+        final CountDownLatch uiThreadLatch2 = new CountDownLatch(1);
+
+        mActivity.runOnUiThread(new Runnable() {
+            @Override
+            public void run() {
+                titleText.setText("new title");
+                contentText.setText("new <b>content</b>");
+
+                // Check that getTitle() and getContent() return latest version even in HTML mode
+                assertEquals("new title", mFragment.getTitle());
+                assertEquals("new <b>content</b>", mFragment.getContent());
+
+                htmlButton.performClick(); // Turn off HTML mode
+
+                uiThreadLatch2.countDown();
+            }
+        });
+
+        uiThreadLatch2.await();
+
+        waitFor(300); // Wait for JS to update the title/content
+
+        assertEquals("new title", mFragment.getTitle());
+        assertEquals("new <b>content</b>", mFragment.getContent());
+    }
+
+    private void waitForOnDomLoaded() {
+        long start = System.currentTimeMillis();
+        while(!mFragment.mDomLoaded) {
+            waitFor(10);
+            if (System.currentTimeMillis() - start > 5000) {
+                throw(new RuntimeException("Callback wait timed out"));
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/WordPressEditor/src/androidTest/java/org.wordpress.android.editor/MockEditorActivity.java b/WordPressEditor/src/androidTest/java/org.wordpress.android.editor/MockEditorActivity.java
index f2df6c86eca7..ca10bea7fef0 100644
--- a/WordPressEditor/src/androidTest/java/org.wordpress.android.editor/MockEditorActivity.java
+++ b/WordPressEditor/src/androidTest/java/org.wordpress.android.editor/MockEditorActivity.java
@@ -11,6 +11,8 @@
 public class MockEditorActivity extends AppCompatActivity implements EditorFragmentAbstract.EditorFragmentListener {
     public static final int LAYOUT_ID = 999;
 
+    EditorFragment mEditorFragment;
+
     @SuppressWarnings("ResourceType")
     @Override
     protected void onCreate(Bundle savedInstanceState) {
@@ -23,14 +25,15 @@ protected void onCreate(Bundle savedInstanceState) {
         FragmentManager fragmentManager = getFragmentManager();
         FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
 
-        EditorFragment fragment = new EditorFragmentForTests();
-        fragmentTransaction.add(linearLayout.getId(), fragment, "editorFragment");
+        mEditorFragment = new EditorFragmentForTests();
+        fragmentTransaction.add(linearLayout.getId(), mEditorFragment, "editorFragment");
         fragmentTransaction.commit();
     }
 
     @Override
     public void onEditorFragmentInitialized() {
-
+        mEditorFragment.setTitle("A title");
+        mEditorFragment.setContent(Utils.getHtmlFromFile(this, "example-content.html"));
     }
 
     @Override
diff --git a/WordPressEditor/src/main/java/org/wordpress/android/editor/EditorFragment.java b/WordPressEditor/src/main/java/org/wordpress/android/editor/EditorFragment.java
index 1431b4674bc3..ab51ff291f63 100755
--- a/WordPressEditor/src/main/java/org/wordpress/android/editor/EditorFragment.java
+++ b/WordPressEditor/src/main/java/org/wordpress/android/editor/EditorFragment.java
@@ -1,17 +1,21 @@
 package org.wordpress.android.editor;
 
 import android.annotation.SuppressLint;
+import android.content.Context;
 import android.content.res.Configuration;
 import android.os.Build;
 import android.os.Bundle;
 import android.os.Looper;
 import android.support.v7.app.ActionBar;
 import android.support.v7.app.AppCompatActivity;
+import android.text.Editable;
+import android.text.SpannableString;
 import android.text.Spanned;
 import android.view.LayoutInflater;
 import android.view.MotionEvent;
 import android.view.View;
 import android.view.ViewGroup;
+import android.view.inputmethod.InputMethodManager;
 import android.webkit.WebView;
 import android.widget.ToggleButton;
 
@@ -29,20 +33,14 @@
 import java.util.concurrent.TimeUnit;
 
 public class EditorFragment extends EditorFragmentAbstract implements View.OnClickListener, View.OnTouchListener,
-        OnJsEditorStateChangedListener {
+        OnJsEditorStateChangedListener, OnImeBackListener {
     private static final String ARG_PARAM_TITLE = "param_title";
     private static final String ARG_PARAM_CONTENT = "param_content";
 
     private static final String JS_CALLBACK_HANDLER = "nativeCallbackHandler";
 
     private static final String TAG_FORMAT_BAR_BUTTON_MEDIA = "media";
-    private static final String TAG_FORMAT_BAR_BUTTON_BOLD = "bold";
-    private static final String TAG_FORMAT_BAR_BUTTON_ITALIC = "italic";
-    private static final String TAG_FORMAT_BAR_BUTTON_QUOTE = "blockquote";
-    private static final String TAG_FORMAT_BAR_BUTTON_UL = "unorderedList";
-    private static final String TAG_FORMAT_BAR_BUTTON_OL = "orderedList";
     private static final String TAG_FORMAT_BAR_BUTTON_LINK = "link";
-    private static final String TAG_FORMAT_BAR_BUTTON_STRIKETHROUGH = "strikeThrough";
 
     private static final float TOOLBAR_ALPHA_ENABLED = 1;
     private static final float TOOLBAR_ALPHA_DISABLED = 0.5f;
@@ -51,6 +49,12 @@ public class EditorFragment extends EditorFragmentAbstract implements View.OnCli
     private String mContentHtml = "";
 
     private EditorWebViewAbstract mWebView;
+    private View mSourceView;
+    private SourceViewEditText mSourceViewTitle;
+    private SourceViewEditText mSourceViewContent;
+
+    private String mTitlePlaceholder = "";
+    private String mContentPlaceholder = "";
 
     private boolean mHideActionBarOnSoftKeyboardUp;
 
@@ -80,24 +84,30 @@ public void onCreate(Bundle savedInstanceState) {
     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
         View view = inflater.inflate(R.layout.fragment_editor, container, false);
 
-        mWebView = (EditorWebViewAbstract) view.findViewById(R.id.webview);
-
-        mWebView.setOnTouchListener(this);
-
         // Setup hiding the action bar when the soft keyboard is displayed for narrow viewports
         if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE
                 && !getResources().getBoolean(R.bool.is_large_tablet_landscape)) {
             mHideActionBarOnSoftKeyboardUp = true;
         }
 
-        // Intercept back key presses while the keyboard is up, and reveal the action bar
-        mWebView.setOnImeBackListener(new EditorWebViewAbstract.OnImeBackListener() {
+        // -- WebView configuration
+
+        mWebView = (EditorWebViewAbstract) view.findViewById(R.id.webview);
+
+        mWebView.setOnTouchListener(this);
+        mWebView.setOnImeBackListener(this);
+
+        // Ensure that the content field is always filling the remaining screen space
+        mWebView.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
             @Override
-            public void onImeBack() {
-                ActionBar actionBar = getActionBar();
-                if (mHideActionBarOnSoftKeyboardUp && actionBar != null && !actionBar.isShowing()) {
-                    actionBar.show();
-                }
+            public void onLayoutChange(View v, int left, int top, int right, int bottom,
+                                       int oldLeft, int oldTop, int oldRight, int oldBottom) {
+                mWebView.post(new Runnable() {
+                    @Override
+                    public void run() {
+                        mWebView.execJavaScriptFromString("ZSSEditor.refreshVisibleViewportSize();");
+                    }
+                });
             }
         });
 
@@ -105,33 +115,59 @@ public void onImeBack() {
 
         initJsEditor();
 
-        ToggleButton mediaButton = (ToggleButton) view.findViewById(R.id.format_bar_button_media);
-        mTagToggleButtonMap.put(TAG_FORMAT_BAR_BUTTON_MEDIA, mediaButton);
+        // -- HTML mode configuration
+
+        mSourceView = view.findViewById(R.id.sourceview);
+        mSourceViewTitle = (SourceViewEditText) view.findViewById(R.id.sourceview_title);
+        mSourceViewContent = (SourceViewEditText) view.findViewById(R.id.sourceview_content);
+
+        // Toggle format bar on/off as user changes focus between title and content in HTML mode
+        mSourceViewTitle.setOnFocusChangeListener(new View.OnFocusChangeListener() {
+            @Override
+            public void onFocusChange(View v, boolean hasFocus) {
+                updateFormatBarEnabledState(!hasFocus);
+            }
+        });
+
+        mSourceViewTitle.setOnTouchListener(this);
+        mSourceViewContent.setOnTouchListener(this);
+
+        mSourceViewTitle.setOnImeBackListener(this);
+        mSourceViewContent.setOnImeBackListener(this);
+
+        mSourceViewContent.addTextChangedListener(new HtmlStyleTextWatcher());
+
+        mSourceViewTitle.setHint(mTitlePlaceholder);
+
+        // -- Format bar configuration
 
         ToggleButton boldButton = (ToggleButton) view.findViewById(R.id.format_bar_button_bold);
-        mTagToggleButtonMap.put(TAG_FORMAT_BAR_BUTTON_BOLD, boldButton);
+        mTagToggleButtonMap.put(getString(R.string.format_bar_tag_bold), boldButton);
 
         ToggleButton italicButton = (ToggleButton) view.findViewById(R.id.format_bar_button_italic);
-        mTagToggleButtonMap.put(TAG_FORMAT_BAR_BUTTON_ITALIC, italicButton);
+        mTagToggleButtonMap.put(getString(R.string.format_bar_tag_italic), italicButton);
 
         ToggleButton quoteButton = (ToggleButton) view.findViewById(R.id.format_bar_button_quote);
-        mTagToggleButtonMap.put(TAG_FORMAT_BAR_BUTTON_QUOTE, quoteButton);
+        mTagToggleButtonMap.put(getString(R.string.format_bar_tag_blockquote), quoteButton);
 
         ToggleButton ulButton = (ToggleButton) view.findViewById(R.id.format_bar_button_ul);
-        mTagToggleButtonMap.put(TAG_FORMAT_BAR_BUTTON_UL, ulButton);
+        mTagToggleButtonMap.put(getString(R.string.format_bar_tag_unorderedList), ulButton);
 
         ToggleButton olButton = (ToggleButton) view.findViewById(R.id.format_bar_button_ol);
-        mTagToggleButtonMap.put(TAG_FORMAT_BAR_BUTTON_OL, olButton);
-
-        ToggleButton linkButton = (ToggleButton) view.findViewById(R.id.format_bar_button_link);
-        mTagToggleButtonMap.put(TAG_FORMAT_BAR_BUTTON_LINK, linkButton);
+        mTagToggleButtonMap.put(getString(R.string.format_bar_tag_orderedList), olButton);
 
         // Tablet-only
         ToggleButton strikethroughButton = (ToggleButton) view.findViewById(R.id.format_bar_button_strikethrough);
         if (strikethroughButton != null) {
-            mTagToggleButtonMap.put(TAG_FORMAT_BAR_BUTTON_STRIKETHROUGH, strikethroughButton);
+            mTagToggleButtonMap.put(getString(R.string.format_bar_tag_strikethrough), strikethroughButton);
         }
 
+        ToggleButton mediaButton = (ToggleButton) view.findViewById(R.id.format_bar_button_media);
+        mTagToggleButtonMap.put(TAG_FORMAT_BAR_BUTTON_MEDIA, mediaButton);
+
+        ToggleButton linkButton = (ToggleButton) view.findViewById(R.id.format_bar_button_link);
+        mTagToggleButtonMap.put(TAG_FORMAT_BAR_BUTTON_LINK, linkButton);
+
         ToggleButton htmlButton = (ToggleButton) view.findViewById(R.id.format_bar_button_html);
         htmlButton.setOnClickListener(this);
 
@@ -167,8 +203,10 @@ public void onConfigurationChanged(Configuration newConfig) {
         if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE
                 && !getResources().getBoolean(R.bool.is_large_tablet_landscape)) {
             mHideActionBarOnSoftKeyboardUp = true;
+            hideActionBarIfNeeded();
         } else {
             mHideActionBarOnSoftKeyboardUp = false;
+            showActionBarIfNeeded();
         }
     }
 
@@ -189,43 +227,67 @@ protected void initJsEditor() {
     @Override
     public void onClick(View v) {
         int id = v.getId();
-        if (id == R.id.format_bar_button_bold) {
-            mWebView.execJavaScriptFromString("ZSSEditor.setBold();");
-        } else if (id == R.id.format_bar_button_italic) {
-            mWebView.execJavaScriptFromString("ZSSEditor.setItalic();");
-        } else if (id == R.id.format_bar_button_strikethrough) {
-            mWebView.execJavaScriptFromString("ZSSEditor.setStrikeThrough();");
-        } else if (id == R.id.format_bar_button_quote) {
-            mWebView.execJavaScriptFromString("ZSSEditor.setBlockquote();");
-        } else if (id == R.id.format_bar_button_ul) {
-            mWebView.execJavaScriptFromString("ZSSEditor.setUnorderedList();");
-        } else if (id == R.id.format_bar_button_ol) {
-            mWebView.execJavaScriptFromString("ZSSEditor.setOrderedList();");
+        if (id == R.id.format_bar_button_html) {
+            clearFormatBarButtons();
+            updateFormatBarEnabledState(true);
+
+            if (((ToggleButton) v).isChecked()) {
+                mSourceViewTitle.setText(getTitle());
+
+                SpannableString spannableContent = new SpannableString(getContent());
+                HtmlStyleUtils.styleHtmlForDisplay(spannableContent);
+                mSourceViewContent.setText(spannableContent);
+
+                mWebView.setVisibility(View.GONE);
+                mSourceView.setVisibility(View.VISIBLE);
+
+                mSourceViewContent.requestFocus();
+                mSourceViewContent.setSelection(0);
+
+                InputMethodManager imm = ((InputMethodManager) getActivity()
+                        .getSystemService(Context.INPUT_METHOD_SERVICE));
+                imm.showSoftInput(mSourceViewContent, InputMethodManager.SHOW_IMPLICIT);
+            } else {
+                mWebView.setVisibility(View.VISIBLE);
+                mSourceView.setVisibility(View.GONE);
+
+                mTitle = mSourceViewTitle.getText().toString();
+                mContentHtml = mSourceViewContent.getText().toString();
+                updateVisualEditorFields();
+
+                mWebView.execJavaScriptFromString("ZSSEditor.getField('zss_field_content').focus();");
+            }
         } else if (id == R.id.format_bar_button_media) {
             // TODO: Handle inserting media
             ((ToggleButton) v).setChecked(false);
         } else if (id == R.id.format_bar_button_link) {
             // TODO: Handle inserting a link
             ((ToggleButton) v).setChecked(false);
-        } else if (id == R.id.format_bar_button_html) {
-            // TODO: Handle HTML mode toggling
-            ((ToggleButton) v).setChecked(false);
+        } else {
+            if (v instanceof ToggleButton) {
+                onFormattingButtonClicked((ToggleButton) v);
+            }
         }
     }
 
     @Override
     public boolean onTouch(View view, MotionEvent event) {
-        if (mHideActionBarOnSoftKeyboardUp && event.getAction() == MotionEvent.ACTION_UP) {
-            // If the WebView has received a touch event, the keyboard will be displayed and the action bar should hide
-            ActionBar actionBar = getActionBar();
-            if (actionBar != null && actionBar.isShowing()) {
-                actionBar.hide();
-                return false;
-            }
+        if (event.getAction() == MotionEvent.ACTION_UP) {
+            // If the WebView or EditText has received a touch event, the keyboard will be displayed and the action bar
+            // should hide
+            hideActionBarIfNeeded();
         }
         return false;
     }
 
+    /**
+     * Intercept back button press while soft keyboard is visible.
+     */
+    @Override
+    public void onImeBack() {
+        showActionBarIfNeeded();
+    }
+
     @SuppressLint("NewApi")
     private void enableWebDebugging(boolean enable) {
         if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
@@ -254,6 +316,11 @@ public CharSequence getTitle() {
             return "";
         }
 
+        if (mSourceView.getVisibility() == View.VISIBLE) {
+            mTitle = mSourceViewTitle.getText().toString();
+            return StringUtils.notNullStr(mTitle);
+        }
+
         if (Looper.myLooper() == Looper.getMainLooper()) {
             AppLog.d(T.EDITOR, "getTitle() called from UI thread");
         }
@@ -288,6 +355,11 @@ public CharSequence getContent() {
             return "";
         }
 
+        if (mSourceView.getVisibility() == View.VISIBLE) {
+            mContentHtml = mSourceViewContent.getText().toString();
+            return StringUtils.notNullStr(mContentHtml);
+        }
+
         if (Looper.myLooper() == Looper.getMainLooper()) {
             AppLog.d(T.EDITOR, "getContent() called from UI thread");
         }
@@ -327,19 +399,36 @@ public Spanned getSpannedContent() {
         return null;
     }
 
+    @Override
+    public void setTitlePlaceholder(CharSequence placeholderText) {
+        mTitlePlaceholder = placeholderText.toString();
+    }
+
+    @Override
+    public void setContentPlaceholder(CharSequence placeholderText) {
+        mContentPlaceholder = placeholderText.toString();
+    }
+
     public void onDomLoaded() {
         mWebView.post(new Runnable() {
             public void run() {
                 mWebView.execJavaScriptFromString("ZSSEditor.getField('zss_field_content').setMultiline('true');");
 
-                // Load title and content into ZSSEditor
-                mWebView.execJavaScriptFromString("ZSSEditor.getField('zss_field_title').setHTML('" +
-                        Utils.escapeHtml(mTitle) + "');");
-                mWebView.execJavaScriptFromString("ZSSEditor.getField('zss_field_content').setHTML('" +
-                        Utils.escapeHtml(mContentHtml) + "');");
+                // Set title and content placeholder text
+                mWebView.execJavaScriptFromString("ZSSEditor.getField('zss_field_title').setPlaceholderText('" +
+                        mTitlePlaceholder + "');");
+                mWebView.execJavaScriptFromString("ZSSEditor.getField('zss_field_content').setPlaceholderText('" +
+                        mContentPlaceholder + "');");
 
-                if (mHideActionBarOnSoftKeyboardUp && getActionBar() != null) {
-                    getActionBar().hide();
+                // Load title and content into ZSSEditor
+                updateVisualEditorFields();
+                hideActionBarIfNeeded();
+
+                // Reset all format bar buttons (in case they remained active through activity re-creation)
+                ToggleButton htmlButton = (ToggleButton) getActivity().findViewById(R.id.format_bar_button_html);
+                htmlButton.setChecked(false);
+                for (ToggleButton button : mTagToggleButtonMap.values()) {
+                    button.setChecked(false);
                 }
             }
         });
@@ -367,10 +456,10 @@ public void run() {
                 if (!focusedFieldId.isEmpty()) {
                     switch(focusedFieldId) {
                         case "zss_field_title":
-                            updateToolbarEnabledState(false);
+                            updateFormatBarEnabledState(false);
                             break;
                         case "zss_field_content":
-                            updateToolbarEnabledState(true);
+                            updateFormatBarEnabledState(true);
                             break;
                     }
                 }
@@ -395,11 +484,137 @@ public void onGetHtmlResponse(Map<String, String> inputArgs) {
         }
     }
 
-    void updateToolbarEnabledState(boolean enabled) {
+    private void updateVisualEditorFields() {
+        mWebView.execJavaScriptFromString("ZSSEditor.getField('zss_field_title').setPlainText('" +
+                Utils.escapeHtml(mTitle) + "');");
+        mWebView.execJavaScriptFromString("ZSSEditor.getField('zss_field_content').setHTML('" +
+                Utils.escapeHtml(mContentHtml) + "');");
+    }
+
+    /**
+     * Hide the action bar if needed.
+     */
+    private void hideActionBarIfNeeded() {
+
+        ActionBar actionBar = getActionBar();
+        if (getActionBar() != null
+                && !isHardwareKeyboardPresent()
+                && mHideActionBarOnSoftKeyboardUp
+                && actionBar.isShowing()) {
+            getActionBar().hide();
+        }
+    }
+
+    /**
+     * Show the action bar if needed.
+     */
+    private void showActionBarIfNeeded() {
+
+        ActionBar actionBar = getActionBar();
+        if (getActionBar() != null && !actionBar.isShowing()) {
+            getActionBar().show();
+        }
+    }
+
+    /**
+     * Returns true if a hardware keyboard is detected, otherwise false.
+     */
+    private boolean isHardwareKeyboardPresent() {
+        Configuration config = getResources().getConfiguration();
+        boolean returnValue = false;
+        if (config.keyboard != Configuration.KEYBOARD_NOKEYS) {
+            returnValue = true;
+        }
+        return returnValue;
+    }
+
+    void updateFormatBarEnabledState(boolean enabled) {
         float alpha = (enabled ? TOOLBAR_ALPHA_ENABLED : TOOLBAR_ALPHA_DISABLED);
         for(ToggleButton button : mTagToggleButtonMap.values()) {
             button.setEnabled(enabled);
             button.setAlpha(alpha);
         }
     }
+
+    private void clearFormatBarButtons() {
+        for (ToggleButton button : mTagToggleButtonMap.values()) {
+            if (button != null) {
+                button.setChecked(false);
+            }
+        }
+    }
+
+    private void onFormattingButtonClicked(ToggleButton toggleButton) {
+        String tag = toggleButton.getTag().toString();
+
+        if (mWebView.getVisibility() == View.VISIBLE) {
+            mWebView.execJavaScriptFromString("ZSSEditor.set" + StringUtils.capitalize(tag) + "();");
+        } else {
+            applyFormattingHtmlMode(toggleButton, tag);
+        }
+    }
+
+    /**
+     * In HTML mode, applies formatting to selected text, or inserts formatting tag at current cursor position
+     * @param toggleButton format bar button which was clicked
+     * @param tag identifier tag
+     */
+    private void applyFormattingHtmlMode(ToggleButton toggleButton, String tag) {
+        if (mSourceViewContent == null) {
+            return;
+        }
+
+        // Replace style tags with their proper HTML tags
+        String htmlTag;
+        if (tag.equals(getString(R.string.format_bar_tag_bold))) {
+            htmlTag = "b";
+        } else if (tag.equals(getString(R.string.format_bar_tag_italic))) {
+            htmlTag = "i";
+        } else if (tag.equals(getString(R.string.format_bar_tag_strikethrough))) {
+            htmlTag = "del";
+        } else if (tag.equals(getString(R.string.format_bar_tag_unorderedList))) {
+            htmlTag = "ul";
+        } else if (tag.equals(getString(R.string.format_bar_tag_orderedList))) {
+            htmlTag = "ol";
+        } else {
+            htmlTag = tag;
+        }
+
+        int selectionStart = mSourceViewContent.getSelectionStart();
+        int selectionEnd = mSourceViewContent.getSelectionEnd();
+
+        if (selectionStart > selectionEnd) {
+            int temp = selectionEnd;
+            selectionEnd = selectionStart;
+            selectionStart = temp;
+        }
+
+        boolean textIsSelected = selectionEnd > selectionStart;
+
+        String startTag = "<" + htmlTag + ">";
+        String endTag = "</" + htmlTag + ">";
+
+        // Add li tags together with ul and ol tags
+        if (htmlTag.equals("ul") || htmlTag.equals("ol")) {
+            startTag = startTag + "\n\t<li>";
+            endTag = "</li>\n" + endTag;
+        }
+
+        Editable content = mSourceViewContent.getText();
+        if (textIsSelected) {
+            // Surround selected text with opening and closing tags
+            content.insert(selectionStart, startTag);
+            content.insert(selectionEnd + startTag.length(), endTag);
+            toggleButton.setChecked(false);
+            mSourceViewContent.setSelection(selectionEnd + startTag.length() + endTag.length());
+        } else if (toggleButton.isChecked()) {
+            // Insert opening tag
+            content.insert(selectionStart, startTag);
+            mSourceViewContent.setSelection(selectionEnd + startTag.length());
+        } else {
+            // Insert closing tag
+            content.insert(selectionEnd, endTag);
+            mSourceViewContent.setSelection(selectionEnd + endTag.length());
+        }
+    }
 }
diff --git a/WordPressEditor/src/main/java/org/wordpress/android/editor/EditorFragmentAbstract.java b/WordPressEditor/src/main/java/org/wordpress/android/editor/EditorFragmentAbstract.java
index 75dd0e5bdc89..52569c740ea5 100644
--- a/WordPressEditor/src/main/java/org/wordpress/android/editor/EditorFragmentAbstract.java
+++ b/WordPressEditor/src/main/java/org/wordpress/android/editor/EditorFragmentAbstract.java
@@ -18,6 +18,8 @@ public abstract class EditorFragmentAbstract extends Fragment {
     public abstract CharSequence getContent();
     public abstract void appendMediaFile(MediaFile mediaFile, String imageUrl, ImageLoader imageLoader);
     public abstract void appendGallery(MediaGallery mediaGallery);
+    public abstract void setTitlePlaceholder(CharSequence text);
+    public abstract void setContentPlaceholder(CharSequence text);
 
     // TODO: remove this as soon as we can (we'll need to drop the legacy editor or fix html2spanned translation)
     public abstract Spanned getSpannedContent();
diff --git a/WordPressEditor/src/main/java/org/wordpress/android/editor/EditorWebViewAbstract.java b/WordPressEditor/src/main/java/org/wordpress/android/editor/EditorWebViewAbstract.java
index 902e51854fd0..23e30834d742 100644
--- a/WordPressEditor/src/main/java/org/wordpress/android/editor/EditorWebViewAbstract.java
+++ b/WordPressEditor/src/main/java/org/wordpress/android/editor/EditorWebViewAbstract.java
@@ -72,8 +72,4 @@ public boolean onKeyPreIme(int keyCode, KeyEvent event) {
         }
         return super.onKeyPreIme(keyCode, event);
     }
-
-    public interface OnImeBackListener {
-        void onImeBack();
-    }
 }
diff --git a/WordPressEditor/src/main/java/org/wordpress/android/editor/HtmlStyleTextWatcher.java b/WordPressEditor/src/main/java/org/wordpress/android/editor/HtmlStyleTextWatcher.java
new file mode 100644
index 000000000000..7d6205760a4e
--- /dev/null
+++ b/WordPressEditor/src/main/java/org/wordpress/android/editor/HtmlStyleTextWatcher.java
@@ -0,0 +1,239 @@
+package org.wordpress.android.editor;
+
+import android.text.Editable;
+import android.text.Spannable;
+import android.text.TextWatcher;
+
+import org.wordpress.android.util.AppLog;
+import org.wordpress.android.util.AppLog.T;
+
+public class HtmlStyleTextWatcher implements TextWatcher {
+    private enum Operation {
+        INSERT, DELETE, REPLACE, NONE
+    }
+
+    private int mOffset;
+    private CharSequence mModifiedText;
+    private Operation mLastOperation;
+
+    @Override
+    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
+        if (s == null) {
+            return;
+        }
+
+        int lastCharacterLocation = start + count - 1;
+        if (s.length() > lastCharacterLocation && lastCharacterLocation >= 0) {
+            if (after < count) {
+                if (after > 0) {
+                    // Text was deleted and replaced by some other text
+                    mLastOperation = Operation.REPLACE;
+                } else {
+                    // Text was deleted only
+                    mLastOperation = Operation.DELETE;
+                }
+
+                mOffset = start;
+                mModifiedText = s.subSequence(start + after, start + count);
+            }
+        }
+    }
+
+    @Override
+    public void onTextChanged(CharSequence s, int start, int before, int count) {
+        if (s == null) {
+            return;
+        }
+
+        int lastCharacterLocation = start + count - 1;
+        if (s.length() > lastCharacterLocation) {
+            if (count > 0) {
+                if (before > 0) {
+                    // Text was added, replacing some existing text
+                    mLastOperation = Operation.REPLACE;
+                    mModifiedText = s.subSequence(start, start + count);
+                } else {
+                    // Text was added only
+                    mLastOperation = Operation.INSERT;
+                    mOffset = start;
+                    mModifiedText = s.subSequence(start + before, start + count);
+                }
+            }
+        }
+    }
+
+    @Override
+    public void afterTextChanged(Editable s) {
+        if (mModifiedText == null || s == null) {
+            return;
+        }
+
+        SpanRange spanRange;
+
+        // If the modified text included a tag or entity symbol ("<", ">", "&" or ";"), find its match and restyle
+        if (mModifiedText.toString().contains("<")) {
+            spanRange = getRespanRangeForChangedOpeningSymbol(s, "<");
+        } else if (mModifiedText.toString().contains(">")) {
+            spanRange = getRespanRangeForChangedClosingSymbol(s, ">");
+        } else if (mModifiedText.toString().contains("&")) {
+            spanRange = getRespanRangeForChangedOpeningSymbol(s, "&");
+        } else if (mModifiedText.toString().contains(";")) {
+            spanRange = getRespanRangeForChangedClosingSymbol(s, ";");
+        } else {
+            // If the modified text didn't include any tag or entity symbols, restyle if the modified text is inside
+            // a tag or entity
+            spanRange = getRespanRangeForNormalText(s, "<");
+            if (spanRange == null) {
+                spanRange = getRespanRangeForNormalText(s, "&");
+            }
+        }
+
+        if (spanRange != null) {
+            updateSpans(s, spanRange);
+        }
+
+        mModifiedText = null;
+        mLastOperation = Operation.NONE;
+    }
+
+    /**
+     * For changes made which contain at least one opening symbol (e.g. '<' or '&'), whether added or deleted, returns
+     * the range of text which should have its style reapplied.
+     * @param content the content after modification
+     * @param openingSymbol the opening symbol recognized (e.g. '<' or '&')
+     * @return the range of characters to re-apply spans to
+     */
+    protected SpanRange getRespanRangeForChangedOpeningSymbol(Editable content, String openingSymbol) {
+        // For simplicity, re-parse the document if text was replaced
+        if (mLastOperation == Operation.REPLACE) {
+            return new SpanRange(0, content.length());
+        }
+
+        String closingSymbol = getMatchingSymbol(openingSymbol);
+
+        int firstOpeningTagLoc = mOffset + mModifiedText.toString().indexOf(openingSymbol);
+        int closingTagLoc;
+        if (mLastOperation == Operation.INSERT) {
+            // Apply span from the first added opening symbol until the closing symbol in the content matching the
+            // last added opening symbol
+            // e.g. pasting "<b><" before "/b>" - we want the span to be applied to all of "<b></b>"
+            int lastOpeningTagLoc = mOffset + mModifiedText.toString().lastIndexOf(openingSymbol);
+            closingTagLoc = content.toString().indexOf(closingSymbol, lastOpeningTagLoc);
+        } else {
+            // Apply span until the first closing tag that appears after the deleted text
+            closingTagLoc = content.toString().indexOf(closingSymbol, mOffset);
+        }
+
+        if (closingTagLoc > 0) {
+            return new SpanRange(firstOpeningTagLoc, closingTagLoc + 1);
+        }
+        return null;
+    }
+
+    /**
+     * For changes made which contain at least one closing symbol (e.g. '>' or ';') and no opening symbols, whether
+     * added or deleted, returns the range of text which should have its style reapplied.
+     * @param content the content after modification
+     * @param closingSymbol the closing symbol recognized (e.g. '>' or ';')
+     * @return the range of characters to re-apply spans to
+     */
+    protected SpanRange getRespanRangeForChangedClosingSymbol(Editable content, String closingSymbol) {
+        // For simplicity, re-parse the document if text was replaced
+        if (mLastOperation == Operation.REPLACE) {
+            return new SpanRange(0, content.length());
+        }
+
+        String openingSymbol = getMatchingSymbol(closingSymbol);
+
+        int firstClosingTagInModLoc = mOffset + mModifiedText.toString().indexOf(closingSymbol);
+        int firstClosingTagAfterModLoc = content.toString().indexOf(closingSymbol, mOffset + mModifiedText.length());
+
+        int openingTagLoc = content.toString().lastIndexOf(openingSymbol, firstClosingTagInModLoc - 1);
+        if (openingTagLoc >= 0) {
+            if (firstClosingTagAfterModLoc >= 0) {
+                return new SpanRange(openingTagLoc, firstClosingTagAfterModLoc + 1);
+            } else {
+                return new SpanRange(openingTagLoc, content.length());
+            }
+        }
+        return null;
+    }
+
+    /**
+     * For changes made which contain no opening or closing symbols, checks whether the changed text is inside a tag,
+     * and if so returns the range of text which should have its style reapplied.
+     * @param content the content after modification
+     * @param openingSymbol the opening symbol of the tag to check for (e.g. '<' or '&')
+     * @return the range of characters to re-apply spans to
+     */
+    protected SpanRange getRespanRangeForNormalText(Editable content, String openingSymbol) {
+        String closingSymbol = getMatchingSymbol(openingSymbol);
+
+        int openingTagLoc = content.toString().lastIndexOf(openingSymbol, mOffset);
+        if (openingTagLoc >= 0) {
+            int closingTagLoc = content.toString().indexOf(closingSymbol, openingTagLoc);
+            if (closingTagLoc >= mOffset) {
+                return new SpanRange(openingTagLoc, closingTagLoc + 1);
+            }
+        }
+        return null;
+    }
+
+    /**
+     * Clears and re-applies spans to {@code content} within range {@code spanRange} according to rules in
+     * {@link HtmlStyleUtils}.
+     * @param content the content to re-style
+     * @param spanRange the range within {@code content} to be re-styled
+     */
+    protected void updateSpans(Spannable content, SpanRange spanRange) {
+        int spanStart = spanRange.getOpeningTagLoc();
+        int spanEnd = spanRange.getClosingTagLoc();
+
+        if (spanStart > content.length() || spanEnd > content.length()) {
+            AppLog.d(T.EDITOR, "The specified span range was beyond the Spannable's length");
+            return;
+        }
+
+        HtmlStyleUtils.clearSpans(content, spanStart, spanEnd);
+        HtmlStyleUtils.styleHtmlForDisplay(content, spanStart, spanEnd);
+    }
+
+    /**
+     * Returns the closing/opening symbol corresponding to the given opening/closing symbol.
+     */
+    private String getMatchingSymbol(String symbol) {
+        switch(symbol) {
+            case "<":
+                return ">";
+            case ">":
+                return "<";
+            case "&":
+                return ";";
+            case ";":
+                return "&";
+            default:
+                return "";
+        }
+    }
+
+    /**
+     * Stores a pair of integers describing a range of values.
+     */
+    protected static class SpanRange {
+        private final int mOpeningTagLoc;
+        private final int mClosingTagLoc;
+
+        public SpanRange(int openingTagLoc, int closingTagLoc) {
+            mOpeningTagLoc = openingTagLoc;
+            mClosingTagLoc = closingTagLoc;
+        }
+
+        public int getOpeningTagLoc() {
+            return mOpeningTagLoc;
+        }
+
+        public int getClosingTagLoc() {
+            return mClosingTagLoc;
+        }
+    }
+}
\ No newline at end of file
diff --git a/WordPressEditor/src/main/java/org/wordpress/android/editor/HtmlStyleUtils.java b/WordPressEditor/src/main/java/org/wordpress/android/editor/HtmlStyleUtils.java
new file mode 100644
index 000000000000..cf2b8206d404
--- /dev/null
+++ b/WordPressEditor/src/main/java/org/wordpress/android/editor/HtmlStyleUtils.java
@@ -0,0 +1,142 @@
+package org.wordpress.android.editor;
+
+import android.graphics.Color;
+import android.graphics.Typeface;
+import android.support.annotation.NonNull;
+import android.text.Spannable;
+import android.text.style.CharacterStyle;
+import android.text.style.ForegroundColorSpan;
+import android.text.style.RelativeSizeSpan;
+import android.text.style.StyleSpan;
+
+import org.wordpress.android.util.AppLog;
+
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
+
+public class HtmlStyleUtils {
+    public static final int TAG_COLOR = Color.rgb(0, 80, 130);
+    public static final int ATTRIBUTE_COLOR = Color.rgb(158, 158, 158);
+
+    public static final String REGEX_HTML_TAGS = "(<\\/?[a-z][^<>]*>)";
+    public static final String REGEX_HTML_ATTRIBUTES = "(?<==)('|\")(.*?\\1)(?=.*?>)";
+    public static final String REGEX_HTML_COMMENTS = "(<!--.*?-->)";
+    public static final String REGEX_HTML_ENTITIES = "(&#34;|&#38;|&#39;|&#60;|&#62;|&#160;|&#161;|&#162;|&#163;" +
+            "|&#164;|&#165;|&#166;|&#167;|&#168;|&#169;|&#170;|&#171;|&#172;|&#173;|&#174;|&#175;|&#176;|&#177;" +
+            "|&#178;|&#179;|&#180;|&#181;|&#182;|&#183;|&#184;|&#185;|&#186;|&#187;|&#188;|&#189;|&#190;|&#191;" +
+            "|&#192;|&#193;|&#194;|&#195;|&#196;|&#197;|&#198;|&#199;|&#200;|&#201;|&#202;|&#203;|&#204;|&#205;" +
+            "|&#206;|&#207;|&#208;|&#209;|&#210;|&#211;|&#212;|&#213;|&#214;|&#215;|&#216;|&#217;|&#218;|&#219;" +
+            "|&#220;|&#221;|&#222;|&#223;|&#224;|&#225;|&#226;|&#227;|&#228;|&#229;|&#230;|&#231;|&#232;|&#233;" +
+            "|&#234;|&#235;|&#236;|&#237;|&#238;|&#239;|&#240;|&#241;|&#242;|&#243;|&#244;|&#245;|&#246;|&#247;" +
+            "|&#248;|&#249;|&#250;|&#251;|&#252;|&#253;|&#254;|&#255;|&#338;|&#339;|&#352;|&#353;|&#376;|&#402;" +
+            "|&#710;|&#732;|&#913;|&#914;|&#915;|&#916;|&#917;|&#918;|&#919;|&#920;|&#921;|&#922;|&#923;|&#924;" +
+            "|&#925;|&#926;|&#927;|&#928;|&#929;|&#931;|&#932;|&#933;|&#934;|&#935;|&#936;|&#937;|&#945;|&#946;" +
+            "|&#947;|&#948;|&#949;|&#950;|&#951;|&#952;|&#953;|&#954;|&#955;|&#956;|&#957;|&#958;|&#959;|&#960;" +
+            "|&#961;|&#962;|&#963;|&#964;|&#965;|&#966;|&#967;|&#968;|&#969;|&#977;|&#978;|&#982;|&#8194;|&#8195;" +
+            "|&#8201;|&#8204;|&#8205;|&#8206;|&#8207;|&#8211;|&#8212;|&#8216;|&#8217;|&#8218;|&#8220;|&#8221;|&#8222;" +
+            "|&#8224;|&#8225;|&#8226;|&#8230;|&#8240;|&#8242;|&#8243;|&#8249;|&#8250;|&#8254;|&#8260;|&#8364;|&#8465;" +
+            "|&#8472;|&#8476;|&#8482;|&#8501;|&#8592;|&#8593;|&#8594;|&#8595;|&#8596;|&#8629;|&#8656;|&#8657;|&#8658;" +
+            "|&#8659;|&#8660;|&#8704;|&#8706;|&#8707;|&#8709;|&#8711;|&#8712;|&#8713;|&#8715;|&#8719;|&#8721;|&#8722;" +
+            "|&#8727;|&#8730;|&#8733;|&#8734;|&#8736;|&#8743;|&#8744;|&#8745;|&#8746;|&#8747;|&#8756;|&#8764;|&#8773;" +
+            "|&#8776;|&#8800;|&#8801;|&#8804;|&#8805;|&#8834;|&#8835;|&#8836;|&#8838;|&#8839;|&#8853;|&#8855;|&#8869;" +
+            "|&#8901;|&#8968;|&#8969;|&#8970;|&#8971;|&#9001;|&#9002;|&#9674;|&#9824;|&#9827;|&#9829;|&#9830;|&quot;" +
+            "|&amp;|&apos;|&lt;|&gt;|&nbsp;|&iexcl;|&cent;|&pound;|&curren;|&yen;|&brvbar;|&sect;|&uml;|&copy;|&ordf;" +
+            "|&laquo;|&not;|&shy;|&reg;|&macr;|&deg;|&plusmn;|&sup2;|&sup3;|&acute;|&micro;|&para;|&middot;|&cedil;" +
+            "|&sup1;|&ordm;|&raquo;|&frac14;|&frac12;|&frac34;|&iquest;|&Agrave;|&Aacute;|&Acirc;|&Atilde;|&Auml;" +
+            "|&Aring;|&AElig;|&Ccedil;|&Egrave;|&Eacute;|&Ecirc;|&Euml;|&Igrave;|&Iacute;|&Icirc;|&Iuml;|&ETH;" +
+            "|&Ntilde;|&Ograve;|&Oacute;|&Ocirc;|&Otilde;|&Ouml;|&times;|&Oslash;|&Ugrave;|&Uacute;|&Ucirc;|&Uuml;" +
+            "|&Yacute;|&THORN;|&szlig;|&agrave;|&aacute;|&acirc;|&atilde;|&auml;|&aring;|&aelig;|&ccedil;|&egrave;" +
+            "|&eacute;|&ecirc;|&euml;|&igrave;|&iacute;|&icirc;|&iuml;|&eth;|&ntilde;|&ograve;|&oacute;|&ocirc;" +
+            "|&otilde;|&ouml;|&divide;|&oslash;|&Ugrave;|&Uacute;|&Ucirc;|&Uuml;|&yacute;|&thorn;|&yuml;|&OElig;" +
+            "|&oelig;|&Scaron;|&scaron;|&Yuml;|&fnof;|&circ;|&tilde;|&Alpha;|&Beta;|&Gamma;|&Delta;|&Epsilon;|&Zeta;" +
+            "|&Eta;|&Theta;|&Iota;|&Kappa;|&Lambda;|&Mu;|&Nu;|&Xi;|&Omicron;|&Pi;|&Rho;|&Sigma;|&Tau;|&Upsilon;|&Phi;" +
+            "|&Chi;|&Psi;|&Omega;|&alpha;|&beta;|&gamma;|&delta;|&epsilon;|&zeta;|&eta;|&theta;|&iota;|&kappa;" +
+            "|&lambda;|&mu;|&nu;|&xi;|&omicron;|&pi;|&rho;|&sigmaf;|&sigma;|&tau;|&upsilon;|&phi;|&chi;|&psi;|&omega;" +
+            "|&thetasym;|&Upsih;|&piv;|&ensp;|&emsp;|&thinsp;|&zwnj;|&zwj;|&lrm;|&rlm;|&ndash;|&mdash;|&lsquo;" +
+            "|&rsquo;|&sbquo;|&ldquo;|&rdquo;|&bdquo;|&dagger;|&Dagger;|&bull;|&hellip;|&permil;|&prime;|&Prime;" +
+            "|&lsaquo;|&rsaquo;|&oline;|&frasl;|&euro;|&image;|&weierp;|&real;|&trade;|&alefsym;|&larr;|&uarr;|&rarr;" +
+            "|&darr;|&harr;|&crarr;|&lArr;|&UArr;|&rArr;|&dArr;|&hArr;|&forall;|&part;|&exist;|&empty;|&nabla;|&isin;" +
+            "|&notin;|&ni;|&prod;|&sum;|&minus;|&lowast;|&radic;|&prop;|&infin;|&ang;|&and;|&or;|&cap;|&cup;|&int;" +
+            "|&there4;|&sim;|&cong;|&asymp;|&ne;|&equiv;|&le;|&ge;|&sub;|&sup;|&nsub;|&sube;|&supe;|&oplus;|&otimes;" +
+            "|&perp;|&sdot;|&lceil;|&rceil;|&lfloor;|&rfloor;|&lang;|&rang;|&loz;|&spades;|&clubs;|&hearts;|&diams;)";
+
+    public static final int SPANNABLE_FLAGS = Spannable.SPAN_EXCLUSIVE_EXCLUSIVE;
+
+    /**
+     * Apply styling rules to {@code content}.
+     */
+    public static void styleHtmlForDisplay(@NonNull Spannable content) {
+        styleHtmlForDisplay(content, 0, content.length());
+    }
+
+    /**
+     * Apply styling rules to {@code content} inside the range from {@code start} to {@code end}.
+     *
+     * @param content the Spannable to apply style rules to
+     * @param start the index in {@code content} to start styling from
+     * @param end the index in {@code content} to style until
+     */
+    public static void styleHtmlForDisplay(@NonNull Spannable content, int start, int end) {
+        applySpansByRegex(content, start, end, REGEX_HTML_TAGS);
+        applySpansByRegex(content, start, end, REGEX_HTML_ATTRIBUTES);
+        applySpansByRegex(content, start, end, REGEX_HTML_COMMENTS);
+        applySpansByRegex(content, start, end, REGEX_HTML_ENTITIES);
+    }
+
+    /**
+     * Applies styles to {@code content} from {@code start} to {@code end}, based on rule {@code regex}.
+     * @param content the Spannable to apply style rules to
+     * @param start the index in {@code content} to start styling from
+     * @param end the index in {@code content} to style until
+     * @param regex the pattern to match for styling
+     */
+    private static void applySpansByRegex(Spannable content, int start, int end, String regex) {
+        if (content == null || start < 0 || end < 0 || start > content.length() || end > content.length()) {
+            AppLog.d(AppLog.T.EDITOR, "applySpansByRegex() received invalid input");
+            return;
+        }
+
+        Pattern pattern = Pattern.compile(regex);
+        Matcher matcher = pattern.matcher(content.subSequence(start, end));
+
+        while (matcher.find()) {
+            int matchStart = matcher.start() + start;
+            int matchEnd = matcher.end() + start;
+            switch(regex) {
+                case REGEX_HTML_TAGS:
+                    content.setSpan(new ForegroundColorSpan(TAG_COLOR), matchStart, matchEnd, SPANNABLE_FLAGS);
+                    break;
+                case REGEX_HTML_ATTRIBUTES:
+                    content.setSpan(new ForegroundColorSpan(ATTRIBUTE_COLOR), matchStart, matchEnd, SPANNABLE_FLAGS);
+                    break;
+                case REGEX_HTML_COMMENTS:
+                    content.setSpan(new ForegroundColorSpan(ATTRIBUTE_COLOR), matchStart, matchEnd, SPANNABLE_FLAGS);
+                    content.setSpan(new StyleSpan(Typeface.ITALIC), matchStart, matchEnd, SPANNABLE_FLAGS);
+                    content.setSpan(new RelativeSizeSpan(0.75f), matchStart, matchEnd, SPANNABLE_FLAGS);
+                    break;
+                case REGEX_HTML_ENTITIES:
+                    content.setSpan(new ForegroundColorSpan(TAG_COLOR), matchStart, matchEnd, SPANNABLE_FLAGS);
+                    content.setSpan(new StyleSpan(Typeface.BOLD), matchStart, matchEnd, SPANNABLE_FLAGS);
+                    content.setSpan(new RelativeSizeSpan(0.75f), matchStart, matchEnd, SPANNABLE_FLAGS);
+                    break;
+            }
+        }
+    }
+
+    /**
+     * Clears all relevant spans in {@code content} from {@code start} to {@code end}. Relevant spans are the subclasses
+     * of {@link CharacterStyle} applied by {@link HtmlStyleUtils#applySpansByRegex(Spannable, int, int, String)}.
+     * @param content the Spannable to clear styles from
+     * @param spanStart the index in {@code content} to start clearing styles from
+     * @param spanEnd the index in {@code content} to clear styles until
+     */
+    public static void clearSpans(Spannable content, int spanStart, int spanEnd) {
+        CharacterStyle[] spans = content.getSpans(spanStart, spanEnd, CharacterStyle.class);
+
+        for (CharacterStyle span : spans) {
+            if (span instanceof ForegroundColorSpan || span instanceof StyleSpan || span instanceof RelativeSizeSpan) {
+                content.removeSpan(span);
+            }
+        }
+    }
+}
diff --git a/WordPressEditor/src/main/java/org/wordpress/android/editor/LegacyEditorFragment.java b/WordPressEditor/src/main/java/org/wordpress/android/editor/LegacyEditorFragment.java
index 9473611caa6d..f97b5488f14b 100644
--- a/WordPressEditor/src/main/java/org/wordpress/android/editor/LegacyEditorFragment.java
+++ b/WordPressEditor/src/main/java/org/wordpress/android/editor/LegacyEditorFragment.java
@@ -1129,4 +1129,14 @@ public void appendGallery(MediaGallery mediaGallery) {
         editableText.setSpan(as, selectionStart, selectionEnd + 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
         editableText.insert(selectionEnd + 1, "\n\n");
     }
+
+    @Override
+    public void setTitlePlaceholder(CharSequence text) {
+
+    }
+
+    @Override
+    public void setContentPlaceholder(CharSequence text) {
+
+    }
 }
diff --git a/WordPressEditor/src/main/java/org/wordpress/android/editor/OnImeBackListener.java b/WordPressEditor/src/main/java/org/wordpress/android/editor/OnImeBackListener.java
new file mode 100644
index 000000000000..ed7ee09952bd
--- /dev/null
+++ b/WordPressEditor/src/main/java/org/wordpress/android/editor/OnImeBackListener.java
@@ -0,0 +1,5 @@
+package org.wordpress.android.editor;
+
+public interface OnImeBackListener {
+    void onImeBack();
+}
diff --git a/WordPressEditor/src/main/java/org/wordpress/android/editor/RippleToggleButton.java b/WordPressEditor/src/main/java/org/wordpress/android/editor/RippleToggleButton.java
new file mode 100644
index 000000000000..4d932b322e0b
--- /dev/null
+++ b/WordPressEditor/src/main/java/org/wordpress/android/editor/RippleToggleButton.java
@@ -0,0 +1,96 @@
+package org.wordpress.android.editor;
+
+import android.content.Context;
+import android.graphics.Canvas;
+import android.graphics.Paint;
+import android.support.annotation.NonNull;
+import android.util.AttributeSet;
+import android.view.MotionEvent;
+import android.widget.ToggleButton;
+
+public class RippleToggleButton extends ToggleButton {
+    private static final int FRAME_RATE = 10;
+    private static final int DURATION = 250;
+    private static final int FILL_INITIAL_OPACITY = 200;
+    private static final int STROKE_INITIAL_OPACITY = 255;
+
+    private float mHalfWidth;
+    private boolean mAnimationIsRunning = false;
+    private int mTimer = 0;
+    private Paint mFillPaint;
+    private Paint mStrokePaint;
+
+    public RippleToggleButton(Context context) {
+        super(context);
+    }
+
+    public RippleToggleButton(Context context, AttributeSet attrs) {
+        super(context, attrs);
+        init();
+    }
+
+    public RippleToggleButton(Context context, AttributeSet attrs, int defStyle) {
+        super(context, attrs, defStyle);
+        init();
+    }
+
+    private void init() {
+        if (isInEditMode()) {
+            return;
+        }
+
+        int rippleColor = getResources().getColor(R.color.format_bar_ripple_animation);
+
+        mFillPaint = new Paint();
+        mFillPaint.setAntiAlias(true);
+        mFillPaint.setColor(rippleColor);
+        mFillPaint.setStyle(Paint.Style.FILL);
+        mFillPaint.setAlpha(FILL_INITIAL_OPACITY);
+
+        mStrokePaint = new Paint();
+        mStrokePaint.setAntiAlias(true);
+        mStrokePaint.setColor(rippleColor);
+        mStrokePaint.setStyle(Paint.Style.STROKE);
+        mStrokePaint.setStrokeWidth(2);
+        mStrokePaint.setAlpha(STROKE_INITIAL_OPACITY);
+
+        setWillNotDraw(false);
+    }
+
+    @Override
+    public void draw(@NonNull Canvas canvas) {
+        super.draw(canvas);
+        if (mAnimationIsRunning) {
+            if (DURATION <= mTimer * FRAME_RATE) {
+                mAnimationIsRunning = false;
+                mTimer = 0;
+            } else {
+                float progressFraction = ((float) mTimer * FRAME_RATE) / DURATION;
+
+                mFillPaint.setAlpha((int) (FILL_INITIAL_OPACITY * (1 - progressFraction)));
+                mStrokePaint.setAlpha((int) (STROKE_INITIAL_OPACITY * (1 - progressFraction)));
+
+                canvas.drawCircle(mHalfWidth, mHalfWidth, mHalfWidth * progressFraction, mFillPaint);
+                canvas.drawCircle(mHalfWidth, mHalfWidth, mHalfWidth * progressFraction, mStrokePaint);
+
+                mTimer++;
+            }
+
+            invalidate();
+        }
+    }
+
+    @Override
+    public boolean onTouchEvent(@NonNull MotionEvent event) {
+        startRippleAnimation();
+        return super.onTouchEvent(event);
+    }
+
+    private void startRippleAnimation() {
+        if (this.isEnabled() && !mAnimationIsRunning) {
+            mHalfWidth = getMeasuredWidth() / 2;
+            mAnimationIsRunning = true;
+            invalidate();
+        }
+    }
+}
diff --git a/WordPressEditor/src/main/java/org/wordpress/android/editor/SourceViewEditText.java b/WordPressEditor/src/main/java/org/wordpress/android/editor/SourceViewEditText.java
new file mode 100644
index 000000000000..12caa31d092b
--- /dev/null
+++ b/WordPressEditor/src/main/java/org/wordpress/android/editor/SourceViewEditText.java
@@ -0,0 +1,60 @@
+package org.wordpress.android.editor;
+
+import android.content.Context;
+import android.content.res.TypedArray;
+import android.graphics.Typeface;
+import android.util.AttributeSet;
+import android.view.KeyEvent;
+import android.widget.EditText;
+
+import org.wordpress.android.util.AppLog;
+
+/**
+ * An EditText with support for {@link org.wordpress.android.editor.OnImeBackListener} and typeface setting
+ * using a custom XML attribute.
+ */
+public class SourceViewEditText extends EditText {
+
+    private OnImeBackListener mOnImeBackListener;
+
+    public SourceViewEditText(Context context) {
+        super(context);
+    }
+
+    public SourceViewEditText(Context context, AttributeSet attrs) {
+        super(context, attrs);
+        setCustomTypeface(attrs);
+    }
+
+    public SourceViewEditText(Context context, AttributeSet attrs, int defStyle) {
+        super(context, attrs, defStyle);
+        setCustomTypeface(attrs);
+    }
+
+    public boolean onKeyPreIme(int keyCode, KeyEvent event) {
+        if(event.getKeyCode() == KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_UP) {
+            if (this.mOnImeBackListener != null) {
+                this.mOnImeBackListener.onImeBack();
+            }
+        }
+        return super.onKeyPreIme(keyCode, event);
+    }
+
+    public void setOnImeBackListener(OnImeBackListener listener) {
+        this.mOnImeBackListener = listener;
+    }
+
+    private void setCustomTypeface(AttributeSet attrs) {
+        TypedArray values = getContext().obtainStyledAttributes(attrs, R.styleable.SourceViewEditText);
+        String typefaceName = values.getString(R.styleable.SourceViewEditText_fontFile);
+        if (typefaceName != null) {
+            try {
+                Typeface typeface = Typeface.createFromAsset(getContext().getAssets(), "fonts/" + typefaceName);
+                this.setTypeface(typeface);
+            } catch (RuntimeException e) {
+                AppLog.e(AppLog.T.EDITOR, "Could not load typeface " + typefaceName);
+            }
+        }
+        values.recycle();
+    }
+}
\ No newline at end of file
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_bold.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_bold.png
index 89c3fdaaf1a9..5cadbdbb48d6 100644
Binary files a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_bold.png and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_bold.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_bold_disabled.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_bold_disabled.png
new file mode 100644
index 000000000000..07c51b6d6136
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_bold_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_bold_highlighted.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_bold_highlighted.png
old mode 100755
new mode 100644
index 3ccf0a48b808..f324e7f37b3e
Binary files a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_bold_highlighted.png and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_bold_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_html.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_html.png
index 4d7e90d5b8c8..cf6598c46e80 100644
Binary files a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_html.png and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_html.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_html_disabled.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_html_disabled.png
new file mode 100644
index 000000000000..8e5e094d6a81
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_html_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_html_highlighted.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_html_highlighted.png
old mode 100755
new mode 100644
index 508f9f312cab..ada19d880ee9
Binary files a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_html_highlighted.png and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_html_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_italic.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_italic.png
index 3d1e92ad76f8..57afe4b6d3d4 100644
Binary files a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_italic.png and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_italic.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_italic_disabled.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_italic_disabled.png
new file mode 100644
index 000000000000..0bc7247fe67d
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_italic_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_italic_highlighted.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_italic_highlighted.png
old mode 100755
new mode 100644
index ac2b45ade4da..826c9755fa47
Binary files a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_italic_highlighted.png and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_italic_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_link.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_link.png
index 78f957d3f091..bb61856d5997 100644
Binary files a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_link.png and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_link.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_link_disabled.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_link_disabled.png
new file mode 100644
index 000000000000..58558dba2fde
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_link_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_link_highlighted.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_link_highlighted.png
old mode 100755
new mode 100644
index 570389bc5614..c7bb8a76dde2
Binary files a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_link_highlighted.png and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_link_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_media.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_media.png
index 48ae074cea8a..b7ad17ad9a51 100644
Binary files a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_media.png and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_media.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_media_disabled.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_media_disabled.png
new file mode 100644
index 000000000000..78417e4e6a6c
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_media_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_media_highlighted.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_media_highlighted.png
old mode 100755
new mode 100644
index 8a3730116c21..8325930d0047
Binary files a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_media_highlighted.png and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_media_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_more.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_more.png
index f96fd5d76d47..b3c93eec7b21 100644
Binary files a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_more.png and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_more.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_more_disabled.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_more_disabled.png
new file mode 100644
index 000000000000..390d61d7d93c
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_more_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_more_highlighted.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_more_highlighted.png
old mode 100755
new mode 100644
index 9ab4487bf14c..5a2c8c54ddd2
Binary files a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_more_highlighted.png and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_more_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ol.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ol.png
index 8d0476031774..c5af4133edc8 100644
Binary files a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ol.png and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ol.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ol_disabled.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ol_disabled.png
new file mode 100644
index 000000000000..bd2a922714db
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ol_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ol_highlighted.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ol_highlighted.png
old mode 100755
new mode 100644
index 201c5bd1aac6..81e998fbddac
Binary files a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ol_highlighted.png and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ol_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_quote.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_quote.png
index 8f7adfbf05bd..c264814751c3 100644
Binary files a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_quote.png and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_quote.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_quote_disabled.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_quote_disabled.png
new file mode 100644
index 000000000000..b61a08c79d48
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_quote_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_quote_highlighted.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_quote_highlighted.png
old mode 100755
new mode 100644
index d2ece2f507db..28bf6feee7f0
Binary files a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_quote_highlighted.png and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_quote_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_strikethrough.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_strikethrough.png
index 19e4f6bb5458..431c7d878c48 100644
Binary files a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_strikethrough.png and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_strikethrough.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_strikethrough_disabled.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_strikethrough_disabled.png
new file mode 100644
index 000000000000..242e00a05669
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_strikethrough_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_strikethrough_highlighted.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_strikethrough_highlighted.png
old mode 100755
new mode 100644
index 50b45a58caaf..bd0727aea154
Binary files a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_strikethrough_highlighted.png and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_strikethrough_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ul.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ul.png
index b4ce71ee686d..d241e520d27f 100644
Binary files a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ul.png and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ul.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ul_disabled.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ul_disabled.png
new file mode 100644
index 000000000000..b61be7a2f75c
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ul_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ul_highlighted.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ul_highlighted.png
old mode 100755
new mode 100644
index b9bca3f7365d..9781a9505d0d
Binary files a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ul_highlighted.png and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_button_ul_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-hdpi/format_bar_chevron.png b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_chevron.png
new file mode 100644
index 000000000000..d47a4f1cee02
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-hdpi/format_bar_chevron.png differ
diff --git a/WordPressEditor/src/main/res/drawable-sw600dp-hdpi/format_bar_button_html.png b/WordPressEditor/src/main/res/drawable-sw600dp-hdpi/format_bar_button_html.png
deleted file mode 100644
index 884fafdc23d4..000000000000
Binary files a/WordPressEditor/src/main/res/drawable-sw600dp-hdpi/format_bar_button_html.png and /dev/null differ
diff --git a/WordPressEditor/src/main/res/drawable-sw600dp-hdpi/format_bar_button_html_highlighted.png b/WordPressEditor/src/main/res/drawable-sw600dp-hdpi/format_bar_button_html_highlighted.png
deleted file mode 100644
index 253fd109fffe..000000000000
Binary files a/WordPressEditor/src/main/res/drawable-sw600dp-hdpi/format_bar_button_html_highlighted.png and /dev/null differ
diff --git a/WordPressEditor/src/main/res/drawable-sw600dp-xhdpi/format_bar_button_html.png b/WordPressEditor/src/main/res/drawable-sw600dp-xhdpi/format_bar_button_html.png
deleted file mode 100644
index ce40ac2d0537..000000000000
Binary files a/WordPressEditor/src/main/res/drawable-sw600dp-xhdpi/format_bar_button_html.png and /dev/null differ
diff --git a/WordPressEditor/src/main/res/drawable-sw600dp-xhdpi/format_bar_button_html_highlighted.png b/WordPressEditor/src/main/res/drawable-sw600dp-xhdpi/format_bar_button_html_highlighted.png
deleted file mode 100644
index bfad2c98dc00..000000000000
Binary files a/WordPressEditor/src/main/res/drawable-sw600dp-xhdpi/format_bar_button_html_highlighted.png and /dev/null differ
diff --git a/WordPressEditor/src/main/res/drawable-sw600dp-xxhdpi/format_bar_button_html.png b/WordPressEditor/src/main/res/drawable-sw600dp-xxhdpi/format_bar_button_html.png
deleted file mode 100644
index 4572062f4b5e..000000000000
Binary files a/WordPressEditor/src/main/res/drawable-sw600dp-xxhdpi/format_bar_button_html.png and /dev/null differ
diff --git a/WordPressEditor/src/main/res/drawable-sw600dp-xxhdpi/format_bar_button_html_highlighted.png b/WordPressEditor/src/main/res/drawable-sw600dp-xxhdpi/format_bar_button_html_highlighted.png
deleted file mode 100644
index 6770c73a2337..000000000000
Binary files a/WordPressEditor/src/main/res/drawable-sw600dp-xxhdpi/format_bar_button_html_highlighted.png and /dev/null differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_bold.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_bold.png
index 255d97743526..32cd925b59a0 100644
Binary files a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_bold.png and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_bold.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_bold_disabled.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_bold_disabled.png
new file mode 100644
index 000000000000..886b58bde49a
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_bold_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_bold_highlighted.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_bold_highlighted.png
old mode 100755
new mode 100644
index 4c494c5dd1b5..b07ccec4096d
Binary files a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_bold_highlighted.png and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_bold_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_html.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_html.png
index 73f29b97d78f..28ab8c3d320e 100644
Binary files a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_html.png and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_html.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_html_disabled.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_html_disabled.png
new file mode 100644
index 000000000000..1b430342f7bc
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_html_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_html_highlighted.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_html_highlighted.png
old mode 100755
new mode 100644
index 1dc4d75f2463..346d6552cda3
Binary files a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_html_highlighted.png and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_html_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_italic.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_italic.png
index cc784480f194..21b7b5c65f23 100644
Binary files a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_italic.png and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_italic.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_italic_disabled.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_italic_disabled.png
new file mode 100644
index 000000000000..a88d483c5d89
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_italic_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_italic_highlighted.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_italic_highlighted.png
old mode 100755
new mode 100644
index 557316f6f18e..0d9b82bc5bda
Binary files a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_italic_highlighted.png and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_italic_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_link.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_link.png
index 8f5f4cab8095..42da38879528 100644
Binary files a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_link.png and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_link.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_link_disabled.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_link_disabled.png
new file mode 100644
index 000000000000..62ad3bf734f7
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_link_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_link_highlighted.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_link_highlighted.png
old mode 100755
new mode 100644
index 59c200cc359c..fb63462aa079
Binary files a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_link_highlighted.png and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_link_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_media.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_media.png
index c0fa0b66a5e6..e546778f7355 100644
Binary files a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_media.png and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_media.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_media_disabled.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_media_disabled.png
new file mode 100644
index 000000000000..5728b301d43a
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_media_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_media_highlighted.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_media_highlighted.png
old mode 100755
new mode 100644
index e0cde28d7cdf..bb034b79ad89
Binary files a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_media_highlighted.png and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_media_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_more.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_more.png
index 4ecf7052aa90..20f3fd138217 100644
Binary files a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_more.png and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_more.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_more_disabled.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_more_disabled.png
new file mode 100644
index 000000000000..109cfcc799d2
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_more_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_more_highlighted.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_more_highlighted.png
old mode 100755
new mode 100644
index 575698bb7ca3..b0889f02a1e1
Binary files a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_more_highlighted.png and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_more_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ol.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ol.png
index 766a81b1d33b..eefdd59da5a6 100644
Binary files a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ol.png and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ol.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ol_disabled.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ol_disabled.png
new file mode 100644
index 000000000000..97e1a3ae011d
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ol_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ol_highlighted.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ol_highlighted.png
old mode 100755
new mode 100644
index 731bc7f81133..0de14b6502d6
Binary files a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ol_highlighted.png and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ol_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_quote.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_quote.png
index 10a864bc8590..0582726fedee 100644
Binary files a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_quote.png and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_quote.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_quote_disabled.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_quote_disabled.png
new file mode 100644
index 000000000000..973d7b4f18dc
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_quote_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_quote_highlighted.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_quote_highlighted.png
old mode 100755
new mode 100644
index 09d16fbb37bd..c374e951e636
Binary files a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_quote_highlighted.png and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_quote_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_strikethrough.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_strikethrough.png
index 85097dbcf5d6..6b8cbe3d5539 100644
Binary files a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_strikethrough.png and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_strikethrough.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_strikethrough_disabled.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_strikethrough_disabled.png
new file mode 100644
index 000000000000..0683895e9dfd
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_strikethrough_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_strikethrough_highlighted.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_strikethrough_highlighted.png
old mode 100755
new mode 100644
index 241292d3e3bd..b6dfe9d7ba52
Binary files a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_strikethrough_highlighted.png and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_strikethrough_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ul.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ul.png
index 1993c45fef01..192486349d8f 100644
Binary files a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ul.png and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ul.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ul_disabled.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ul_disabled.png
new file mode 100644
index 000000000000..b881d8bf968f
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ul_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ul_highlighted.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ul_highlighted.png
old mode 100755
new mode 100644
index f303ce361c3a..a017124ea0ed
Binary files a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ul_highlighted.png and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_button_ul_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_chevron.png b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_chevron.png
new file mode 100644
index 000000000000..03b57a17ca1c
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xhdpi/format_bar_chevron.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_bold.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_bold.png
index 435049aee0ee..83378cd62cd8 100644
Binary files a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_bold.png and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_bold.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_bold_disabled.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_bold_disabled.png
new file mode 100644
index 000000000000..3466be62bba3
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_bold_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_bold_highlighted.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_bold_highlighted.png
old mode 100755
new mode 100644
index db0116bcfcc3..894b57518481
Binary files a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_bold_highlighted.png and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_bold_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_html.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_html.png
index 4ae28495c8eb..ca57ef98ab9a 100644
Binary files a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_html.png and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_html.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_html_disabled.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_html_disabled.png
new file mode 100644
index 000000000000..707aca2b1af2
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_html_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_html_highlighted.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_html_highlighted.png
old mode 100755
new mode 100644
index db0c60415725..f26b36df2802
Binary files a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_html_highlighted.png and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_html_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_italic.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_italic.png
index 184b1dfa6e63..2e766d7b8405 100644
Binary files a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_italic.png and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_italic.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_italic_disabled.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_italic_disabled.png
new file mode 100644
index 000000000000..104f0b73f169
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_italic_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_italic_highlighted.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_italic_highlighted.png
old mode 100755
new mode 100644
index 2b4a9376ae37..1126ba107abe
Binary files a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_italic_highlighted.png and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_italic_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_link.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_link.png
index f08f26ddd165..e4518d2f50c5 100644
Binary files a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_link.png and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_link.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_link_disabled.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_link_disabled.png
new file mode 100644
index 000000000000..ae686a96eb4b
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_link_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_link_highlighted.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_link_highlighted.png
old mode 100755
new mode 100644
index 2accfc4d4067..532bba2aa5dc
Binary files a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_link_highlighted.png and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_link_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_media.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_media.png
index 3be85757cf71..e764b0a12d11 100644
Binary files a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_media.png and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_media.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_media_disabled.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_media_disabled.png
new file mode 100644
index 000000000000..dbb45e4d05ea
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_media_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_media_highlighted.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_media_highlighted.png
old mode 100755
new mode 100644
index cffc6f72e219..b88cec4cd6ff
Binary files a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_media_highlighted.png and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_media_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_more.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_more.png
index 34e74b09deb1..500f2dc71ec4 100644
Binary files a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_more.png and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_more.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_more_disabled.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_more_disabled.png
new file mode 100644
index 000000000000..bb7b665ed8cc
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_more_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_more_highlighted.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_more_highlighted.png
old mode 100755
new mode 100644
index 4674a187bda0..17adaef8cea2
Binary files a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_more_highlighted.png and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_more_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ol.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ol.png
index 074aa098be6b..2e17b34b3361 100644
Binary files a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ol.png and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ol.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ol_disabled.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ol_disabled.png
new file mode 100644
index 000000000000..5bcc85934136
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ol_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ol_highlighted.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ol_highlighted.png
old mode 100755
new mode 100644
index 93fc1eacf342..0ad3d5bdbcee
Binary files a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ol_highlighted.png and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ol_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_quote.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_quote.png
index 3f34d51000c6..d954ef1ed6c1 100644
Binary files a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_quote.png and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_quote.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_quote_disabled.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_quote_disabled.png
new file mode 100644
index 000000000000..00a61a47497f
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_quote_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_quote_highlighted.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_quote_highlighted.png
old mode 100755
new mode 100644
index 3607441c1331..82f4f902aab3
Binary files a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_quote_highlighted.png and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_quote_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_strikethrough.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_strikethrough.png
index 263f3028796d..643f6ffef11c 100644
Binary files a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_strikethrough.png and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_strikethrough.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_strikethrough_disabled.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_strikethrough_disabled.png
new file mode 100644
index 000000000000..75076aa87c6a
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_strikethrough_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_strikethrough_highlighted.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_strikethrough_highlighted.png
old mode 100755
new mode 100644
index fb86d4c54313..a0d194d45705
Binary files a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_strikethrough_highlighted.png and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_strikethrough_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ul.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ul.png
index ed54395d8295..ffba75e96b7e 100644
Binary files a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ul.png and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ul.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ul_disabled.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ul_disabled.png
new file mode 100644
index 000000000000..36fa8946d7aa
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ul_disabled.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ul_highlighted.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ul_highlighted.png
old mode 100755
new mode 100644
index 11ba3cf4c240..c0f6c41b4fd0
Binary files a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ul_highlighted.png and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_button_ul_highlighted.png differ
diff --git a/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_chevron.png b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_chevron.png
new file mode 100644
index 000000000000..110b8ba5aaf6
Binary files /dev/null and b/WordPressEditor/src/main/res/drawable-xxhdpi/format_bar_chevron.png differ
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_bold_disabled_state.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_bold_disabled_state.xml
new file mode 100755
index 000000000000..d0ee5f7df590
--- /dev/null
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_bold_disabled_state.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list
+    xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <bitmap
+            android:src="@drawable/format_bar_button_bold_disabled"
+            android:gravity="center"/>
+    </item>
+</layer-list>
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_bold_selected_state.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_bold_selected_state.xml
index 4ab6a2e2615e..9835de551bbf 100755
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_bold_selected_state.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_bold_selected_state.xml
@@ -6,11 +6,4 @@
             android:src="@drawable/format_bar_button_bold_highlighted"
             android:gravity="center"/>
     </item>
-    <item android:top="@dimen/format_bar_button_highlighted_underline_top">
-        <shape android:shape="line">
-            <stroke
-                android:width="@dimen/format_bar_button_highlighted_underline_width"
-                android:color="@color/format_bar_button_highlighted_color"/>
-        </shape>
-    </item>
 </layer-list>
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_bold_selector.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_bold_selector.xml
index fdc1772d9ef1..2287d44987a5 100755
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_bold_selector.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_bold_selector.xml
@@ -2,6 +2,7 @@
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_checked="true" android:drawable="@drawable/format_bar_button_bold_selected_state"/>
     <item android:state_pressed="true" android:drawable="@drawable/format_bar_button_bold_selected_state"/>
+    <item android:state_enabled="false" android:drawable="@drawable/format_bar_button_bold_disabled_state"/>
     <item>
         <bitmap
             android:src="@drawable/format_bar_button_bold"
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_highlighted_underline.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_highlighted_underline.xml
deleted file mode 100644
index ed4a79dc9416..000000000000
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_highlighted_underline.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<shape android:shape="line" xmlns:android="http://schemas.android.com/apk/res/android">
-    <stroke
-        android:width="@dimen/format_bar_button_highlighted_underline_width"
-        android:color="@color/format_bar_button_highlighted_color"/>
-</shape>
\ No newline at end of file
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_html_disabled_state.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_html_disabled_state.xml
new file mode 100755
index 000000000000..e5c0e5feae40
--- /dev/null
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_html_disabled_state.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list
+    xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <bitmap
+            android:src="@drawable/format_bar_button_html_disabled"
+            android:gravity="center"/>
+    </item>
+</layer-list>
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_html_selected_state.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_html_selected_state.xml
index 696a6ce9c0be..4ab895011c24 100755
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_html_selected_state.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_html_selected_state.xml
@@ -6,11 +6,4 @@
             android:src="@drawable/format_bar_button_html_highlighted"
             android:gravity="center"/>
     </item>
-    <item android:top="@dimen/format_bar_button_highlighted_underline_top">
-        <shape android:shape="line">
-            <stroke
-                android:width="@dimen/format_bar_button_highlighted_underline_width"
-                android:color="@color/format_bar_button_highlighted_color"/>
-        </shape>
-    </item>
 </layer-list>
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_html_selector.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_html_selector.xml
index 86229c0f76e2..cc51e2f08dd8 100755
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_html_selector.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_html_selector.xml
@@ -2,6 +2,7 @@
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_checked="true" android:drawable="@drawable/format_bar_button_html_selected_state"/>
     <item android:state_pressed="true" android:drawable="@drawable/format_bar_button_html_selected_state"/>
+    <item android:state_enabled="false" android:drawable="@drawable/format_bar_button_html_disabled_state"/>
     <item>
         <bitmap
             android:src="@drawable/format_bar_button_html"
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_italic_disabled_state.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_italic_disabled_state.xml
new file mode 100755
index 000000000000..5c1a6899f233
--- /dev/null
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_italic_disabled_state.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list
+    xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <bitmap
+            android:src="@drawable/format_bar_button_italic_disabled"
+            android:gravity="center"/>
+    </item>
+</layer-list>
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_italic_selected_state.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_italic_selected_state.xml
index 29eb69e4a705..3559953de6f0 100755
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_italic_selected_state.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_italic_selected_state.xml
@@ -6,11 +6,4 @@
             android:src="@drawable/format_bar_button_italic_highlighted"
             android:gravity="center"/>
     </item>
-    <item android:top="@dimen/format_bar_button_highlighted_underline_top">
-        <shape android:shape="line">
-            <stroke
-                android:width="@dimen/format_bar_button_highlighted_underline_width"
-                android:color="@color/format_bar_button_highlighted_color"/>
-        </shape>
-    </item>
 </layer-list>
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_italic_selector.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_italic_selector.xml
index c627cb34c42f..21ba91650fad 100755
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_italic_selector.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_italic_selector.xml
@@ -2,6 +2,7 @@
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_checked="true" android:drawable="@drawable/format_bar_button_italic_selected_state"/>
     <item android:state_pressed="true" android:drawable="@drawable/format_bar_button_italic_selected_state"/>
+    <item android:state_enabled="false" android:drawable="@drawable/format_bar_button_italic_disabled_state"/>
     <item>
         <bitmap
             android:src="@drawable/format_bar_button_italic"
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_link_disabled_state.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_link_disabled_state.xml
new file mode 100755
index 000000000000..f76c86d1e252
--- /dev/null
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_link_disabled_state.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list
+    xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <bitmap
+            android:src="@drawable/format_bar_button_link_disabled"
+            android:gravity="center"/>
+    </item>
+</layer-list>
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_link_selected_state.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_link_selected_state.xml
index 55102f1b1366..7aaad74f1008 100755
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_link_selected_state.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_link_selected_state.xml
@@ -6,11 +6,4 @@
             android:src="@drawable/format_bar_button_link_highlighted"
             android:gravity="center"/>
     </item>
-    <item android:top="@dimen/format_bar_button_highlighted_underline_top">
-        <shape android:shape="line">
-            <stroke
-                android:width="@dimen/format_bar_button_highlighted_underline_width"
-                android:color="@color/format_bar_button_highlighted_color"/>
-        </shape>
-    </item>
 </layer-list>
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_link_selector.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_link_selector.xml
index 053cea8d32db..a71854054f07 100755
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_link_selector.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_link_selector.xml
@@ -2,6 +2,7 @@
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_checked="true" android:drawable="@drawable/format_bar_button_link_selected_state"/>
     <item android:state_pressed="true" android:drawable="@drawable/format_bar_button_link_selected_state"/>
+    <item android:state_enabled="false" android:drawable="@drawable/format_bar_button_link_disabled_state"/>
     <item>
         <bitmap
             android:src="@drawable/format_bar_button_link"
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_media_disabled_state.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_media_disabled_state.xml
new file mode 100755
index 000000000000..cdfc9a4b21ba
--- /dev/null
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_media_disabled_state.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list
+    xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <bitmap
+            android:src="@drawable/format_bar_button_media_disabled"
+            android:gravity="center"/>
+    </item>
+</layer-list>
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_media_selected_state.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_media_selected_state.xml
index 4b1563f0f273..1c9c0f4fa8c0 100755
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_media_selected_state.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_media_selected_state.xml
@@ -6,11 +6,4 @@
             android:src="@drawable/format_bar_button_media_highlighted"
             android:gravity="center"/>
     </item>
-    <item android:top="@dimen/format_bar_button_highlighted_underline_top">
-        <shape android:shape="line">
-            <stroke
-                android:width="@dimen/format_bar_button_highlighted_underline_width"
-                android:color="@color/format_bar_button_highlighted_color"/>
-        </shape>
-    </item>
 </layer-list>
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_media_selector.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_media_selector.xml
index 003de550cc40..883a797a7c2d 100755
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_media_selector.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_media_selector.xml
@@ -2,6 +2,7 @@
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_checked="true" android:drawable="@drawable/format_bar_button_media_selected_state"/>
     <item android:state_pressed="true" android:drawable="@drawable/format_bar_button_media_selected_state"/>
+    <item android:state_enabled="false" android:drawable="@drawable/format_bar_button_media_disabled_state"/>
     <item>
         <bitmap
             android:src="@drawable/format_bar_button_media"
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_ol_disabled_state.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_ol_disabled_state.xml
new file mode 100755
index 000000000000..1109597680db
--- /dev/null
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_ol_disabled_state.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list
+    xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <bitmap
+            android:src="@drawable/format_bar_button_ol_disabled"
+            android:gravity="center"/>
+    </item>
+</layer-list>
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_ol_selected_state.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_ol_selected_state.xml
index 9d07fc4dc490..5209bdb8167b 100755
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_ol_selected_state.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_ol_selected_state.xml
@@ -6,11 +6,4 @@
             android:src="@drawable/format_bar_button_ol_highlighted"
             android:gravity="center"/>
     </item>
-    <item android:top="@dimen/format_bar_button_highlighted_underline_top">
-        <shape android:shape="line">
-            <stroke
-                android:width="@dimen/format_bar_button_highlighted_underline_width"
-                android:color="@color/format_bar_button_highlighted_color"/>
-        </shape>
-    </item>
 </layer-list>
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_ol_selector.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_ol_selector.xml
index c0f849cd0264..7116a51df2d2 100755
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_ol_selector.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_ol_selector.xml
@@ -2,6 +2,7 @@
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_checked="true" android:drawable="@drawable/format_bar_button_ol_selected_state"/>
     <item android:state_pressed="true" android:drawable="@drawable/format_bar_button_ol_selected_state"/>
+    <item android:state_enabled="false" android:drawable="@drawable/format_bar_button_ol_disabled_state"/>
     <item>
         <bitmap
             android:src="@drawable/format_bar_button_ol"
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_quote_disabled_state.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_quote_disabled_state.xml
new file mode 100755
index 000000000000..b19edc5bb912
--- /dev/null
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_quote_disabled_state.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list
+    xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <bitmap
+            android:src="@drawable/format_bar_button_quote_disabled"
+            android:gravity="center"/>
+    </item>
+</layer-list>
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_quote_selected_state.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_quote_selected_state.xml
index bcea43181cde..ea4f0b14dfcc 100755
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_quote_selected_state.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_quote_selected_state.xml
@@ -6,11 +6,4 @@
             android:src="@drawable/format_bar_button_quote_highlighted"
             android:gravity="center"/>
     </item>
-    <item android:top="@dimen/format_bar_button_highlighted_underline_top">
-        <shape android:shape="line">
-            <stroke
-                android:width="@dimen/format_bar_button_highlighted_underline_width"
-                android:color="@color/format_bar_button_highlighted_color"/>
-        </shape>
-    </item>
 </layer-list>
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_quote_selector.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_quote_selector.xml
index bad08df8d9d1..9d2d91a25257 100755
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_quote_selector.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_quote_selector.xml
@@ -2,6 +2,7 @@
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_checked="true" android:drawable="@drawable/format_bar_button_quote_selected_state"/>
     <item android:state_pressed="true" android:drawable="@drawable/format_bar_button_quote_selected_state"/>
+    <item android:state_enabled="false" android:drawable="@drawable/format_bar_button_quote_disabled_state"/>
     <item>
         <bitmap
             android:src="@drawable/format_bar_button_quote"
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_strikethrough_disabled_state.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_strikethrough_disabled_state.xml
new file mode 100644
index 000000000000..dfbb3f6882b4
--- /dev/null
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_strikethrough_disabled_state.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list
+    xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <bitmap
+            android:src="@drawable/format_bar_button_strikethrough_disabled"
+            android:gravity="center"/>
+    </item>
+</layer-list>
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_strikethrough_selected_state.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_strikethrough_selected_state.xml
index 1c89e03e9722..17f870fce508 100644
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_strikethrough_selected_state.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_strikethrough_selected_state.xml
@@ -6,11 +6,4 @@
             android:src="@drawable/format_bar_button_strikethrough_highlighted"
             android:gravity="center"/>
     </item>
-    <item android:top="@dimen/format_bar_button_highlighted_underline_top">
-        <shape android:shape="line">
-            <stroke
-                android:width="@dimen/format_bar_button_highlighted_underline_width"
-                android:color="@color/format_bar_button_highlighted_color"/>
-        </shape>
-    </item>
 </layer-list>
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_strikethrough_selector.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_strikethrough_selector.xml
index 07fe02a892c5..5208dcfcea22 100644
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_strikethrough_selector.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_strikethrough_selector.xml
@@ -2,6 +2,7 @@
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_checked="true" android:drawable="@drawable/format_bar_button_strikethrough_selected_state"/>
     <item android:state_pressed="true" android:drawable="@drawable/format_bar_button_strikethrough_selected_state"/>
+    <item android:state_enabled="false" android:drawable="@drawable/format_bar_button_strikethrough_disabled_state"/>
     <item>
         <bitmap
             android:src="@drawable/format_bar_button_strikethrough"
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_ul_disabled_state.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_ul_disabled_state.xml
new file mode 100755
index 000000000000..d2df8a43baae
--- /dev/null
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_ul_disabled_state.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list
+    xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <bitmap
+            android:src="@drawable/format_bar_button_ul_disabled"
+            android:gravity="center"/>
+    </item>
+</layer-list>
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_ul_selected_state.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_ul_selected_state.xml
index d9e9929d6d5d..77f0b0021a34 100755
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_ul_selected_state.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_ul_selected_state.xml
@@ -6,11 +6,4 @@
             android:src="@drawable/format_bar_button_ul_highlighted"
             android:gravity="center"/>
     </item>
-    <item android:top="@dimen/format_bar_button_highlighted_underline_top">
-        <shape android:shape="line">
-            <stroke
-                android:width="@dimen/format_bar_button_highlighted_underline_width"
-                android:color="@color/format_bar_button_highlighted_color"/>
-        </shape>
-    </item>
 </layer-list>
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_ul_selector.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_ul_selector.xml
index d66242298f5b..ea9f0217f043 100755
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_ul_selector.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_ul_selector.xml
@@ -2,6 +2,8 @@
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_checked="true" android:drawable="@drawable/format_bar_button_ul_selected_state"/>
     <item android:state_pressed="true" android:drawable="@drawable/format_bar_button_ul_selected_state"/>
+    <item android:state_enabled="false" android:drawable="@drawable/format_bar_button_ul_disabled_state"/>
+
     <item>
         <bitmap
             android:src="@drawable/format_bar_button_ul"
diff --git a/WordPressEditor/src/main/res/layout-w360dp/fragment_editor.xml b/WordPressEditor/src/main/res/layout-w360dp/fragment_editor.xml
new file mode 100755
index 000000000000..5ccb88e80398
--- /dev/null
+++ b/WordPressEditor/src/main/res/layout-w360dp/fragment_editor.xml
@@ -0,0 +1,178 @@
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    xmlns:editor="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:orientation="vertical"
+    tools:context="org.wordpress.android.editor.EditorFragment">
+
+    <include
+        layout="@layout/editor_webview"
+        android:id="@+id/webview"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:layout_above="@+id/format_bar"/>
+
+    <ScrollView
+        android:id="@+id/sourceview"
+        android:layout_width="fill_parent"
+        android:layout_height="fill_parent"
+        android:background="@android:color/white"
+        android:orientation="vertical"
+        android:layout_above="@id/format_bar"
+        android:fillViewport="true"
+        android:visibility="gone">
+
+        <LinearLayout
+            android:id="@+id/post_content_wrapper"
+            android:layout_width="fill_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+
+            <org.wordpress.android.editor.SourceViewEditText
+                android:id="@+id/sourceview_title"
+                android:layout_width="fill_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginLeft="@dimen/sourceview_side_margin"
+                android:layout_marginRight="@dimen/sourceview_side_margin"
+                android:layout_marginTop="@dimen/sourceview_top_margin"
+                android:layout_marginBottom="@dimen/sourceview_title_bottom_margin"
+                android:background="@null"
+                android:textSize="24sp"
+                android:textColorHint="@color/sourceview_placeholder_text"
+                android:inputType="textCapSentences|textAutoCorrect"
+                android:imeOptions="flagNoExtractUi"
+                editor:fontFile="Merriweather-Bold.ttf"/>
+
+            <View
+                android:id="@+id/sourceview_horizontal_divider"
+                android:layout_width="fill_parent"
+                android:layout_height="@dimen/format_bar_horizontal_divider_height"
+                android:layout_marginLeft="@dimen/sourceview_side_margin"
+                android:layout_marginRight="@dimen/sourceview_side_margin"
+                style="@style/DividerSourceView"/>
+
+            <org.wordpress.android.editor.SourceViewEditText
+                android:id="@+id/sourceview_content"
+                android:layout_width="fill_parent"
+                android:layout_height="0dp"
+                android:layout_weight="1"
+                android:gravity="top"
+                android:layout_marginLeft="@dimen/sourceview_side_margin"
+                android:layout_marginRight="@dimen/sourceview_side_margin"
+                android:layout_marginTop="@dimen/sourceview_top_margin"
+                android:background="@null"
+                android:textSize="16sp"
+                android:maxLength="10000000"
+                android:textColorHint="@color/sourceview_placeholder_text"
+                android:inputType="textMultiLine|textCapSentences|textNoSuggestions"
+                android:lineSpacingExtra="4dp"
+                android:imeOptions="flagNoExtractUi"
+                android:typeface="monospace"/>
+        </LinearLayout>
+    </ScrollView>
+
+    <LinearLayout
+        android:id="@+id/format_bar"
+        android:layout_width="fill_parent"
+        android:layout_height="@dimen/format_bar_height"
+        android:layout_gravity="bottom"
+        android:layout_alignParentBottom="true"
+        android:background="@color/format_bar_background"
+        android:orientation="vertical">
+
+        <View
+            android:id="@+id/format_bar_horizontal_divider"
+            android:layout_width="fill_parent"
+            android:layout_height="@dimen/format_bar_horizontal_divider_height"
+            style="@style/Divider"/>
+
+        <LinearLayout
+            android:id="@+id/format_bar_buttons"
+            android:layout_width="fill_parent"
+            android:layout_height="@dimen/format_bar_height"
+            android:layout_gravity="bottom"
+            android:layout_marginRight="@dimen/format_bar_right_margin"
+            android:orientation="horizontal"
+            tools:ignore="RtlHardcoded">
+
+            <LinearLayout
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_weight="1"
+                android:layout_marginLeft="@dimen/format_bar_left_margin"
+                android:orientation="horizontal"
+                tools:ignore="RtlHardcoded">
+
+                <org.wordpress.android.editor.RippleToggleButton
+                    android:id="@+id/format_bar_button_media"
+                    style="@style/FormatBarButton"
+                    android:layout_width="wrap_content"
+                    android:layout_height="fill_parent"
+                    android:background="@drawable/format_bar_button_media_selector"/>
+
+                <org.wordpress.android.editor.RippleToggleButton
+                    android:id="@+id/format_bar_button_bold"
+                    style="@style/FormatBarButton"
+                    android:layout_width="wrap_content"
+                    android:layout_height="fill_parent"
+                    android:background="@drawable/format_bar_button_bold_selector"
+                    android:tag="@string/format_bar_tag_bold"/>
+
+                <org.wordpress.android.editor.RippleToggleButton
+                    android:id="@+id/format_bar_button_italic"
+                    style="@style/FormatBarButton"
+                    android:layout_width="wrap_content"
+                    android:layout_height="fill_parent"
+                    android:background="@drawable/format_bar_button_italic_selector"
+                    android:tag="@string/format_bar_tag_italic"/>
+
+                <org.wordpress.android.editor.RippleToggleButton
+                    android:id="@+id/format_bar_button_quote"
+                    style="@style/FormatBarButton"
+                    android:layout_width="wrap_content"
+                    android:layout_height="fill_parent"
+                    android:background="@drawable/format_bar_button_quote_selector"
+                    android:tag="@string/format_bar_tag_blockquote"/>
+
+                <org.wordpress.android.editor.RippleToggleButton
+                    android:id="@+id/format_bar_button_ul"
+                    style="@style/FormatBarButton"
+                    android:layout_width="wrap_content"
+                    android:layout_height="fill_parent"
+                    android:background="@drawable/format_bar_button_ul_selector"
+                    android:tag="@string/format_bar_tag_unorderedList"/>
+
+                <org.wordpress.android.editor.RippleToggleButton
+                    android:id="@+id/format_bar_button_ol"
+                    style="@style/FormatBarButton"
+                    android:layout_width="wrap_content"
+                    android:layout_height="fill_parent"
+                    android:background="@drawable/format_bar_button_ol_selector"
+                    android:tag="@string/format_bar_tag_orderedList"/>
+
+                <org.wordpress.android.editor.RippleToggleButton
+                    android:id="@+id/format_bar_button_link"
+                    style="@style/FormatBarButton"
+                    android:layout_width="wrap_content"
+                    android:layout_height="fill_parent"
+                    android:background="@drawable/format_bar_button_link_selector"/>
+            </LinearLayout>
+
+            <View
+                android:id="@+id/format_bar_vertical_divider"
+                android:layout_width="@dimen/format_bar_vertical_divider_width"
+                android:layout_height="@dimen/format_bar_vertical_divider_height"
+                android:layout_gravity="center"
+                style="@style/Divider"/>
+
+            <org.wordpress.android.editor.RippleToggleButton
+                android:id="@+id/format_bar_button_html"
+                style="@style/FormatBarHtmlButton"
+                android:layout_width="wrap_content"
+                android:layout_height="fill_parent"
+                android:background="@drawable/format_bar_button_html_selector"/>
+        </LinearLayout>
+    </LinearLayout>
+
+</RelativeLayout>
diff --git a/WordPressEditor/src/main/res/layout-w380dp/fragment_editor.xml b/WordPressEditor/src/main/res/layout-w380dp/fragment_editor.xml
new file mode 100755
index 000000000000..a303fcff438a
--- /dev/null
+++ b/WordPressEditor/src/main/res/layout-w380dp/fragment_editor.xml
@@ -0,0 +1,176 @@
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    xmlns:editor="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:orientation="vertical"
+    tools:context="org.wordpress.android.editor.EditorFragment">
+
+    <include
+        layout="@layout/editor_webview"
+        android:id="@+id/webview"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:layout_above="@+id/format_bar"/>
+
+    <ScrollView
+        android:id="@+id/sourceview"
+        android:layout_width="fill_parent"
+        android:layout_height="fill_parent"
+        android:background="@android:color/white"
+        android:orientation="vertical"
+        android:layout_above="@id/format_bar"
+        android:fillViewport="true"
+        android:visibility="gone">
+
+        <LinearLayout
+            android:id="@+id/post_content_wrapper"
+            android:layout_width="fill_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+
+            <org.wordpress.android.editor.SourceViewEditText
+                android:id="@+id/sourceview_title"
+                android:layout_width="fill_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginLeft="@dimen/sourceview_side_margin"
+                android:layout_marginRight="@dimen/sourceview_side_margin"
+                android:layout_marginTop="@dimen/sourceview_top_margin"
+                android:layout_marginBottom="@dimen/sourceview_title_bottom_margin"
+                android:background="@null"
+                android:textSize="24sp"
+                android:textColorHint="@color/sourceview_placeholder_text"
+                android:inputType="textCapSentences|textAutoCorrect"
+                android:imeOptions="flagNoExtractUi"
+                editor:fontFile="Merriweather-Bold.ttf"/>
+
+            <View
+                android:id="@+id/sourceview_horizontal_divider"
+                android:layout_width="fill_parent"
+                android:layout_height="@dimen/format_bar_horizontal_divider_height"
+                android:layout_marginLeft="@dimen/sourceview_side_margin"
+                android:layout_marginRight="@dimen/sourceview_side_margin"
+                style="@style/DividerSourceView"/>
+
+            <org.wordpress.android.editor.SourceViewEditText
+                android:id="@+id/sourceview_content"
+                android:layout_width="fill_parent"
+                android:layout_height="0dp"
+                android:layout_weight="1"
+                android:gravity="top"
+                android:layout_marginLeft="@dimen/sourceview_side_margin"
+                android:layout_marginRight="@dimen/sourceview_side_margin"
+                android:layout_marginTop="@dimen/sourceview_top_margin"
+                android:background="@null"
+                android:textSize="16sp"
+                android:maxLength="10000000"
+                android:textColorHint="@color/sourceview_placeholder_text"
+                android:inputType="textMultiLine|textCapSentences|textNoSuggestions"
+                android:lineSpacingExtra="4dp"
+                android:imeOptions="flagNoExtractUi"
+                android:typeface="monospace"/>
+        </LinearLayout>
+    </ScrollView>
+
+    <LinearLayout
+        android:id="@+id/format_bar"
+        android:layout_width="fill_parent"
+        android:layout_height="@dimen/format_bar_height"
+        android:layout_gravity="bottom"
+        android:layout_alignParentBottom="true"
+        android:background="@color/format_bar_background"
+        android:orientation="vertical">
+
+        <View
+            android:id="@+id/format_bar_horizontal_divider"
+            android:layout_width="fill_parent"
+            android:layout_height="@dimen/format_bar_horizontal_divider_height"
+            style="@style/Divider"/>
+
+        <LinearLayout
+            android:id="@+id/format_bar_buttons"
+            android:layout_width="fill_parent"
+            android:layout_height="@dimen/format_bar_height"
+            android:layout_gravity="bottom"
+            android:layout_marginRight="@dimen/format_bar_right_margin"
+            android:orientation="horizontal"
+            tools:ignore="RtlHardcoded">
+
+            <org.wordpress.android.editor.RippleToggleButton
+                android:id="@+id/format_bar_button_media"
+                style="@style/FormatBarButton"
+                android:layout_width="wrap_content"
+                android:layout_height="fill_parent"
+                android:layout_weight="1"
+                android:background="@drawable/format_bar_button_media_selector"/>
+
+            <org.wordpress.android.editor.RippleToggleButton
+                android:id="@+id/format_bar_button_bold"
+                style="@style/FormatBarButton"
+                android:layout_width="wrap_content"
+                android:layout_height="fill_parent"
+                android:layout_weight="1"
+                android:background="@drawable/format_bar_button_bold_selector"
+                android:tag="@string/format_bar_tag_bold"/>
+
+            <org.wordpress.android.editor.RippleToggleButton
+                android:id="@+id/format_bar_button_italic"
+                style="@style/FormatBarButton"
+                android:layout_width="wrap_content"
+                android:layout_height="fill_parent"
+                android:layout_weight="1"
+                android:background="@drawable/format_bar_button_italic_selector"
+                android:tag="@string/format_bar_tag_italic"/>
+
+            <org.wordpress.android.editor.RippleToggleButton
+                android:id="@+id/format_bar_button_quote"
+                style="@style/FormatBarButton"
+                android:layout_width="wrap_content"
+                android:layout_height="fill_parent"
+                android:layout_weight="1"
+                android:background="@drawable/format_bar_button_quote_selector"
+                android:tag="@string/format_bar_tag_blockquote"/>
+
+            <org.wordpress.android.editor.RippleToggleButton
+                android:id="@+id/format_bar_button_ul"
+                style="@style/FormatBarButton"
+                android:layout_width="wrap_content"
+                android:layout_height="fill_parent"
+                android:layout_weight="1"
+                android:background="@drawable/format_bar_button_ul_selector"
+                android:tag="@string/format_bar_tag_unorderedList"/>
+
+            <org.wordpress.android.editor.RippleToggleButton
+                android:id="@+id/format_bar_button_ol"
+                style="@style/FormatBarButton"
+                android:layout_width="wrap_content"
+                android:layout_height="fill_parent"
+                android:layout_weight="1"
+                android:background="@drawable/format_bar_button_ol_selector"
+                android:tag="@string/format_bar_tag_orderedList"/>
+
+            <org.wordpress.android.editor.RippleToggleButton
+                android:id="@+id/format_bar_button_link"
+                style="@style/FormatBarButton"
+                android:layout_width="wrap_content"
+                android:layout_height="fill_parent"
+                android:layout_weight="1"
+                android:background="@drawable/format_bar_button_link_selector"/>
+
+            <View
+                android:id="@+id/format_bar_vertical_divider"
+                android:layout_width="@dimen/format_bar_vertical_divider_width"
+                android:layout_height="@dimen/format_bar_vertical_divider_height"
+                android:layout_gravity="center"
+                style="@style/Divider"/>
+
+            <org.wordpress.android.editor.RippleToggleButton
+                android:id="@+id/format_bar_button_html"
+                style="@style/FormatBarHtmlButton"
+                android:layout_width="wrap_content"
+                android:layout_height="fill_parent"
+                android:background="@drawable/format_bar_button_html_selector"/>
+        </LinearLayout>
+    </LinearLayout>
+
+</RelativeLayout>
diff --git a/WordPressEditor/src/main/res/layout-sw600dp/fragment_editor.xml b/WordPressEditor/src/main/res/layout-w600dp/fragment_editor.xml
similarity index 55%
rename from WordPressEditor/src/main/res/layout-sw600dp/fragment_editor.xml
rename to WordPressEditor/src/main/res/layout-w600dp/fragment_editor.xml
index 26281530c6ab..b514d5523aa6 100644
--- a/WordPressEditor/src/main/res/layout-sw600dp/fragment_editor.xml
+++ b/WordPressEditor/src/main/res/layout-w600dp/fragment_editor.xml
@@ -1,5 +1,6 @@
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
+    xmlns:editor="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
@@ -12,13 +13,72 @@
         android:layout_height="match_parent"
         android:layout_above="@+id/format_bar"/>
 
+    <ScrollView
+        android:id="@+id/sourceview"
+        android:layout_width="fill_parent"
+        android:layout_height="fill_parent"
+        android:background="@android:color/white"
+        android:orientation="vertical"
+        android:layout_above="@id/format_bar"
+        android:fillViewport="true"
+        android:visibility="gone">
+
+        <LinearLayout
+            android:id="@+id/post_content_wrapper"
+            android:layout_width="fill_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+
+            <org.wordpress.android.editor.SourceViewEditText
+                android:id="@+id/sourceview_title"
+                android:layout_width="fill_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginLeft="@dimen/sourceview_side_margin"
+                android:layout_marginRight="@dimen/sourceview_side_margin"
+                android:layout_marginTop="@dimen/sourceview_top_margin"
+                android:layout_marginBottom="@dimen/sourceview_title_bottom_margin"
+                android:background="@null"
+                android:textSize="24sp"
+                android:textColorHint="@color/sourceview_placeholder_text"
+                android:inputType="textCapSentences|textAutoCorrect"
+                android:imeOptions="flagNoExtractUi"
+                editor:fontFile="Merriweather-Bold.ttf"/>
+
+            <View
+                android:id="@+id/sourceview_horizontal_divider"
+                android:layout_width="fill_parent"
+                android:layout_height="@dimen/format_bar_horizontal_divider_height"
+                android:layout_marginLeft="@dimen/sourceview_side_margin"
+                android:layout_marginRight="@dimen/sourceview_side_margin"
+                style="@style/DividerSourceView"/>
+
+            <org.wordpress.android.editor.SourceViewEditText
+                android:id="@+id/sourceview_content"
+                android:layout_width="fill_parent"
+                android:layout_height="0dp"
+                android:layout_weight="1"
+                android:gravity="top"
+                android:layout_marginLeft="@dimen/sourceview_side_margin"
+                android:layout_marginRight="@dimen/sourceview_side_margin"
+                android:layout_marginTop="@dimen/sourceview_top_margin"
+                android:background="@null"
+                android:textSize="16sp"
+                android:maxLength="10000000"
+                android:textColorHint="@color/sourceview_placeholder_text"
+                android:inputType="textMultiLine|textCapSentences|textNoSuggestions"
+                android:lineSpacingExtra="4dp"
+                android:imeOptions="flagNoExtractUi"
+                android:typeface="monospace"/>
+        </LinearLayout>
+    </ScrollView>
+
     <LinearLayout
         android:id="@+id/format_bar"
         android:layout_width="fill_parent"
-        android:layout_height="@dimen/format_bar_height"
+        android:layout_height="@dimen/format_bar_height_tablet"
         android:layout_gravity="bottom"
         android:layout_alignParentBottom="true"
-        android:background="@android:color/white"
+        android:background="@color/format_bar_background"
         android:orientation="vertical">
 
         <View
@@ -30,7 +90,7 @@
         <LinearLayout
             android:id="@+id/format_bar_buttons"
             android:layout_width="fill_parent"
-            android:layout_height="@dimen/format_bar_height"
+            android:layout_height="@dimen/format_bar_height_tablet"
             android:layout_gravity="bottom"
             android:gravity="center"
             android:orientation="horizontal"
@@ -41,7 +101,7 @@
                 android:layout_width="wrap_content"
                 android:layout_height="fill_parent">
 
-                <ToggleButton
+                <org.wordpress.android.editor.RippleToggleButton
                     android:id="@+id/format_bar_button_media"
                     style="@style/FormatBarButtonTablet"
                     android:layout_width="wrap_content"
@@ -54,26 +114,29 @@
                 android:layout_width="wrap_content"
                 android:layout_height="fill_parent">
 
-                <ToggleButton
+                <org.wordpress.android.editor.RippleToggleButton
                     android:id="@+id/format_bar_button_bold"
                     style="@style/FormatBarButtonTablet"
                     android:layout_width="wrap_content"
                     android:layout_height="fill_parent"
-                    android:background="@drawable/format_bar_button_bold_selector"/>
+                    android:background="@drawable/format_bar_button_bold_selector"
+                    android:tag="@string/format_bar_tag_bold"/>
 
-                <ToggleButton
+                <org.wordpress.android.editor.RippleToggleButton
                     android:id="@+id/format_bar_button_italic"
                     style="@style/FormatBarButtonTablet"
                     android:layout_width="wrap_content"
                     android:layout_height="fill_parent"
-                    android:background="@drawable/format_bar_button_italic_selector"/>
+                    android:background="@drawable/format_bar_button_italic_selector"
+                    android:tag="@string/format_bar_tag_italic"/>
 
-                <ToggleButton
+                <org.wordpress.android.editor.RippleToggleButton
                     android:id="@+id/format_bar_button_strikethrough"
                     style="@style/FormatBarButtonTablet"
                     android:layout_width="wrap_content"
                     android:layout_height="fill_parent"
-                    android:background="@drawable/format_bar_button_strikethrough_selector"/>
+                    android:background="@drawable/format_bar_button_strikethrough_selector"
+                    android:tag="@string/format_bar_tag_strikethrough"/>
             </LinearLayout>
 
             <LinearLayout
@@ -81,7 +144,7 @@
                 android:layout_width="wrap_content"
                 android:layout_height="fill_parent">
 
-                <ToggleButton
+                <org.wordpress.android.editor.RippleToggleButton
                     android:id="@+id/format_bar_button_link"
                     style="@style/FormatBarButtonTablet"
                     android:layout_width="wrap_content"
@@ -94,26 +157,29 @@
                 android:layout_width="wrap_content"
                 android:layout_height="fill_parent">
 
-                <ToggleButton
+                <org.wordpress.android.editor.RippleToggleButton
                     android:id="@+id/format_bar_button_ul"
                     style="@style/FormatBarButtonTablet"
                     android:layout_width="wrap_content"
                     android:layout_height="fill_parent"
-                    android:background="@drawable/format_bar_button_ul_selector"/>
+                    android:background="@drawable/format_bar_button_ul_selector"
+                    android:tag="@string/format_bar_tag_unorderedList"/>
 
-                <ToggleButton
+                <org.wordpress.android.editor.RippleToggleButton
                     android:id="@+id/format_bar_button_ol"
                     style="@style/FormatBarButtonTablet"
                     android:layout_width="wrap_content"
                     android:layout_height="fill_parent"
-                    android:background="@drawable/format_bar_button_ol_selector"/>
+                    android:background="@drawable/format_bar_button_ol_selector"
+                    android:tag="@string/format_bar_tag_orderedList"/>
 
-                <ToggleButton
+                <org.wordpress.android.editor.RippleToggleButton
                     android:id="@+id/format_bar_button_quote"
                     style="@style/FormatBarButtonTablet"
                     android:layout_width="wrap_content"
                     android:layout_height="fill_parent"
-                    android:background="@drawable/format_bar_button_quote_selector"/>
+                    android:background="@drawable/format_bar_button_quote_selector"
+                    android:tag="@string/format_bar_tag_blockquote"/>
             </LinearLayout>
 
             <LinearLayout
@@ -121,7 +187,7 @@
                 android:layout_width="wrap_content"
                 android:layout_height="fill_parent">
 
-                <ToggleButton
+                <org.wordpress.android.editor.RippleToggleButton
                     android:id="@+id/format_bar_button_html"
                     style="@style/FormatBarButtonTablet"
                     android:layout_width="wrap_content"
diff --git a/WordPressEditor/src/main/res/layout/fragment_editor.xml b/WordPressEditor/src/main/res/layout/fragment_editor.xml
index bbf2b860af26..b804504356af 100755
--- a/WordPressEditor/src/main/res/layout/fragment_editor.xml
+++ b/WordPressEditor/src/main/res/layout/fragment_editor.xml
@@ -1,5 +1,6 @@
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
+    xmlns:editor="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
@@ -12,13 +13,72 @@
         android:layout_height="match_parent"
         android:layout_above="@+id/format_bar"/>
 
+    <ScrollView
+        android:id="@+id/sourceview"
+        android:layout_width="fill_parent"
+        android:layout_height="fill_parent"
+        android:background="@android:color/white"
+        android:orientation="vertical"
+        android:layout_above="@id/format_bar"
+        android:fillViewport="true"
+        android:visibility="gone">
+
+        <LinearLayout
+            android:id="@+id/post_content_wrapper"
+            android:layout_width="fill_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+
+            <org.wordpress.android.editor.SourceViewEditText
+                android:id="@+id/sourceview_title"
+                android:layout_width="fill_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginLeft="@dimen/sourceview_side_margin"
+                android:layout_marginRight="@dimen/sourceview_side_margin"
+                android:layout_marginTop="@dimen/sourceview_top_margin"
+                android:layout_marginBottom="@dimen/sourceview_title_bottom_margin"
+                android:background="@null"
+                android:textSize="24sp"
+                android:textColorHint="@color/sourceview_placeholder_text"
+                android:inputType="textCapSentences|textAutoCorrect"
+                android:imeOptions="flagNoExtractUi"
+                editor:fontFile="Merriweather-Bold.ttf"/>
+
+            <View
+                android:id="@+id/sourceview_horizontal_divider"
+                android:layout_width="fill_parent"
+                android:layout_height="@dimen/format_bar_horizontal_divider_height"
+                android:layout_marginLeft="@dimen/sourceview_side_margin"
+                android:layout_marginRight="@dimen/sourceview_side_margin"
+                style="@style/DividerSourceView"/>
+
+            <org.wordpress.android.editor.SourceViewEditText
+                android:id="@+id/sourceview_content"
+                android:layout_width="fill_parent"
+                android:layout_height="0dp"
+                android:layout_weight="1"
+                android:gravity="top"
+                android:layout_marginLeft="@dimen/sourceview_side_margin"
+                android:layout_marginRight="@dimen/sourceview_side_margin"
+                android:layout_marginTop="@dimen/sourceview_top_margin"
+                android:background="@null"
+                android:textSize="16sp"
+                android:maxLength="10000000"
+                android:textColorHint="@color/sourceview_placeholder_text"
+                android:inputType="textMultiLine|textCapSentences|textNoSuggestions"
+                android:lineSpacingExtra="4dp"
+                android:imeOptions="flagNoExtractUi"
+                android:typeface="monospace"/>
+        </LinearLayout>
+    </ScrollView>
+
     <LinearLayout
         android:id="@+id/format_bar"
         android:layout_width="fill_parent"
         android:layout_height="@dimen/format_bar_height"
         android:layout_gravity="bottom"
         android:layout_alignParentBottom="true"
-        android:background="@android:color/white"
+        android:background="@color/format_bar_background"
         android:orientation="vertical">
 
         <View
@@ -39,7 +99,8 @@
             <HorizontalScrollView
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
-                android:layout_weight="1">
+                android:layout_weight="1"
+                android:layout_marginRight="@dimen/format_bar_scroll_right_margin">
 
                 <LinearLayout
                     android:layout_width="wrap_content"
@@ -48,65 +109,70 @@
                     android:orientation="horizontal"
                     tools:ignore="RtlHardcoded">
 
-                    <ToggleButton
+                    <org.wordpress.android.editor.RippleToggleButton
                         android:id="@+id/format_bar_button_media"
-                        style="@style/FormatBarScrollViewButton"
+                        style="@style/FormatBarButton"
                         android:layout_width="wrap_content"
                         android:layout_height="fill_parent"
                         android:background="@drawable/format_bar_button_media_selector"/>
 
-                    <ToggleButton
+                    <org.wordpress.android.editor.RippleToggleButton
                         android:id="@+id/format_bar_button_bold"
-                        style="@style/FormatBarScrollViewButton"
+                        style="@style/FormatBarButton"
                         android:layout_width="wrap_content"
                         android:layout_height="fill_parent"
-                        android:background="@drawable/format_bar_button_bold_selector"/>
+                        android:background="@drawable/format_bar_button_bold_selector"
+                        android:tag="@string/format_bar_tag_bold"/>
 
-                    <ToggleButton
+                    <org.wordpress.android.editor.RippleToggleButton
                         android:id="@+id/format_bar_button_italic"
-                        style="@style/FormatBarScrollViewButton"
+                        style="@style/FormatBarButton"
                         android:layout_width="wrap_content"
                         android:layout_height="fill_parent"
-                        android:background="@drawable/format_bar_button_italic_selector"/>
+                        android:background="@drawable/format_bar_button_italic_selector"
+                        android:tag="@string/format_bar_tag_italic"/>
 
-                    <ToggleButton
+                    <org.wordpress.android.editor.RippleToggleButton
                         android:id="@+id/format_bar_button_quote"
-                        style="@style/FormatBarScrollViewButton"
+                        style="@style/FormatBarButton"
                         android:layout_width="wrap_content"
                         android:layout_height="fill_parent"
-                        android:background="@drawable/format_bar_button_quote_selector"/>
+                        android:background="@drawable/format_bar_button_quote_selector"
+                        android:tag="@string/format_bar_tag_blockquote"/>
 
-                    <ToggleButton
+                    <org.wordpress.android.editor.RippleToggleButton
                         android:id="@+id/format_bar_button_ul"
-                        style="@style/FormatBarScrollViewButton"
+                        style="@style/FormatBarButton"
                         android:layout_width="wrap_content"
                         android:layout_height="fill_parent"
-                        android:background="@drawable/format_bar_button_ul_selector"/>
+                        android:background="@drawable/format_bar_button_ul_selector"
+                        android:tag="@string/format_bar_tag_unorderedList"/>
 
-                    <ToggleButton
+                    <org.wordpress.android.editor.RippleToggleButton
                         android:id="@+id/format_bar_button_ol"
-                        style="@style/FormatBarScrollViewButton"
+                        style="@style/FormatBarButton"
                         android:layout_width="wrap_content"
                         android:layout_height="fill_parent"
-                        android:background="@drawable/format_bar_button_ol_selector"/>
+                        android:background="@drawable/format_bar_button_ol_selector"
+                        android:tag="@string/format_bar_tag_orderedList"/>
 
-                    <ToggleButton
+                    <org.wordpress.android.editor.RippleToggleButton
                         android:id="@+id/format_bar_button_link"
-                        style="@style/FormatBarScrollViewButton"
+                        style="@style/FormatBarButton"
                         android:layout_width="wrap_content"
                         android:layout_height="fill_parent"
                         android:background="@drawable/format_bar_button_link_selector"/>
                 </LinearLayout>
             </HorizontalScrollView>
 
-            <View
-                android:id="@+id/format_bar_vertical_divider"
-                android:layout_width="@dimen/format_bar_vertical_divider_width"
-                android:layout_height="@dimen/format_bar_vertical_divider_height"
-                android:layout_gravity="center"
-                style="@style/Divider"/>
+            <ImageView
+                android:src="@drawable/format_bar_chevron"
+                android:background="@android:color/transparent"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:id="@+id/imageView" />
 
-            <ToggleButton
+            <org.wordpress.android.editor.RippleToggleButton
                 android:id="@+id/format_bar_button_html"
                 style="@style/FormatBarHtmlButton"
                 android:layout_width="wrap_content"
diff --git a/WordPressEditor/src/main/res/values-w1280dp/dimens.xml b/WordPressEditor/src/main/res/values-w1280dp/dimens.xml
new file mode 100644
index 000000000000..c68bd2b8f81e
--- /dev/null
+++ b/WordPressEditor/src/main/res/values-w1280dp/dimens.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <dimen name="sourceview_side_margin">@dimen/sourceview_side_margin_extra_large</dimen>
+    <dimen name="format_bar_button_margin_tablet">@dimen/format_bar_button_margin_tablet_extra_large</dimen>
+    <dimen name="format_bar_button_group_tablet">@dimen/format_bar_button_group_tablet_extra_large</dimen>
+</resources>
\ No newline at end of file
diff --git a/WordPressEditor/src/main/res/values-w720dp/dimens.xml b/WordPressEditor/src/main/res/values-w720dp/dimens.xml
new file mode 100644
index 000000000000..c56cac52f15a
--- /dev/null
+++ b/WordPressEditor/src/main/res/values-w720dp/dimens.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <dimen name="sourceview_side_margin">@dimen/sourceview_side_margin_large</dimen>
+</resources>
\ No newline at end of file
diff --git a/WordPressEditor/src/main/res/values/attrs.xml b/WordPressEditor/src/main/res/values/attrs.xml
new file mode 100644
index 000000000000..bfe9ab434a87
--- /dev/null
+++ b/WordPressEditor/src/main/res/values/attrs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <declare-styleable name="SourceViewEditText">
+        <attr name="fontFile" format="string" />
+    </declare-styleable>
+</resources>
\ No newline at end of file
diff --git a/WordPressEditor/src/main/res/values/colors.xml b/WordPressEditor/src/main/res/values/colors.xml
index 79f935353f9d..7ed6b60e0baf 100755
--- a/WordPressEditor/src/main/res/values/colors.xml
+++ b/WordPressEditor/src/main/res/values/colors.xml
@@ -7,6 +7,12 @@
 
     <color name="image_options_label">#cccccc</color>
 
-    <color name="format_bar_button_normal_color">@color/wp_gray</color>
+    <color name="format_bar_button_normal_color">@color/wp_gray_lighten_10</color>
     <color name="format_bar_button_highlighted_color">@color/wp_blue</color>
+    <color name="format_bar_background">#f9fbfc</color>
+    <color name="format_bar_ripple_animation">@color/wp_gray_lighten_10</color>
+
+    <color name="format_bar_divider">@color/wp_gray_lighten_10</color>
+    <color name="sourceview_separator">@color/wp_gray_lighten_30</color>
+    <color name="sourceview_placeholder_text">@color/wp_gray</color>
 </resources>
diff --git a/WordPressEditor/src/main/res/values/dimens.xml b/WordPressEditor/src/main/res/values/dimens.xml
index e3f7d467b552..615b21e35a6a 100644
--- a/WordPressEditor/src/main/res/values/dimens.xml
+++ b/WordPressEditor/src/main/res/values/dimens.xml
@@ -1,25 +1,31 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <dimen name="format_bar_height">40dp</dimen>
+    <dimen name="format_bar_height">44dp</dimen>
+    <dimen name="format_bar_height_tablet">49dp</dimen>
     <dimen name="format_bar_left_margin">5dp</dimen>
     <dimen name="format_bar_right_margin">2dp</dimen>
-    <dimen name="format_bar_button_right_margin">4dp</dimen>
     <dimen name="format_bar_html_button_left_margin">3dp</dimen>
+    <dimen name="format_bar_scroll_right_margin">-7dp</dimen>
 
     <dimen name="format_bar_button_margin_tablet">@dimen/format_bar_button_margin_tablet_small</dimen>
     <dimen name="format_bar_button_margin_tablet_small">2dp</dimen>
     <dimen name="format_bar_button_margin_tablet_large">7dp</dimen>
+    <dimen name="format_bar_button_margin_tablet_extra_large">12dp</dimen>
 
     <dimen name="format_bar_button_group_tablet">@dimen/format_bar_button_group_tablet_small</dimen>
-    <dimen name="format_bar_button_group_tablet_small">20dp</dimen>
-    <dimen name="format_bar_button_group_tablet_large">30dp</dimen>
+    <dimen name="format_bar_button_group_tablet_small">15dp</dimen>
+    <dimen name="format_bar_button_group_tablet_large">25dp</dimen>
+    <dimen name="format_bar_button_group_tablet_extra_large">35dp</dimen>
 
     <dimen name="format_bar_horizontal_divider_height">1dp</dimen>
     <dimen name="format_bar_vertical_divider_width">0.6dp</dimen>
     <dimen name="format_bar_vertical_divider_height">28dp</dimen>
 
-    <dimen name="format_bar_button_highlighted_underline_top">37dp</dimen>
-    <dimen name="format_bar_button_highlighted_underline_width">2dp</dimen>
+    <dimen name="sourceview_side_margin">15dp</dimen>
+    <dimen name="sourceview_side_margin_large">90dp</dimen>
+    <dimen name="sourceview_side_margin_extra_large">170dp</dimen>
+    <dimen name="sourceview_top_margin">15dp</dimen>
+    <dimen name="sourceview_title_bottom_margin">15dp</dimen>
 
     <dimen name="post_editor_content_side_margin">20dp</dimen>
 
diff --git a/WordPressEditor/src/main/res/values/strings.xml b/WordPressEditor/src/main/res/values/strings.xml
index cf23160a4174..c6dc090124f5 100644
--- a/WordPressEditor/src/main/res/values/strings.xml
+++ b/WordPressEditor/src/main/res/values/strings.xml
@@ -4,7 +4,12 @@
     <string name="post_content">Content</string>
     <string name="post_title">Title</string>
 
-
+    <string name="format_bar_tag_bold" translatable="false">bold</string>
+    <string name="format_bar_tag_italic" translatable="false">italic</string>
+    <string name="format_bar_tag_blockquote" translatable="false">blockquote</string>
+    <string name="format_bar_tag_unorderedList" translatable="false">unorderedList</string>
+    <string name="format_bar_tag_orderedList" translatable="false">orderedList</string>
+    <string name="format_bar_tag_strikethrough" translatable="false">strikeThrough</string>
 
     <!-- link view -->
     <string name="link_enter_url">URL</string>
diff --git a/WordPressEditor/src/main/res/values/styles.xml b/WordPressEditor/src/main/res/values/styles.xml
index 1bdc104c84d6..2f755e8ab6fc 100755
--- a/WordPressEditor/src/main/res/values/styles.xml
+++ b/WordPressEditor/src/main/res/values/styles.xml
@@ -19,17 +19,16 @@
         <item name="android:layout_marginLeft">@dimen/format_bar_button_margin_tablet</item>
     </style>
 
-    <style name="FormatBarScrollViewButton" parent="FormatBarButton">
-        <item name="android:layout_marginRight">@dimen/format_bar_button_right_margin</item>
-    </style>
-
     <style name="FormatBarHtmlButton" parent="FormatBarButton">
         <item name="android:layout_marginLeft">@dimen/format_bar_html_button_left_margin</item>
     </style>
 
     <style name="Divider">
-        <item name="android:background">@color/wp_gray</item>
-        <item name="android:alpha">0.5</item>
+        <item name="android:background">@color/format_bar_divider</item>
+    </style>
+
+    <style name="DividerSourceView">
+        <item name="android:background">@color/sourceview_separator</item>
     </style>
 
     <style name="FormatBarTabletGroup">
diff --git a/WordPressEditor/src/main/res/values/wp_colors.xml b/WordPressEditor/src/main/res/values/wp_colors.xml
index acfb9b2b60bc..ebe46b79c06f 100644
--- a/WordPressEditor/src/main/res/values/wp_colors.xml
+++ b/WordPressEditor/src/main/res/values/wp_colors.xml
@@ -1,5 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <color name="wp_gray">#87a6bc</color>
+    <color name="wp_gray_lighten_10">#a8bece</color>
+    <color name="wp_gray_lighten_30">#e9eff3</color>
     <color name="wp_blue">#0087be</color>
 </resources>
\ No newline at end of file
diff --git a/WordPressEditor/src/test/java/org/wordpress/android/editor/EditorFragmentAbstractTest.java b/WordPressEditor/src/test/java/org/wordpress/android/editor/EditorFragmentAbstractTest.java
index 53e7a31868cb..b7c719cb2fa2 100644
--- a/WordPressEditor/src/test/java/org/wordpress/android/editor/EditorFragmentAbstractTest.java
+++ b/WordPressEditor/src/test/java/org/wordpress/android/editor/EditorFragmentAbstractTest.java
@@ -69,6 +69,16 @@ public void appendMediaFile(MediaFile mediaFile, String imageUrl, ImageLoader im
         public void appendGallery(MediaGallery mediaGallery) {
         }
 
+        @Override
+        public void setTitlePlaceholder(CharSequence text) {
+
+        }
+
+        @Override
+        public void setContentPlaceholder(CharSequence text) {
+
+        }
+
         @Override
         public Spanned getSpannedContent() {
             return null;
diff --git a/WordPressEditor/src/test/java/org/wordpress/android/editor/HtmlStyleTextWatcherTest.java b/WordPressEditor/src/test/java/org/wordpress/android/editor/HtmlStyleTextWatcherTest.java
new file mode 100644
index 000000000000..0afd02d6c0a7
--- /dev/null
+++ b/WordPressEditor/src/test/java/org/wordpress/android/editor/HtmlStyleTextWatcherTest.java
@@ -0,0 +1,496 @@
+package org.wordpress.android.editor;
+
+import android.text.Editable;
+import android.text.Spannable;
+import android.text.SpannableStringBuilder;
+import android.text.style.ForegroundColorSpan;
+import android.text.style.RelativeSizeSpan;
+import android.text.style.StyleSpan;
+
+import org.junit.Before;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+import org.robolectric.RobolectricTestRunner;
+import org.robolectric.annotation.Config;
+
+import static org.junit.Assert.assertEquals;
+
+@Config(emulateSdk = 18)
+@RunWith(RobolectricTestRunner.class)
+public class HtmlStyleTextWatcherTest {
+
+    private HtmlStyleTextWatcherForTests mWatcher;
+    private Editable mContent;
+    private boolean mUpdateSpansWasCalled;
+    private HtmlStyleTextWatcher.SpanRange mSpanRange;
+
+    @Before
+    public void setUp() {
+        mWatcher = new HtmlStyleTextWatcherForTests();
+        mUpdateSpansWasCalled = false;
+    }
+
+    @Test
+    public void testTypingNormalText() {
+        // -- Test typing in normal text (non-HTML) in an empty document
+        mContent = new SpannableStringBuilder("a");
+
+        mWatcher.onTextChanged(mContent, 0, 0, 1); // Typed "a"
+        mWatcher.afterTextChanged(mContent);
+
+        assertEquals(false, mUpdateSpansWasCalled);
+
+        mContent = new SpannableStringBuilder("ab");
+
+        mWatcher.onTextChanged(mContent, 1, 0, 1); // Typed "b"
+        mWatcher.afterTextChanged(mContent);
+
+        assertEquals(false, mUpdateSpansWasCalled);
+
+
+        // -- Test typing in normal text after exiting tags
+        mContent = new SpannableStringBuilder("text <b>bold</b> a");
+
+        mWatcher.onTextChanged(mContent, 17, 0, 1); // Typed "a"
+        mWatcher.afterTextChanged(mContent);
+
+        assertEquals(false, mUpdateSpansWasCalled);
+
+
+        // -- Test typing in normal text before exiting tags
+        mContent = new SpannableStringBuilder("text a <b>bold</b>");
+
+        mWatcher.onTextChanged(mContent, 5, 0, 1); // Typed "a"
+        mWatcher.afterTextChanged(mContent);
+
+        assertEquals(false, mUpdateSpansWasCalled);
+    }
+
+    @Test
+    public void testTypingInOpeningTag() {
+        // Test with several different cases of pre-existing text
+        String[] previousTextCases = new String[]{"", "plain text", "<i>",
+                "<blockquote>some existing content</blockquote> "};
+        for (String initialText : previousTextCases) {
+            int offset = initialText.length();
+            mUpdateSpansWasCalled = false;
+
+            // -- Test typing in an opening tag symbol
+            mContent = new SpannableStringBuilder(initialText + "<");
+
+            mWatcher.onTextChanged(mContent, offset, 0, 1);
+            mWatcher.afterTextChanged(mContent);
+
+            // No formatting should be applied/removed
+            assertEquals(false, mUpdateSpansWasCalled);
+
+
+            // -- Test typing in the tag name
+            mContent = new SpannableStringBuilder(initialText + "<b");
+
+            mWatcher.onTextChanged(mContent, offset + 1, 0, 1);
+            mWatcher.afterTextChanged(mContent);
+
+            // No formatting should be applied/removed
+            assertEquals(false, mUpdateSpansWasCalled);
+
+
+            // -- Test typing in a closing tag symbol
+            mContent = new SpannableStringBuilder(initialText + "<b>");
+
+            mWatcher.onTextChanged(mContent, offset + 2, 0, 1);
+            mWatcher.afterTextChanged(mContent);
+
+            assertEquals(offset, mSpanRange.getOpeningTagLoc());
+            assertEquals(offset + 3, mSpanRange.getClosingTagLoc());
+        }
+    }
+
+    @Test
+    public void testTypingInClosingTag() {
+        // Test with several different cases of pre-existing text
+        String[] previousTextCases = new String[]{"<b>stuff", "plain text <b>stuff", "<i><b>stuff",
+                "<blockquote>some existing content</blockquote> <b>stuff"};
+
+        for (String initialText : previousTextCases) {
+            int offset = initialText.length();
+            mUpdateSpansWasCalled = false;
+
+            // -- Test typing in an opening tag symbol
+            mContent = new SpannableStringBuilder(initialText + "<");
+
+            mWatcher.onTextChanged(mContent, offset, 0, 1);
+            mWatcher.afterTextChanged(mContent);
+
+            // No formatting should be applied/removed
+            assertEquals(false, mUpdateSpansWasCalled);
+
+
+            // -- Test typing in the closing tag slash
+            mContent = new SpannableStringBuilder(initialText + "</");
+
+            mWatcher.onTextChanged(mContent, offset + 1, 0, 1);
+            mWatcher.afterTextChanged(mContent);
+
+            // No formatting should be applied/removed
+            assertEquals(false, mUpdateSpansWasCalled);
+
+            // -- Test typing in the tag name
+            mContent = new SpannableStringBuilder(initialText + "</b");
+
+            mWatcher.onTextChanged(mContent, offset + 2, 0, 1);
+            mWatcher.afterTextChanged(mContent);
+
+            // No formatting should be applied/removed
+            assertEquals(false, mUpdateSpansWasCalled);
+
+
+            // -- Test typing in a closing tag symbol
+            mContent = new SpannableStringBuilder(initialText + "</b>");
+
+            mWatcher.onTextChanged(mContent, offset + 3, 0, 1);
+            mWatcher.afterTextChanged(mContent);
+
+            assertEquals(offset, mSpanRange.getOpeningTagLoc());
+            assertEquals(offset + 4, mSpanRange.getClosingTagLoc());
+        }
+    }
+
+    @Test
+    public void testTypingInTagWithSurroundingTags() {
+        // Spans in this case will be applied until the end of the next tag
+        // This fixes a pasting bug and might be refined later
+        // -- Test typing in the opening tag symbol
+        mContent = new SpannableStringBuilder("some <del>text</del> < <b>bold text</b>");
+
+        mWatcher.onTextChanged(mContent, 21, 0, 1); // Added lone "<"
+        mWatcher.afterTextChanged(mContent);
+
+        assertEquals(21, mSpanRange.getOpeningTagLoc());
+        assertEquals(26, mSpanRange.getClosingTagLoc());
+
+
+        // -- Test typing in the tag name
+        mContent = new SpannableStringBuilder("some <del>text</del> <i <b>bold text</b>");
+
+        mWatcher.onTextChanged(mContent, 22, 0, 1);
+        mWatcher.afterTextChanged(mContent);
+
+        assertEquals(21, mSpanRange.getOpeningTagLoc());
+        assertEquals(27, mSpanRange.getClosingTagLoc());
+
+
+        // -- Test typing in the closing tag symbol
+        mContent = new SpannableStringBuilder("some <del>text</del> <i> <b>bold text</b>");
+
+        mWatcher.onTextChanged(mContent, 23, 0, 1);
+        mWatcher.afterTextChanged(mContent);
+
+        assertEquals(21, mSpanRange.getOpeningTagLoc());
+        assertEquals(28, mSpanRange.getClosingTagLoc());
+    }
+
+    @Test
+    public void testTypingInLoneClosingSymbol() {
+        // -- Test typing in an isolated closing tag symbol
+        mContent = new SpannableStringBuilder("some text >");
+
+        mWatcher.onTextChanged(mContent, 10, 0, 1);
+        mWatcher.afterTextChanged(mContent);
+
+        // No formatting should be applied/removed
+        assertEquals(false, mUpdateSpansWasCalled);
+
+
+        // -- Test typing in an isolated closing tag symbol with surrounding tags
+        mContent = new SpannableStringBuilder("some <b>tex>t</b>");
+
+        mWatcher.onTextChanged(mContent, 11, 0, 1); // Added lone ">"
+        mWatcher.afterTextChanged(mContent);
+
+        // The span in this case will be applied from the start of the previous tag to the end of the next tag
+        assertEquals(5, mSpanRange.getOpeningTagLoc());
+        assertEquals(17, mSpanRange.getClosingTagLoc());
+    }
+
+    @Test
+    public void testTypingInEntity() {
+        // Test with several different cases of pre-existing text
+        String[] previousTextCases = new String[]{"", "plain text", "&rho;",
+                "<blockquote>some existing content &dagger;</blockquote> "};
+        for (String initialText : previousTextCases) {
+            int offset = initialText.length();
+            mUpdateSpansWasCalled = false;
+
+            // -- Test typing in the entity's opening '&'
+            mContent = new SpannableStringBuilder(initialText + "&");
+
+            mWatcher.onTextChanged(mContent, offset, 0, 1);
+            mWatcher.afterTextChanged(mContent);
+
+            // No formatting should be applied/removed
+            assertEquals(false, mUpdateSpansWasCalled);
+
+
+            // -- Test typing in the entity's main text
+            mContent = new SpannableStringBuilder(initialText + "&amp");
+
+            mWatcher.onTextChanged(mContent, offset + 3, 0, 1);
+            mWatcher.afterTextChanged(mContent);
+
+            // No formatting should be applied/removed
+            assertEquals(false, mUpdateSpansWasCalled);
+
+
+            // -- Test typing in the entity's closing ';'
+            mContent = new SpannableStringBuilder(initialText + "&amp;");
+
+            mWatcher.onTextChanged(mContent, offset + 4, 0, 1);
+            mWatcher.afterTextChanged(mContent);
+
+            assertEquals(offset, mSpanRange.getOpeningTagLoc());
+            assertEquals(offset + 5, mSpanRange.getClosingTagLoc());
+        }
+    }
+
+    @Test
+    public void testAddingTagFromFormatBar() {
+        // -- Test adding a tag to an empty document
+        mContent = new SpannableStringBuilder("<b>");
+
+        mWatcher.onTextChanged(mContent, 0, 0, 3);
+        mWatcher.afterTextChanged(mContent);
+
+        assertEquals(0, mSpanRange.getOpeningTagLoc());
+        assertEquals(3, mSpanRange.getClosingTagLoc());
+
+
+        // -- Test adding a tag at the end of a document with text
+        mContent = new SpannableStringBuilder("stuff<b>");
+
+        mWatcher.onTextChanged(mContent, 5, 0, 3);
+        mWatcher.afterTextChanged(mContent);
+
+        assertEquals(5, mSpanRange.getOpeningTagLoc());
+        assertEquals(8, mSpanRange.getClosingTagLoc());
+
+
+        // -- Test adding a tag at the end of a document containing other html
+        mContent = new SpannableStringBuilder("some text <i>italics</i> <b>");
+
+        mWatcher.onTextChanged(mContent, 25, 0, 3); // Added "<b>"
+        mWatcher.afterTextChanged(mContent);
+
+        assertEquals(25, mSpanRange.getOpeningTagLoc());
+        assertEquals(28, mSpanRange.getClosingTagLoc());
+
+
+        // -- Test adding a tag at the start of a document with text
+        mContent = new SpannableStringBuilder("<b>some text");
+
+        mWatcher.onTextChanged(mContent, 0, 0, 3);
+        mWatcher.afterTextChanged(mContent);
+
+        assertEquals(0, mSpanRange.getOpeningTagLoc());
+        assertEquals(3, mSpanRange.getClosingTagLoc());
+
+
+        // -- Test adding a tag at the start of a document containing other html
+        mContent = new SpannableStringBuilder("<b>some text <i>italics</i>");
+
+        mWatcher.onTextChanged(mContent, 0, 0, 3);
+        mWatcher.afterTextChanged(mContent);
+
+        assertEquals(0, mSpanRange.getOpeningTagLoc());
+        assertEquals(3, mSpanRange.getClosingTagLoc());
+
+
+        // -- Test adding a tag within another tag pair
+        mContent = new SpannableStringBuilder("<b>some <i>text</b>");
+
+        mWatcher.onTextChanged(mContent, 8, 0, 3); // Added <i>
+        mWatcher.afterTextChanged(mContent);
+
+        assertEquals(8, mSpanRange.getOpeningTagLoc());
+        assertEquals(11, mSpanRange.getClosingTagLoc());
+
+
+        // -- Test adding a closing tag within another tag pair
+        mContent = new SpannableStringBuilder("<b>some <i>text</i></b>");
+
+        mWatcher.onTextChanged(mContent, 15, 0, 4); // Added "</i>"
+        mWatcher.afterTextChanged(mContent);
+
+        assertEquals(15, mSpanRange.getOpeningTagLoc());
+        assertEquals(19, mSpanRange.getClosingTagLoc());
+    }
+
+    @Test
+    public void testAddingListTagsFromFormatBar() {
+        // -- Test adding a list tag to an empty document
+        mContent = new SpannableStringBuilder("<ul>\n\t<li>");
+
+        mWatcher.onTextChanged(mContent, 0, 0, 10);
+        mWatcher.afterTextChanged(mContent);
+
+        assertEquals(0, mSpanRange.getOpeningTagLoc());
+        assertEquals(10, mSpanRange.getClosingTagLoc());
+
+
+        // -- Test adding a closing list tag
+        mContent = new SpannableStringBuilder("<ul>\n" + //5
+                "\t<li>list item</li>\n" + //20
+                "\t<li>another list item</li>\n" + //22
+                "</ul>");
+
+        mWatcher.onTextChanged(mContent, 47, 0, 11); // Added "</li>\n</ul>"
+        mWatcher.afterTextChanged(mContent);
+
+        assertEquals(47, mSpanRange.getOpeningTagLoc());
+        assertEquals(58, mSpanRange.getClosingTagLoc());
+    }
+
+    @Test
+    public void testDeletingPartsOfTag() {
+        // -- Test deleting different characters within a tag
+        mContent = new SpannableStringBuilder("<b>stuff</b>");
+
+        int deletedChar = 0;
+        mWatcher.beforeTextChanged(mContent, deletedChar, 1, 0);
+        // Deleted characters are removed from the string between beforeTextChanged() and onTextChanged()
+        mContent.delete(deletedChar, deletedChar + 1);
+        mWatcher.onTextChanged(mContent, deletedChar, 1, 0);
+        mWatcher.afterTextChanged(mContent);
+
+        // "b>" should be re-styled
+        assertEquals(0, mSpanRange.getOpeningTagLoc());
+        assertEquals(2, mSpanRange.getClosingTagLoc());
+
+        for (int i = 8; i < 12; i++) {
+            mContent = new SpannableStringBuilder("<b>stuff</b>");
+
+            mWatcher.beforeTextChanged(mContent, i, 1, 0);
+            mContent.delete(i, i + 1);
+            mWatcher.afterTextChanged(mContent);
+
+            // Style should be updated starting from the end of 'stuff'
+            assertEquals(8, mSpanRange.getOpeningTagLoc());
+            assertEquals(mContent.length(), mSpanRange.getClosingTagLoc());
+        }
+    }
+
+    @Test
+    public void testPasteTagPair() {
+        // -- Test pasting in a set of opening and closing tags at the end of the document
+        mContent = new SpannableStringBuilder("text <b></b>");
+
+        mWatcher.onTextChanged(mContent, 5, 0, 7);
+        mWatcher.afterTextChanged(mContent);
+
+        assertEquals(5, mSpanRange.getOpeningTagLoc());
+        assertEquals(12, mSpanRange.getClosingTagLoc());
+    }
+
+    @Test
+    public void testCutAndPasteTagPart() {
+        // -- Test cutting a tag and part of another tag from the document
+        mContent = new SpannableStringBuilder("test <b></b> <i>italics</i>");
+
+        mWatcher.beforeTextChanged(mContent, 5, 4, 0); // Deleted "<b><"
+        mContent.delete(5, 9);
+        mWatcher.onTextChanged(mContent, 5, 4, 0);
+        mWatcher.afterTextChanged(mContent);
+
+        assertEquals(5, mSpanRange.getOpeningTagLoc());
+        assertEquals(8, mSpanRange.getClosingTagLoc());
+
+
+        // -- Test pasting the cut text back in
+        mContent = new SpannableStringBuilder("test <b></b> <i>italics</i>");
+        mWatcher.onTextChanged(mContent, 5, 0, 4); // Pasted "<b><" back in
+        mWatcher.afterTextChanged(mContent);
+
+        assertEquals(5, mSpanRange.getOpeningTagLoc());
+        assertEquals(12, mSpanRange.getClosingTagLoc());
+    }
+
+    @Test
+    public void testCutAndPasteTagPartReplacingText() {
+        // -- Test pasting cut text while text is selected
+        // Pasted "<b><", replacing "st " of "test "
+        mContent = new SpannableStringBuilder("test /b> <i>italics</i>");
+        mWatcher.beforeTextChanged(mContent, 2, 3, 4);
+        mContent = new SpannableStringBuilder("te<b></b> <i>italics</i>");
+        mWatcher.onTextChanged(mContent, 2, 3, 4);
+        mWatcher.afterTextChanged(mContent);
+
+        // Should re-style whole document
+        assertEquals(0, mSpanRange.getOpeningTagLoc());
+        assertEquals(mContent.length(), mSpanRange.getClosingTagLoc());
+
+
+        // -- Test pasting cut text while text is selected, case 2
+        // Pasted "i>", replacing "test "
+        mContent = new SpannableStringBuilder("<test italics</i>");
+        mWatcher.beforeTextChanged(mContent, 1, 5, 2);
+        mContent = new SpannableStringBuilder("<i>italics</i>");
+        mWatcher.onTextChanged(mContent, 1, 5, 2);
+        mWatcher.afterTextChanged(mContent);
+
+        // Should re-style whole document
+        assertEquals(0, mSpanRange.getOpeningTagLoc());
+        assertEquals(mContent.length(), mSpanRange.getClosingTagLoc());
+    }
+
+    @Test
+    public void testNoChange() {
+
+        mWatcher.beforeTextChanged("sample", 0, 0, 0);
+        mWatcher.onTextChanged("sample", 0, 0, 0);
+        mWatcher.afterTextChanged(null);
+
+        // No formatting should be applied/removed
+        assertEquals(false, mUpdateSpansWasCalled);
+    }
+
+    @Test
+    public void testUpdateSpans() {
+        // -- Test tag styling
+        HtmlStyleTextWatcher watcher = new HtmlStyleTextWatcher();
+        Spannable content = new SpannableStringBuilder("<b>stuff</b>");
+        watcher.updateSpans(content, new HtmlStyleTextWatcher.SpanRange(0, 3));
+
+        assertEquals(1, content.getSpans(0, 3, ForegroundColorSpan.class).length);
+
+        // -- Test entity styling
+        content = new SpannableStringBuilder("text &amp; more text");
+        watcher.updateSpans(content, new HtmlStyleTextWatcher.SpanRange(5, 10));
+
+        assertEquals(1, content.getSpans(5, 10, ForegroundColorSpan.class).length);
+        assertEquals(1, content.getSpans(5, 10, StyleSpan.class).length);
+        assertEquals(1, content.getSpans(5, 10, RelativeSizeSpan.class).length);
+
+        // -- Test comment styling
+        content = new SpannableStringBuilder("text <!--comment--> more text");
+        watcher.updateSpans(content, new HtmlStyleTextWatcher.SpanRange(5, 19));
+
+        assertEquals(1, content.getSpans(5, 19, ForegroundColorSpan.class).length);
+        assertEquals(1, content.getSpans(5, 19, StyleSpan.class).length);
+        assertEquals(1, content.getSpans(5, 19, RelativeSizeSpan.class).length);
+
+        content = new SpannableStringBuilder("<b>stuff</b>");
+        watcher.updateSpans(content, new HtmlStyleTextWatcher.SpanRange(0, 3));
+
+        watcher.updateSpans(content, new HtmlStyleTextWatcher.SpanRange(0, 42));
+        assertEquals(1, content.getSpans(0, 3, ForegroundColorSpan.class).length);
+
+    }
+
+    private class HtmlStyleTextWatcherForTests extends HtmlStyleTextWatcher {
+        @Override
+        protected void updateSpans(Spannable s, SpanRange spanRange) {
+            mSpanRange = spanRange;
+            mUpdateSpansWasCalled = true;
+        }
+    }
+}
diff --git a/WordPressEditor/src/test/java/org/wordpress/android/editor/HtmlStyleUtilsTest.java b/WordPressEditor/src/test/java/org/wordpress/android/editor/HtmlStyleUtilsTest.java
new file mode 100644
index 000000000000..abd90f882cb6
--- /dev/null
+++ b/WordPressEditor/src/test/java/org/wordpress/android/editor/HtmlStyleUtilsTest.java
@@ -0,0 +1,92 @@
+package org.wordpress.android.editor;
+
+import android.text.Spannable;
+import android.text.SpannableStringBuilder;
+import android.text.Spanned;
+import android.text.style.CharacterStyle;
+import android.text.style.ForegroundColorSpan;
+import android.text.style.RelativeSizeSpan;
+import android.text.style.StyleSpan;
+import android.text.style.UnderlineSpan;
+
+import org.junit.Test;
+import org.junit.runner.RunWith;
+import org.robolectric.RobolectricTestRunner;
+import org.robolectric.annotation.Config;
+
+import static org.junit.Assert.assertEquals;
+
+@Config(emulateSdk = 18)
+@RunWith(RobolectricTestRunner.class)
+public class HtmlStyleUtilsTest {
+
+    @Test
+    public void testBulkStyling() {
+        // -- Test bulk styling
+        Spannable content = new SpannableStringBuilder("text <b>bold</b> &amp; <!--a comment--> <a href=\"website\">link</a>");
+        HtmlStyleUtils.styleHtmlForDisplay(content);
+
+        assertEquals(0, content.getSpans(0, 5, CharacterStyle.class).length); // 'text '
+
+        assertEquals(1, content.getSpans(5, 8, ForegroundColorSpan.class).length); // '<b>'
+
+        assertEquals(1, content.getSpans(12, 16, ForegroundColorSpan.class).length); // '</b>'
+
+        assertEquals(1, content.getSpans(17, 22, ForegroundColorSpan.class).length); // '&amp;'
+        assertEquals(1, content.getSpans(17, 22, StyleSpan.class).length); // '&amp;'
+        assertEquals(1, content.getSpans(17, 22, RelativeSizeSpan.class).length); // '&amp;'
+
+        assertEquals(1, content.getSpans(23, 39, ForegroundColorSpan.class).length); // '<!--a comment-->'
+        assertEquals(1, content.getSpans(23, 39, StyleSpan.class).length); // '<!--a comment-->'
+        assertEquals(1, content.getSpans(23, 39, RelativeSizeSpan.class).length); // '<!--a comment-->'
+
+        assertEquals(2, content.getSpans(40, 58, ForegroundColorSpan.class).length); // '<a href="website">'
+        assertEquals(1, content.getSpans(40, 48, ForegroundColorSpan.class).length); // '<a href='
+        // Attribute span is applied on top of tag span, so there should be 2 ForegroundColorSpans present
+        assertEquals(2, content.getSpans(48, 57, ForegroundColorSpan.class).length); // '"website"'
+        assertEquals(1, content.getSpans(57, 58, ForegroundColorSpan.class).length); // '>'
+
+        assertEquals(0, content.getSpans(58, 62, CharacterStyle.class).length); // 'link'
+
+        assertEquals(1, content.getSpans(62, 66, ForegroundColorSpan.class).length); // '</a>'
+    }
+
+    @Test
+    public void testClearSpans() {
+        Spannable content = new SpannableStringBuilder("<b>text &amp;");
+
+        HtmlStyleUtils.styleHtmlForDisplay(content);
+
+        assertEquals(1, content.getSpans(0, 3, ForegroundColorSpan.class).length); // '<b>'
+
+        assertEquals(1, content.getSpans(9, 14, ForegroundColorSpan.class).length); // '&amp;'
+        assertEquals(1, content.getSpans(9, 14, StyleSpan.class).length); // '&amp;'
+        assertEquals(1, content.getSpans(9, 14, RelativeSizeSpan.class).length); // '&amp;'
+
+        HtmlStyleUtils.clearSpans(content, 9, 14);
+
+        assertEquals(1, content.getSpans(0, 3, ForegroundColorSpan.class).length);
+
+        assertEquals(0, content.getSpans(9, 14, ForegroundColorSpan.class).length);
+        assertEquals(0, content.getSpans(9, 14, StyleSpan.class).length);
+        assertEquals(0, content.getSpans(9, 14, RelativeSizeSpan.class).length);
+
+        HtmlStyleUtils.clearSpans(content, 0, 3);
+
+        assertEquals(0, content.getSpans(0, 3, ForegroundColorSpan.class).length);
+
+
+    }
+
+    @Test
+    public void testClearSpansShouldIgnoreUnderline() {
+        // clearSpans() should ignore UnderlineSpan as it's used by the system for spelling suggestions
+        Spannable content = new SpannableStringBuilder("test");
+
+        content.setSpan(new UnderlineSpan(), 0, 4, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
+
+        HtmlStyleUtils.clearSpans(content, 0, 4);
+
+        assertEquals(1, content.getSpans(0, 4, UnderlineSpan.class).length);
+    }
+}
diff --git a/example/src/main/java/org/wordpress/example/EditorExampleActivity.java b/example/src/main/java/org/wordpress/example/EditorExampleActivity.java
index a80e52642ae5..33368ef6f9cb 100644
--- a/example/src/main/java/org/wordpress/example/EditorExampleActivity.java
+++ b/example/src/main/java/org/wordpress/example/EditorExampleActivity.java
@@ -14,6 +14,8 @@ public class EditorExampleActivity extends AppCompatActivity implements EditorFr
     public static final String TITLE_PARAM = "TITLE_PARAM";
     public static final String CONTENT_PARAM = "CONTENT_PARAM";
     public static final String DRAFT_PARAM = "DRAFT_PARAM";
+    public static final String TITLE_PLACEHOLDER_PARAM = "TITLE_PLACEHOLDER_PARAM";
+    public static final String CONTENT_PLACEHOLDER_PARAM = "CONTENT_PLACEHOLDER_PARAM";
     public static final int USE_NEW_EDITOR = 1;
     public static final int USE_LEGACY_EDITOR = 2;
 
@@ -61,6 +63,8 @@ public void onEditorFragmentInitialized() {
         boolean isLocalDraft = getIntent().getBooleanExtra(DRAFT_PARAM, true);
         mEditorFragment.setTitle(title);
         mEditorFragment.setContent(content);
+        mEditorFragment.setTitlePlaceholder(getIntent().getStringExtra(TITLE_PLACEHOLDER_PARAM));
+        mEditorFragment.setContentPlaceholder(getIntent().getStringExtra(CONTENT_PLACEHOLDER_PARAM));
         mEditorFragment.setLocalDraft(isLocalDraft);
     }
 
diff --git a/example/src/main/java/org/wordpress/example/MainExampleActivity.java b/example/src/main/java/org/wordpress/example/MainExampleActivity.java
index 296001fb71f4..80a57d6ed993 100644
--- a/example/src/main/java/org/wordpress/example/MainExampleActivity.java
+++ b/example/src/main/java/org/wordpress/example/MainExampleActivity.java
@@ -28,6 +28,27 @@ protected void onCreate(Bundle savedInstanceState) {
                 bundle.putString(EditorExampleActivity.TITLE_PARAM, getString(R.string.example_post_visual_title));
                 bundle.putString(EditorExampleActivity.CONTENT_PARAM, Utils.getHtmlFromFile(mActivity,
                         "example-content.html"));
+                bundle.putString(EditorExampleActivity.TITLE_PLACEHOLDER_PARAM,
+                        getString(R.string.example_post_title_placeholder));
+                bundle.putString(EditorExampleActivity.CONTENT_PLACEHOLDER_PARAM,
+                        getString(R.string.example_post_content_placeholder));
+                bundle.putInt(EditorExampleActivity.EDITOR_PARAM, EditorExampleActivity.USE_NEW_EDITOR);
+                intent.putExtras(bundle);
+                startActivity(intent);
+            }
+        });
+
+        Button newEditorPostEmpty = (Button) findViewById(R.id.new_editor_post_empty);
+        newEditorPostEmpty.setOnClickListener(new OnClickListener() {
+            @Override public void onClick(View v) {
+                Intent intent = new Intent(MainExampleActivity.this, EditorExampleActivity.class);
+                Bundle bundle = new Bundle();
+                bundle.putString(EditorExampleActivity.TITLE_PARAM, "");
+                bundle.putString(EditorExampleActivity.CONTENT_PARAM, "");
+                bundle.putString(EditorExampleActivity.TITLE_PLACEHOLDER_PARAM,
+                        getString(R.string.example_post_title_placeholder));
+                bundle.putString(EditorExampleActivity.CONTENT_PLACEHOLDER_PARAM,
+                        getString(R.string.example_post_content_placeholder));
                 bundle.putInt(EditorExampleActivity.EDITOR_PARAM, EditorExampleActivity.USE_NEW_EDITOR);
                 intent.putExtras(bundle);
                 startActivity(intent);
diff --git a/example/src/main/res/layout/activity_example.xml b/example/src/main/res/layout/activity_example.xml
index 44d2bcd187ad..b94cea8ab241 100644
--- a/example/src/main/res/layout/activity_example.xml
+++ b/example/src/main/res/layout/activity_example.xml
@@ -13,6 +13,15 @@
         android:layout_marginTop="32dp"
         android:layout_centerHorizontal="true"/>
 
+    <Button
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="New Editor - Empty Post"
+        android:id="@+id/new_editor_post_empty"
+        android:layout_marginTop="32dp"
+        android:layout_centerHorizontal="true"
+        android:layout_below="@id/new_editor_post_1"/>
+
     <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
@@ -20,7 +29,7 @@
         android:id="@+id/legacy_editor_post_1_local"
         android:layout_marginTop="32dp"
         android:layout_centerHorizontal="true"
-        android:layout_below="@id/new_editor_post_1"/>
+        android:layout_below="@id/new_editor_post_empty"/>
 
     <Button
         android:layout_width="wrap_content"
diff --git a/example/src/main/res/values/strings.xml b/example/src/main/res/values/strings.xml
index 91f0440a703d..d2a5cedf964c 100644
--- a/example/src/main/res/values/strings.xml
+++ b/example/src/main/res/values/strings.xml
@@ -4,6 +4,8 @@
     <string name="starting_legacy_editor">Starting legacy editor</string>
     <string name="starting_new_editor">Starting new editor</string>
     <string name="example_post_visual_title">I\'m editing a post!</string>
+    <string name="example_post_title_placeholder">Post title</string>
+    <string name="example_post_content_placeholder">Share your story here…</string>
     <string name="example_post_1_title">Post 1</string>
     <string name="example_post_1_content">Post 1 Content:\nBest post ever!</string>
     <string name="example_post_2_title">Post 2</string>
diff --git a/libs/editor-common/assets/ZSSRichTextEditor.js b/libs/editor-common/assets/ZSSRichTextEditor.js
index 61684103ef5f..7204ee137f2b 100755
--- a/libs/editor-common/assets/ZSSRichTextEditor.js
+++ b/libs/editor-common/assets/ZSSRichTextEditor.js
@@ -2019,7 +2019,6 @@ function ZSSField(wrappedObject) {
 
     this.multiline = false;
     this.wrappedObject = wrappedObject;
-    this.bodyPlaceholderColor = '#000000';
 
     if (this.wrappedDomNode().hasAttribute('nostyle')) {
         this.hasNoStyle = true;
@@ -2055,7 +2054,7 @@ ZSSField.prototype.emptyFieldIfNoContents = function() {
     var nbsp = '\xa0';
     var text = this.wrappedObject.text().replace(nbsp, '');
 
-    if (text.length == 0) {
+    if (text.length == 0 || text == '\u000A') {
 
         var hasChildImages = (this.wrappedObject.find('img').length > 0);
         var hasUnorderedList = (this.wrappedObject.find('ul').length > 0);
@@ -2067,17 +2066,12 @@ ZSSField.prototype.emptyFieldIfNoContents = function() {
     }
 };
 
-ZSSField.prototype.emptyFieldIfNoContentsAndRefreshPlaceholderColor = function() {
-    this.emptyFieldIfNoContents();
-    this.refreshPlaceholderColor();
-};
-
 // MARK: - Handle event listeners
 
 ZSSField.prototype.handleBlurEvent = function(e) {
     ZSSEditor.focusedField = null;
 
-    this.emptyFieldIfNoContentsAndRefreshPlaceholderColor();
+    this.emptyFieldIfNoContents();
 
     this.callback("callback-focus-out");
 };
@@ -2085,10 +2079,6 @@ ZSSField.prototype.handleBlurEvent = function(e) {
 ZSSField.prototype.handleFocusEvent = function(e) {
     ZSSEditor.focusedField = this;
 
-    // IMPORTANT: this is the only case where checking the current focus will not work.
-    // We sidestep this issue by indicating that the field is about to gain focus.
-    //
-    this.refreshPlaceholderColorAboutToGainFocus(true);
     this.callback("callback-focus-in");
 };
 
@@ -2115,7 +2105,7 @@ ZSSField.prototype.handleInputEvent = function(e) {
     // as the field could become empty because of a cut or paste operation as well as a key press.
     // This event takes care of all cases.
     //
-    this.emptyFieldIfNoContentsAndRefreshPlaceholderColor();
+    this.emptyFieldIfNoContents();
 
     var joinedArguments = ZSSEditor.getJoinedFocusedFieldIdAndCaretArguments();
     ZSSEditor.callback('callback-selection-changed', joinedArguments);
@@ -2371,7 +2361,6 @@ ZSSField.prototype.strippedHTML = function() {
 ZSSField.prototype.setPlainText = function(text) {
     ZSSEditor.currentEditingImage = null;
     this.wrappedObject.text(text);
-    this.refreshPlaceholderColor();
 };
 
 ZSSField.prototype.setHTML = function(html) {
@@ -2379,7 +2368,6 @@ ZSSField.prototype.setHTML = function(html) {
     var mutatedHTML = wp.loadText(html);
     mutatedHTML = ZSSEditor.applyVisualFormatting(mutatedHTML);
     this.wrappedObject.html(mutatedHTML);
-    this.refreshPlaceholderColor();
 };
 
 // MARK: - Placeholder
@@ -2389,43 +2377,9 @@ ZSSField.prototype.hasPlaceholderText = function() {
 };
 
 ZSSField.prototype.setPlaceholderText = function(placeholder) {
-
     this.wrappedObject.attr('placeholderText', placeholder);
 };
 
-ZSSField.prototype.setPlaceholderColor = function(color) {
-    this.bodyPlaceholderColor = color;
-    this.refreshPlaceholderColor();
-};
-
-ZSSField.prototype.refreshPlaceholderColor = function() {
-     this.refreshPlaceholderColorForAttributes(this.hasPlaceholderText(),
-                                               this.isFocused(),
-                                               this.isEmpty());
-};
-
-ZSSField.prototype.refreshPlaceholderColorAboutToGainFocus = function(willGainFocus) {
-    this.refreshPlaceholderColorForAttributes(this.hasPlaceholderText(),
-                                              willGainFocus,
-                                              this.isEmpty());
-};
-
-ZSSField.prototype.refreshPlaceholderColorForAttributes = function(hasPlaceholderText, isFocused, isEmpty) {
-
-    var shouldColorText = hasPlaceholderText && isEmpty;
-
-    if (shouldColorText) {
-        if (isFocused) {
-            this.wrappedObject.css('color', this.bodyPlaceholderColor);
-        } else {
-            this.wrappedObject.css('color', this.bodyPlaceholderColor);
-        }
-    } else {
-        this.wrappedObject.css('color', '');
-    }
-
-};
-
 // MARK: - Wrapped Object
 
 ZSSField.prototype.wrappedDomNode = function() {
diff --git a/libs/editor-common/assets/editor-android.css b/libs/editor-common/assets/editor-android.css
index 054e561ecdba..3209d93959a6 100644
--- a/libs/editor-common/assets/editor-android.css
+++ b/libs/editor-common/assets/editor-android.css
@@ -1,13 +1,13 @@
 @media screen and (min-width: 720px) and (max-width: 1279px) {
     body {
-        padding-left:80px;
-        padding-right:80px;
+        padding-left:90px;
+        padding-right:90px;
     }
 }
 
 @media screen and (min-width: 1280px){
     body {
-        padding-left:160px;
-        padding-right:160px;
+        padding-left:170px;
+        padding-right:170px;
     }
 }
\ No newline at end of file
diff --git a/libs/editor-common/assets/editor.css b/libs/editor-common/assets/editor.css
index 4cdf2a35c2aa..2b43fca68d02 100644
--- a/libs/editor-common/assets/editor.css
+++ b/libs/editor-common/assets/editor.css
@@ -1,24 +1,56 @@
 @font-face {
     font-family: 'OpenSans';
-    src: local("OpenSans");
+    src: local("OpenSans"),
+         url('fonts/OpenSans-Regular.ttf');
     font-weight: normal;
     font-style: normal;
 }
 @font-face {
     font-family: 'OpenSans';
-    src: local("OpenSans-Italic");
+    src: local("OpenSans-Italic"),
+         url('fonts/OpenSans-Italic.ttf');
     font-weight: normal;
     font-style: italic;
 }
 @font-face {
     font-family: 'OpenSans';
-    src: local("OpenSans-Bold");
+    src: local("OpenSans-Bold"),
+         url('fonts/OpenSans-Bold.ttf');
     font-weight: bold;
     font-style: normal;
 }
 @font-face {
     font-family: 'OpenSans';
-    src: local("OpenSans-BoldItalic");
+    src: local("OpenSans-BoldItalic"),
+         url('fonts/OpenSans-BoldItalic.ttf');
+    font-weight: bold;
+    font-style: italic;
+}
+@font-face {
+    font-family: 'Merriweather';
+    src: local("Merriweather Light"),
+         url('fonts/Merriweather-Light.ttf');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Merriweather';
+    src: local("Merriweather-Italic"),
+         url('fonts/Merriweather-Italic.otf');
+    font-weight: normal;
+    font-style: italic;
+}
+@font-face {
+    font-family: 'Merriweather';
+    src: local("Merriweather-Bold"),
+         url('fonts/Merriweather-Bold.ttf');
+    font-weight: bold;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Merriweather';
+    src: local("Merriweather-BoldItalic"),
+         url('fonts/Merriweather-BoldItalic.otf');
     font-weight: bold;
     font-style: italic;
 }
@@ -35,16 +67,16 @@ html {
 
 html, body {
     margin:0;
-    font-family:OpenSans, sans-serif;
+    font-family:'Merriweather', sans-serif;
     font-size:1em;
     color:#2D2D2D;
 }
 
 body {
-    padding-left:5px;
-    padding-right:5px;
-    padding-top: 0px;
-    padding-bottom: 0px;
+    padding-left:15px;
+    padding-right:15px;
+    padding-top: 15px;
+    padding-bottom: 5px;
     overflow-y: auto;
     min-height: 100vh;
     word-wrap: break-word;
@@ -59,8 +91,8 @@ p {
 hr {
     border: none;
     height: 1px;
-    color: #e8f0f5;
-    background-color: #e8f0f5;
+    color: #E9EFF3;
+    background-color: #E9EFF3;
     width: 100%;
 }
 
@@ -141,6 +173,7 @@ span.img_container.failed::after {
     padding:27px 0 0 0;
     top:50%;
     left:0%;
+    font-family:OpenSans;
     font-size:20px;
     font-weight:600;
     text-align: center;
@@ -159,6 +192,7 @@ span.img_container.failed.largeFail::after {
 }
 
 span.img_container.failed.smallFail::after {
+    font-family:OpenSans;
     content:attr(data-failed);
 }
 
@@ -203,6 +237,7 @@ span.img_container.failed.smallFail::after {
 }
 
 .edit-container .edit-content {
+    font-family:OpenSans;
     font-size:20px;
     font-weight:600;
     text-align: center;
@@ -245,13 +280,13 @@ progress.wp_media_indicator.failed::-webkit-progress-value {
 
 
 div.field[contenteditable] {
-    padding: 15px 10px 5px 10px;
     box-sizing: border-box;
     font-size: 16px;
 }
 
 div.field[placeholderText][contenteditable=true]:empty:before {
     content: attr(placeholderText);
+    color: #87a6bc;
     transition: 0.2s ease opacity;
 }
 
@@ -261,18 +296,21 @@ div.field[placeholderText][contenteditable=true]:empty:focus:before {
 
 #separatorDiv {
     -webkit-user-select: none;
-    padding-left: 10px;
-    padding-right: 10px;
+    padding-top: 5px;
+    padding-bottom: 15px;
 }
 
 #zss_field_title, #zss_field_title p {
     font-family:'Merriweather', serif;
     font-weight: bold;
-    font-size: 18px;
+    font-size: 24px;
+    line-height: 32px;
     margin-bottom: 0px;
 }
 
 #zss_field_content {
+    font-size: 16px;
+    line-height: 24px;
     margin-bottom: 10px;
 }
 
@@ -290,14 +328,4 @@ div.field[placeholderText][contenteditable=true]:empty:focus:before {
 .ipad_body {
     padding-left: 80px;
     padding-right: 80px;
-}
-
-.ipad_field_title {
-    font-size: 1.3em;
-}
-
-.ipad_field_content {
-    font-size: 1.125em;
-    line-height: 28px;
-}
 }
\ No newline at end of file
diff --git a/libs/editor-common/assets/fonts/Merriweather-Bold.ttf b/libs/editor-common/assets/fonts/Merriweather-Bold.ttf
new file mode 100755
index 000000000000..979840225689
Binary files /dev/null and b/libs/editor-common/assets/fonts/Merriweather-Bold.ttf differ
diff --git a/libs/editor-common/assets/fonts/Merriweather-BoldItalic.otf b/libs/editor-common/assets/fonts/Merriweather-BoldItalic.otf
new file mode 100755
index 000000000000..fde539763084
Binary files /dev/null and b/libs/editor-common/assets/fonts/Merriweather-BoldItalic.otf differ
diff --git a/libs/editor-common/assets/fonts/Merriweather-Italic.otf b/libs/editor-common/assets/fonts/Merriweather-Italic.otf
new file mode 100755
index 000000000000..6cb3d5c68af3
Binary files /dev/null and b/libs/editor-common/assets/fonts/Merriweather-Italic.otf differ
diff --git a/libs/editor-common/assets/fonts/Merriweather-Light.ttf b/libs/editor-common/assets/fonts/Merriweather-Light.ttf
new file mode 100755
index 000000000000..e4b03dd19331
Binary files /dev/null and b/libs/editor-common/assets/fonts/Merriweather-Light.ttf differ
diff --git a/libs/editor-common/assets/fonts/Merriweather-Regular.ttf b/libs/editor-common/assets/fonts/Merriweather-Regular.ttf
new file mode 100755
index 000000000000..f61c2fed82cc
Binary files /dev/null and b/libs/editor-common/assets/fonts/Merriweather-Regular.ttf differ
diff --git a/libs/editor-common/assets/fonts/OpenSans-Bold.ttf b/libs/editor-common/assets/fonts/OpenSans-Bold.ttf
new file mode 100755
index 000000000000..fd79d43bea02
Binary files /dev/null and b/libs/editor-common/assets/fonts/OpenSans-Bold.ttf differ
diff --git a/libs/editor-common/assets/fonts/OpenSans-BoldItalic.ttf b/libs/editor-common/assets/fonts/OpenSans-BoldItalic.ttf
new file mode 100755
index 000000000000..9bc800958a42
Binary files /dev/null and b/libs/editor-common/assets/fonts/OpenSans-BoldItalic.ttf differ
diff --git a/libs/editor-common/assets/fonts/OpenSans-Italic.ttf b/libs/editor-common/assets/fonts/OpenSans-Italic.ttf
new file mode 100755
index 000000000000..c90da48ff3b8
Binary files /dev/null and b/libs/editor-common/assets/fonts/OpenSans-Italic.ttf differ
diff --git a/libs/editor-common/assets/fonts/OpenSans-Regular.ttf b/libs/editor-common/assets/fonts/OpenSans-Regular.ttf
new file mode 100755
index 000000000000..a135120e0927
Binary files /dev/null and b/libs/editor-common/assets/fonts/OpenSans-Regular.ttf differ