Editor - Move Undo/Redo to the header

WordPress/src/androidTest/java/org/wordpress/android/e2e/BlockEditorTests.kt

@@ -72,4 +72,42 @@ class BlockEditorTests : BaseTest() {
             .switchToVisualMode()
             .verifyPostElementText(mPostText)
     }
+
+    @Test
+    fun e2eBlockEditorCanUndoChanges() {
+        val title = "blockEditorCanUndoChanges"
+        MySitesPage()
+            .startNewPost()
+        BlockEditorPage()
+            .waitForTitleDisplayed()
+            .enterTitle(title)
+            .enterParagraphText(mPostText)
+            .verifyContentStructure(1, mPostText.split(" ").count(), mPostText.length)
+            .dismissContentStructure()
+            .undo()
+            .undo()
+            .verifyContentStructure(0, 0, 0)
+            .dismissContentStructure()
+    }
+
+    @Test
+    fun e2eBlockEditorCanRedoChanges() {
+        val title = "blockEditorCanRedoChanges"
+        MySitesPage()
+            .startNewPost()
+        BlockEditorPage()
+            .waitForTitleDisplayed()
+            .enterTitle(title)
+            .enterParagraphText(mPostText)
+            .verifyContentStructure(1, mPostText.split(" ").count(), mPostText.length)
+            .dismissContentStructure()
+            .undo()
+            .undo()
+            .verifyContentStructure(0, 0, 0)
+            .dismissContentStructure()
+            .redo()
+            .redo()
+            .verifyContentStructure(1, mPostText.split(" ").count(), mPostText.length)
+            .dismissContentStructure()
+    }
 }

WordPress/src/androidTest/java/org/wordpress/android/e2e/pages/BlockEditorPage.kt

@@ -50,6 +50,11 @@ class BlockEditorPage {
         return this
     }
 
+    fun dismissContentStructure(): BlockEditorPage {
+        Espresso.pressBack()
+        return this
+    }
+
     fun addPostSettings(categoryName: String?, tagName: String?): BlockEditorPage {
         openPostSetting()
         addCategory(categoryName)
@@ -194,6 +199,35 @@ class BlockEditorPage {
         WPSupportUtils.clickOn(Espresso.onView(ViewMatchers.withText(R.string.menu_preview)))
     }
 
+    fun verifyContentStructure(blocks: Int, words: Int, characters: Int): BlockEditorPage {
+        val mContentStructure = "Blocks: %1\$d\nWords: %2\$d\nCharacters: %3\$d"
+
+        Espresso.openActionBarOverflowOrOptionsMenu(ApplicationProvider.getApplicationContext())
+        WPSupportUtils.clickOn(Espresso.onView(ViewMatchers.withText("Content structure")))
+
+        TestCase.assertTrue(
+            "Expected content structure is not valid",
+            WPSupportUtils.waitForElementToBeDisplayedWithoutFailure(
+                Espresso.onView(
+                    ViewMatchers.withText(
+                        String.format(mContentStructure, blocks, words, characters)
+                    )
+                )
+            )
+        )
+        return this
+    }
+
+    fun undo(): BlockEditorPage {
+        WPSupportUtils.clickOn((R.id.menu_undo_action))
+        return this
+    }
+
+    fun redo(): BlockEditorPage {
+        WPSupportUtils.clickOn((R.id.menu_redo_action))
+        return this
+    }
+
     companion object {
         private val titleField = Espresso.onView(ViewMatchers.withHint("Add title"))
         private val postSettingButton =

WordPress/src/main/java/org/wordpress/android/ui/posts/EditPostActivity.java

@@ -8,6 +8,7 @@
 import android.net.Uri;
 import android.os.Bundle;
 import android.os.Handler;
+import android.os.Looper;
 import android.text.TextUtils;
 import android.view.DragEvent;
 import android.view.Menu;
@@ -16,6 +17,7 @@
 import android.view.View;
 import android.view.ViewGroup;
 import android.webkit.MimeTypeMap;
+import android.widget.ImageView;
 import android.widget.Toast;
 
 import androidx.activity.OnBackPressedCallback;
@@ -216,7 +218,9 @@
 import org.wordpress.android.util.extensions.AppBarLayoutExtensionsKt;
 import org.wordpress.android.util.helpers.MediaFile;
 import org.wordpress.android.util.helpers.MediaGallery;
+import org.wordpress.android.util.image.BlavatarShape;
 import org.wordpress.android.util.image.ImageManager;
+import org.wordpress.android.util.image.ImageType;
 import org.wordpress.android.viewmodel.helpers.ToastMessageHolder;
 import org.wordpress.android.viewmodel.storage.StorageUtilsViewModel;
 import org.wordpress.android.widgets.AppRatingDialog;
@@ -304,6 +308,8 @@ public class EditPostActivity extends LocaleAwareActivity implements
     private static final String STATE_KEY_EDITOR_SESSION_DATA = "stateKeyEditorSessionData";
     private static final String STATE_KEY_GUTENBERG_IS_SHOWN = "stateKeyGutenbergIsShown";
     private static final String STATE_KEY_MEDIA_CAPTURE_PATH = "stateKeyMediaCapturePath";
+    private static final String STATE_KEY_UNDO = "stateKeyUndo";
+    private static final String STATE_KEY_REDO = "stateKeyRedo";
 
     private static final int PAGE_CONTENT = 0;
     private static final int PAGE_SETTINGS = 1;
@@ -368,6 +374,8 @@ enum RestartEditorOptions {
 
     private AppBarLayout mAppBarLayout;
     private Toolbar mToolbar;
+    private boolean mMenuHasUndo = false;
+    private boolean mMenuHasRedo = false;
 
     private Handler mShowPrepublishingBottomSheetHandler;
     private Runnable mShowPrepublishingBottomSheetRunnable;
@@ -585,9 +593,13 @@ public void handleOnBackPressed() {
         // Set up the action bar.
         mToolbar = findViewById(R.id.toolbar_main);
         setSupportActionBar(mToolbar);
+
+        customizeToolbar();
+
         final ActionBar actionBar = getSupportActionBar();
         if (actionBar != null) {
-            actionBar.setDisplayHomeAsUpEnabled(true);
+            actionBar.setDisplayHomeAsUpEnabled(false);
+            actionBar.setDisplayShowTitleEnabled(false);
         }
 
         mAppBarLayout = findViewById(R.id.appbar_main);
@@ -751,8 +763,6 @@ public void handleOnBackPressed() {
             resetUploadingMediaToFailedIfPostHasNotMediaInProgressOrQueued();
         }
 
-        setTitle(SiteUtils.getSiteNameOrHomeURL(mSite));
-
         mSectionsPagerAdapter = new SectionsPagerAdapter(fragmentManager);
 
         // we need to make sure AT cookie is available when trying to edit post on private AT site
@@ -774,6 +784,23 @@ public void handleOnBackPressed() {
         mStorageUtilsViewModel.start(savedInstanceState == null);
     }
 
+    private void customizeToolbar() {
+        // Custom close button
+        View closeHeader = mToolbar.findViewById(R.id.edit_post_header);
+        closeHeader.setOnClickListener(v -> handleBackPressed());
+
+        // Update site icon
+        String siteIconUrl = SiteUtils.getSiteIconUrl(
+                mSite,
+                getResources().getDimensionPixelSize(R.dimen.blavatar_sz_small)
+        );
+        ImageView siteIcon = mToolbar.findViewById(R.id.close_editor_site_icon);
+        ImageType blavatarType = SiteUtils.getSiteImageType(
+                mSite.isWpForTeamsSite(), BlavatarShape.SQUARE_WITH_ROUNDED_CORNERES);
+        mImageManager.loadImageWithCorners(siteIcon, blavatarType, siteIconUrl,
+                getResources().getDimensionPixelSize(R.dimen.edit_post_header_image_corner_radius));
+    }
+
     private void presentNewPageNoticeIfNeeded() {
         if (!mIsPage || !mIsNewPost) {
             return;
@@ -1082,6 +1109,8 @@ protected void onSaveInstanceState(Bundle outState) {
         mIsConfigChange = true; // don't call sessionData.end() in onDestroy() if this is an Android config change
 
         outState.putBoolean(STATE_KEY_GUTENBERG_IS_SHOWN, mShowGutenbergEditor);
+        outState.putBoolean(STATE_KEY_UNDO, mMenuHasUndo);
+        outState.putBoolean(STATE_KEY_REDO, mMenuHasRedo);
 
         outState.putParcelableArrayList(STATE_KEY_DROPPED_MEDIA_URIS, mEditorMedia.getDroppedMediaUris());
 
@@ -1275,13 +1304,23 @@ public boolean onPrepareOptionsMenu(Menu menu) {
             showMenuItems = false;
         }
 
+        MenuItem undoItem = menu.findItem(R.id.menu_undo_action);
+        MenuItem redoItem = menu.findItem(R.id.menu_redo_action);
         MenuItem secondaryAction = menu.findItem(R.id.menu_secondary_action);
         MenuItem previewMenuItem = menu.findItem(R.id.menu_preview_post);
         MenuItem viewHtmlModeMenuItem = menu.findItem(R.id.menu_html_mode);
         MenuItem historyMenuItem = menu.findItem(R.id.menu_history);
         MenuItem settingsMenuItem = menu.findItem(R.id.menu_post_settings);
         MenuItem helpMenuItem = menu.findItem(R.id.menu_editor_help);
 
+        if (undoItem != null) {
+            undoItem.setEnabled(mMenuHasUndo);
+        }
+
+        if (redoItem != null) {
+            redoItem.setEnabled(mMenuHasRedo);
+        }
+
         if (secondaryAction != null && mEditPostRepository.hasPost()) {
             secondaryAction.setVisible(showMenuItems && getSecondaryAction().isVisible());
             secondaryAction.setTitle(getSecondaryActionText());
@@ -1537,6 +1576,14 @@ public boolean onOptionsItemSelected(final MenuItem item) {
                     mAnalyticsTrackerWrapper.track(Stat.EDITOR_HELP_SHOWN, mSite);
                     ((GutenbergEditorFragment) mEditorFragment).showEditorHelp();
                 }
+            } else if (itemId == R.id.menu_undo_action) {
+                if (mEditorFragment instanceof GutenbergEditorFragment) {
+                    ((GutenbergEditorFragment) mEditorFragment).onUndoPressed();
+                }
+            } else if (itemId == R.id.menu_redo_action) {
+                if (mEditorFragment instanceof GutenbergEditorFragment) {
+                    ((GutenbergEditorFragment) mEditorFragment).onRedoPressed();
+                }
             }
         }
         return false;
@@ -3518,6 +3565,20 @@ public void onTrackableEvent(TrackableEvent event, Map<String, String> propertie
         AnalyticsUtils.trackBlockEditorEvent(eventName, mSite, properties);
     }
 
+    @Override public void onToggleUndo(boolean isDisabled) {
+        if (mMenuHasUndo == !isDisabled) return;
+
+        mMenuHasUndo = !isDisabled;
+        new Handler(Looper.getMainLooper()).post(this::invalidateOptionsMenu);
+    }
+
+    @Override public void onToggleRedo(boolean isDisabled) {
+        if (mMenuHasRedo == !isDisabled) return;
+
+        mMenuHasRedo = !isDisabled;
+        new Handler(Looper.getMainLooper()).post(this::invalidateOptionsMenu);
+    }
+
     // FluxC events
 
     @SuppressWarnings("unused")

WordPress/src/main/res/drawable-ldrtl/redo.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M18.3,11.7C17.7,11.1 16.9,10.8 16,10.8H6.7L9.6,7.5L8.5,6.5L4,11.5L8.5,16L9.5,15L6.8,12.3H16C16.5,12.3 16.9,12.5 17.3,12.8C18.3,13.8 18.3,16.2 18.3,17.3V17.6H19.8V17.4C19.8,15.9 19.8,13.1 18.3,11.7Z"
+      android:fillColor="@color/on_surface_disabled_selector"/>
+</vector>

WordPress/src/main/res/drawable-ldrtl/undo.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M15.6,6.5L14.5,7.5L17.4,10.8H8C7.1,10.8 6.3,11.1 5.7,11.7C4.3,13.2 4.3,15.9 4.3,17.3V17.5H5.8V17.2C5.8,16.1 5.8,13.7 6.8,12.7C7.1,12.4 7.5,12.2 8.1,12.2H17.3L14.5,15L15.6,16.1L20.2,11.5L15.6,6.5Z"
+      android:fillColor="@color/on_surface_disabled_selector"/>
+</vector>

WordPress/src/main/res/drawable/bg_rectangle_placeholder_radius_2dp_globe_32dp.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/bg_rectangle_placeholder_radius_2dp" />
+
+    <item
+        android:drawable="@drawable/ic_globe_white_24dp"
+        android:bottom="2dp"
+        android:left="2dp"
+        android:right="2dp"
+        android:top="2dp" />
+
+</layer-list>

WordPress/src/main/res/drawable/chevron_down.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorOnSurface">
+  <path
+      android:pathData="M17.5,11.6L12,16L6.5,11.6L7.4,10.4L12,14L16.5,10.4L17.5,11.6Z"
+      android:fillColor="?attr/colorOnSurface"/>
+</vector>

WordPress/src/main/res/drawable/more_vertical.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M13,19H11V17H13V19ZM13,13H11V11H13V13ZM13,7H11V5H13V7Z"
+      android:fillColor="?attr/colorOnSurface"/>
+</vector>

WordPress/src/main/res/drawable/redo.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M15.6,6.5L14.5,7.5L17.4,10.8H8C7.1,10.8 6.3,11.1 5.7,11.7C4.3,13.2 4.3,15.9 4.3,17.3V17.5H5.8V17.2C5.8,16.1 5.8,13.7 6.8,12.7C7.1,12.4 7.5,12.2 8.1,12.2H17.3L14.5,15L15.6,16.1L20.2,11.5L15.6,6.5Z"
+      android:fillColor="@color/on_surface_disabled_selector"/>
+</vector>

WordPress/src/main/res/drawable/undo.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M18.3,11.7C17.7,11.1 16.9,10.8 16,10.8H6.7L9.6,7.5L8.5,6.5L4,11.5L8.5,16L9.5,15L6.8,12.3H16C16.5,12.3 16.9,12.5 17.3,12.8C18.3,13.8 18.3,16.2 18.3,17.3V17.6H19.8V17.4C19.8,15.9 19.8,13.1 18.3,11.7Z"
+      android:fillColor="@color/on_surface_disabled_selector"/>
+</vector>

WordPress/src/main/res/layout/edit_post_header.xml

@@ -0,0 +1,31 @@
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="wrap_content"
+    android:layout_height="match_parent"
+    android:orientation="horizontal"
+    android:gravity="center_vertical"
+    android:contentDescription="@string/menu_close_editor"
+    android:foreground="?attr/selectableItemBackground"
+    android:clickable="true"
+    android:focusable="true">
+
+    <ImageView
+        android:layout_width="@dimen/edit_post_header_chevron_size"
+        android:layout_height="@dimen/edit_post_header_chevron_size"
+        android:importantForAccessibility="no"
+        android:src="@drawable/chevron_down"
+        android:clickable="false"
+        android:visibility="visible" />
+
+    <ImageView
+        android:id="@+id/close_editor_site_icon"
+        android:layout_width="@dimen/edit_post_header_image_size"
+        android:layout_height="@dimen/edit_post_header_image_size"
+        android:importantForAccessibility="no"
+        android:src="@drawable/bg_rectangle_placeholder_radius_2dp_globe_32dp"
+        android:visibility="visible"
+        android:clickable="false"
+        tools:ignore="TouchTargetSizeCheck" />
+
+</LinearLayout>

WordPress/src/main/res/layout/new_edit_post_activity.xml

@@ -17,7 +17,14 @@
             android:duplicateParentState="true"
             android:background="@drawable/tab_layout_background"
             android:layout_height="wrap_content"
-            app:theme="@style/WordPress.ActionBar" />
+            app:contentInsetStart="@dimen/margin_medium"
+            app:theme="@style/WordPress.ActionBar">
+
+            <include
+                layout="@layout/edit_post_header"
+                android:id="@+id/edit_post_header" />
+
+        </com.google.android.material.appbar.MaterialToolbar>
 
     </com.google.android.material.appbar.AppBarLayout>