diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
index dd2e16ebd1ae..3bf04816d9bb 100644
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@@ -32,16 +32,7 @@
     <JetCodeStyleSettings>
       <option name="PACKAGES_TO_USE_STAR_IMPORTS">
         <value>
-          <package name="kotlinx.android.synthetic" alias="false" withSubpackages="true" />
-        </value>
-      </option>
-      <option name="PACKAGES_IMPORT_LAYOUT">
-        <value>
-          <package name="" alias="false" withSubpackages="true" />
-          <package name="java" alias="false" withSubpackages="true" />
-          <package name="javax" alias="false" withSubpackages="true" />
-          <package name="kotlin" alias="false" withSubpackages="true" />
-          <package name="" alias="true" withSubpackages="true" />
+          <package name="kotlinx.android.synthetic" withSubpackages="true" static="false" />
         </value>
       </option>
       <option name="NAME_COUNT_TO_USE_STAR_IMPORT" value="2147483647" />
diff --git a/WordPress/build.gradle b/WordPress/build.gradle
index 1660b4a665e9..b3c84d2af71d 100644
--- a/WordPress/build.gradle
+++ b/WordPress/build.gradle
@@ -186,6 +186,7 @@ androidExtensions {
 
 dependencies {
     implementation project(path:':libs:stories-android:stories')
+    testImplementation project(path:':photoeditor')
     implementation project(path:':libs:image-editor::ImageEditor')
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlinVersion"
 
diff --git a/WordPress/src/main/java/org/wordpress/android/modules/AppComponent.java b/WordPress/src/main/java/org/wordpress/android/modules/AppComponent.java
index 81e565950a13..94e677e76315 100644
--- a/WordPress/src/main/java/org/wordpress/android/modules/AppComponent.java
+++ b/WordPress/src/main/java/org/wordpress/android/modules/AppComponent.java
@@ -187,6 +187,7 @@
 import org.wordpress.android.ui.themes.ThemeBrowserActivity;
 import org.wordpress.android.ui.themes.ThemeBrowserFragment;
 import org.wordpress.android.ui.uploads.MediaUploadHandler;
+import org.wordpress.android.ui.uploads.MediaUploadReadyProcessor;
 import org.wordpress.android.ui.uploads.PostUploadHandler;
 import org.wordpress.android.ui.uploads.UploadService;
 import org.wordpress.android.ui.whatsnew.FeatureAnnouncementDialogFragment;
@@ -595,6 +596,8 @@ public interface AppComponent extends AndroidInjector<WordPress> {
 
     void inject(MediaPickerFragment object);
 
+    void inject(MediaUploadReadyProcessor object);
+
     void inject(PrepublishingCategoriesFragment object);
 
     void inject(PrepublishingAddCategoryFragment object);
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/ActivityLauncher.java b/WordPress/src/main/java/org/wordpress/android/ui/ActivityLauncher.java
index ee67272ea7a7..37f279103940 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/ActivityLauncher.java
+++ b/WordPress/src/main/java/org/wordpress/android/ui/ActivityLauncher.java
@@ -18,6 +18,7 @@
 import org.wordpress.android.analytics.AnalyticsTracker;
 import org.wordpress.android.analytics.AnalyticsTracker.Stat;
 import org.wordpress.android.datasets.ReaderPostTable;
+import org.wordpress.android.fluxc.model.LocalOrRemoteId.LocalId;
 import org.wordpress.android.fluxc.model.PostImmutableModel;
 import org.wordpress.android.fluxc.model.PostModel;
 import org.wordpress.android.fluxc.model.SiteModel;
@@ -94,16 +95,21 @@
 import java.util.List;
 import java.util.Map;
 
+import static com.wordpress.stories.util.BundleUtilsKt.KEY_STORY_INDEX;
 import static org.wordpress.android.analytics.AnalyticsTracker.ACTIVITY_LOG_ACTIVITY_ID_KEY;
 import static org.wordpress.android.analytics.AnalyticsTracker.Stat.POST_LIST_ACCESS_ERROR;
 import static org.wordpress.android.analytics.AnalyticsTracker.Stat.READER_ARTICLE_DETAIL_REBLOGGED;
 import static org.wordpress.android.analytics.AnalyticsTracker.Stat.READER_ARTICLE_REBLOGGED;
 import static org.wordpress.android.analytics.AnalyticsTracker.Stat.STATS_ACCESS_ERROR;
+import static org.wordpress.android.editor.gutenberg.GutenbergEditorFragment.ARG_STORY_BLOCK_ID;
 import static org.wordpress.android.imageeditor.preview.PreviewImageFragment.ARG_EDIT_IMAGE_DATA;
 import static org.wordpress.android.login.LoginMode.WPCOM_LOGIN_ONLY;
 import static org.wordpress.android.ui.WPWebViewActivity.ENCODING_UTF8;
 import static org.wordpress.android.ui.media.MediaBrowserActivity.ARG_BROWSER_TYPE;
 import static org.wordpress.android.ui.pages.PagesActivityKt.EXTRA_PAGE_REMOTE_ID_KEY;
+import static org.wordpress.android.ui.stories.StoryComposerActivity.KEY_ALL_UNFLATTENED_LOADED_SLIDES;
+import static org.wordpress.android.ui.stories.StoryComposerActivity.KEY_LAUNCHED_FROM_GUTENBERG;
+import static org.wordpress.android.ui.stories.StoryComposerActivity.KEY_POST_LOCAL_ID;
 import static org.wordpress.android.viewmodel.activitylog.ActivityLogDetailViewModelKt.ACTIVITY_LOG_ID_KEY;
 
 public class ActivityLauncher {
@@ -720,13 +726,73 @@ public static void addNewStoryWithMediaUrisForResult(
             return;
         }
 
-        Intent intent = new Intent(activity, StoryComposerActivity.class);
+            Intent intent = new Intent(activity, StoryComposerActivity.class);
         intent.putExtra(WordPress.SITE, site);
         intent.putExtra(MediaPickerConstants.EXTRA_MEDIA_URIS, mediaUris);
         intent.putExtra(AnalyticsUtils.EXTRA_CREATION_SOURCE_DETAIL, source);
         activity.startActivityForResult(intent, RequestCodes.CREATE_STORY);
     }
 
+    public static void editStoryWithMediaIdsForResult(
+            Activity activity,
+            SiteModel site,
+            long[] mediaIds,
+            boolean launchingFromGutenberg
+    ) {
+        if (site == null) {
+            return;
+        }
+
+        Intent intent = new Intent(activity, StoryComposerActivity.class);
+        intent.putExtra(WordPress.SITE, site);
+        intent.putExtra(MediaBrowserActivity.RESULT_IDS, mediaIds);
+        activity.startActivityForResult(intent, RequestCodes.EDIT_STORY);
+    }
+
+    public static void editStoryForResult(
+            Activity activity,
+            SiteModel site,
+            LocalId localPostId,
+            int storyIndex,
+            boolean allStorySlidesAreEditable,
+            boolean launchedFromGutenberg,
+            String storyBlockId
+    ) {
+        if (site == null) {
+            return;
+        }
+
+        Intent intent = new Intent(activity, StoryComposerActivity.class);
+        intent.putExtra(WordPress.SITE, site);
+        intent.putExtra(KEY_POST_LOCAL_ID, localPostId.getValue());
+        intent.putExtra(KEY_STORY_INDEX, storyIndex);
+        intent.putExtra(KEY_LAUNCHED_FROM_GUTENBERG, launchedFromGutenberg);
+        intent.putExtra(KEY_ALL_UNFLATTENED_LOADED_SLIDES, allStorySlidesAreEditable);
+        intent.putExtra(ARG_STORY_BLOCK_ID, storyBlockId);
+        activity.startActivityForResult(intent, RequestCodes.EDIT_STORY);
+    }
+
+    public static void editEmptyStoryForResult(
+            Activity activity,
+            SiteModel site,
+            LocalId localPostId,
+            int storyIndex,
+            String storyBlockId
+    ) {
+        if (site == null) {
+            return;
+        }
+
+        Intent intent = new Intent(activity, StoryComposerActivity.class);
+        intent.putExtra(WordPress.SITE, site);
+        intent.putExtra(KEY_LAUNCHED_FROM_GUTENBERG, true);
+        intent.putExtra(MediaPickerConstants.EXTRA_LAUNCH_WPSTORIES_CAMERA_REQUESTED, true);
+        intent.putExtra(KEY_POST_LOCAL_ID, localPostId.getValue());
+        intent.putExtra(KEY_STORY_INDEX, storyIndex);
+        intent.putExtra(ARG_STORY_BLOCK_ID, storyBlockId);
+        activity.startActivityForResult(intent, RequestCodes.EDIT_STORY);
+    }
+
     public static void editPostOrPageForResult(Activity activity, SiteModel site, PostModel post) {
         editPostOrPageForResult(new Intent(activity, EditPostActivity.class), activity, site, post.getId(), false);
     }
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/RequestCodes.java b/WordPress/src/main/java/org/wordpress/android/ui/RequestCodes.java
index 30e5e832822e..9a9fd3aa754a 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/RequestCodes.java
+++ b/WordPress/src/main/java/org/wordpress/android/ui/RequestCodes.java
@@ -65,4 +65,5 @@ public class RequestCodes {
 
     // Story creator
     public static final int CREATE_STORY = 8000;
+    public static final int EDIT_STORY = 8001;
 }
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/posts/EditPostActivity.java b/WordPress/src/main/java/org/wordpress/android/ui/posts/EditPostActivity.java
index d26ec7285468..dabeec637277 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/posts/EditPostActivity.java
+++ b/WordPress/src/main/java/org/wordpress/android/ui/posts/EditPostActivity.java
@@ -74,10 +74,12 @@
 import org.wordpress.android.editor.gutenberg.GutenbergEditorFragment;
 import org.wordpress.android.editor.gutenberg.GutenbergPropsBuilder;
 import org.wordpress.android.editor.gutenberg.GutenbergWebViewAuthorizationData;
+import org.wordpress.android.editor.gutenberg.StorySaveMediaListener;
 import org.wordpress.android.fluxc.Dispatcher;
 import org.wordpress.android.fluxc.action.AccountAction;
 import org.wordpress.android.fluxc.generated.AccountActionBuilder;
 import org.wordpress.android.fluxc.generated.EditorThemeActionBuilder;
+import org.wordpress.android.fluxc.generated.MediaActionBuilder;
 import org.wordpress.android.fluxc.generated.PostActionBuilder;
 import org.wordpress.android.fluxc.generated.SiteActionBuilder;
 import org.wordpress.android.fluxc.model.AccountModel;
@@ -85,6 +87,7 @@
 import org.wordpress.android.fluxc.model.CauseOfOnPostChanged.RemoteAutoSavePost;
 import org.wordpress.android.fluxc.model.EditorTheme;
 import org.wordpress.android.fluxc.model.EditorThemeSupport;
+import org.wordpress.android.fluxc.model.LocalOrRemoteId.LocalId;
 import org.wordpress.android.fluxc.model.MediaModel;
 import org.wordpress.android.fluxc.model.MediaModel.MediaUploadState;
 import org.wordpress.android.fluxc.model.PostImmutableModel;
@@ -98,9 +101,11 @@
 import org.wordpress.android.fluxc.store.EditorThemeStore.FetchEditorThemePayload;
 import org.wordpress.android.fluxc.store.EditorThemeStore.OnEditorThemeChanged;
 import org.wordpress.android.fluxc.store.MediaStore;
+import org.wordpress.android.fluxc.store.MediaStore.FetchMediaListPayload;
 import org.wordpress.android.fluxc.store.MediaStore.MediaError;
 import org.wordpress.android.fluxc.store.MediaStore.MediaErrorType;
 import org.wordpress.android.fluxc.store.MediaStore.OnMediaChanged;
+import org.wordpress.android.fluxc.store.MediaStore.OnMediaListFetched;
 import org.wordpress.android.fluxc.store.MediaStore.OnMediaUploaded;
 import org.wordpress.android.fluxc.store.PostStore;
 import org.wordpress.android.fluxc.store.PostStore.OnPostChanged;
@@ -152,6 +157,7 @@
 import org.wordpress.android.ui.posts.editor.StorePostViewModel.ActivityFinishState;
 import org.wordpress.android.ui.posts.editor.StorePostViewModel.UpdateFromEditor;
 import org.wordpress.android.ui.posts.editor.StorePostViewModel.UpdateFromEditor.PostFields;
+import org.wordpress.android.ui.posts.editor.StoriesEventListener;
 import org.wordpress.android.ui.posts.editor.media.AddExistingMediaSource;
 import org.wordpress.android.ui.posts.editor.media.EditorMedia;
 import org.wordpress.android.ui.posts.editor.media.EditorMediaListener;
@@ -164,6 +170,9 @@
 import org.wordpress.android.ui.prefs.SiteSettingsInterface;
 import org.wordpress.android.ui.reader.utils.ReaderUtilsWrapper;
 import org.wordpress.android.ui.stockmedia.StockMediaPickerActivity;
+import org.wordpress.android.ui.stories.StoryRepositoryWrapper;
+import org.wordpress.android.ui.stories.prefs.StoriesPrefs;
+import org.wordpress.android.ui.stories.usecase.LoadStoryFromStoriesPrefsUseCase;
 import org.wordpress.android.ui.uploads.PostEvents;
 import org.wordpress.android.ui.uploads.UploadService;
 import org.wordpress.android.ui.uploads.UploadUtils;
@@ -185,6 +194,7 @@
 import org.wordpress.android.util.LocaleManager;
 import org.wordpress.android.util.LocaleManagerWrapper;
 import org.wordpress.android.util.MediaUtils;
+import org.wordpress.android.util.NetworkUtils;
 import org.wordpress.android.util.PermissionUtils;
 import org.wordpress.android.util.ReblogUtils;
 import org.wordpress.android.util.ShortcutUtils;
@@ -203,6 +213,7 @@
 import org.wordpress.android.util.config.GutenbergMentionsFeatureConfig;
 import org.wordpress.android.util.config.ModalLayoutPickerFeatureConfig;
 import org.wordpress.android.util.config.TenorFeatureConfig;
+import org.wordpress.android.util.config.WPStoriesFeatureConfig;
 import org.wordpress.android.util.helpers.MediaFile;
 import org.wordpress.android.util.helpers.MediaGallery;
 import org.wordpress.android.util.image.ImageManager;
@@ -395,6 +406,11 @@ enum RestartEditorOptions {
     @Inject ConsolidatedMediaPickerFeatureConfig mConsolidatedMediaPickerFeatureConfig;
     @Inject CrashLogging mCrashLogging;
     @Inject MediaPickerLauncher mMediaPickerLauncher;
+    @Inject StoryRepositoryWrapper mStoryRepositoryWrapper;
+    @Inject LoadStoryFromStoriesPrefsUseCase mLoadStoryFromStoriesPrefsUseCase;
+    @Inject StoriesPrefs mStoriesPrefs;
+    @Inject StoriesEventListener mStoriesEventListener;
+    @Inject WPStoriesFeatureConfig mWPStoriesFeatureConfig;
 
     private StorePostViewModel mViewModel;
 
@@ -402,6 +418,8 @@ enum RestartEditorOptions {
     private SiteSettingsInterface mSiteSettings;
     private boolean mIsJetpackSsoEnabled;
 
+    private boolean mNetworkErrorOnLastMediaFetchAttempt = false;
+
     public static boolean checkToRestart(@NonNull Intent data) {
         return data.hasExtra(EditPostActivity.EXTRA_RESTART_EDITOR)
                && RestartEditorOptions.valueOf(data.getStringExtra(EditPostActivity.EXTRA_RESTART_EDITOR))
@@ -578,6 +596,10 @@ protected void onCreate(Bundle savedInstanceState) {
             if (mEditorFragment instanceof EditorMediaUploadListener) {
                 mEditorMediaUploadListener = (EditorMediaUploadListener) mEditorFragment;
             }
+
+            if (mEditorFragment instanceof StorySaveMediaListener) {
+                mStoriesEventListener.setSaveMediaListener((StorySaveMediaListener) mEditorFragment);
+            }
         }
 
         if (mSite == null) {
@@ -629,6 +651,13 @@ protected void onCreate(Bundle savedInstanceState) {
         }
 
         if (!mIsNewPost) {
+            // if we are opening an existing Post, and it contains a Story block, pre-fetch the media in case
+            // the user wants to edit the block (we'll need to download it first if the slides images weren't
+            // created on this device)
+            if (PostUtils.contentContainsWPStoryGutenbergBlocks(mEditPostRepository.getPost().getContent())) {
+                fetchMediaList();
+            }
+
             // if we are opening a Post for which an error notification exists, we need to remove it from the dashboard
             // to prevent the user from tapping RETRY on a Post that is being currently edited
             UploadService.cancelFinalNotification(this, mEditPostRepository.getPost());
@@ -651,6 +680,7 @@ protected void onCreate(Bundle savedInstanceState) {
 
         setupPrepublishingBottomSheetRunnable();
 
+        mStoriesEventListener.start(this.getLifecycle(), mSite, mEditPostRepository);
         setupPreviewUI();
     }
 
@@ -1644,13 +1674,30 @@ private ActivityFinishState savePostOnline(boolean isFirstTimePublish) {
     }
 
     private void onUploadSuccess(MediaModel media) {
-        // TODO Should this statement check media.getLocalPostId() == mEditPostRepository.getId()?
-        if (media != null && !media.getMarkedLocallyAsFeatured() && mEditorMediaUploadListener != null) {
-            mEditorMediaUploadListener.onMediaUploadSucceeded(String.valueOf(media.getId()),
-                    FluxCUtils.mediaFileFromMediaModel(media));
-        } else if (media != null && media.getMarkedLocallyAsFeatured() && media.getLocalPostId() == mEditPostRepository
-                .getId()) {
-            setFeaturedImageId(media.getMediaId(), false);
+        if (media != null) {
+            // TODO Should this statement check media.getLocalPostId() == mEditPostRepository.getId()?
+            if (!media.getMarkedLocallyAsFeatured() && mEditorMediaUploadListener != null) {
+                mEditorMediaUploadListener.onMediaUploadSucceeded(String.valueOf(media.getId()),
+                        FluxCUtils.mediaFileFromMediaModel(media));
+                if (PostUtils.contentContainsWPStoryGutenbergBlocks(mEditPostRepository.getContent())) {
+                    // make sure to sync the local post object with the UI and save
+                    updateAndSavePostAsync();
+                    // if this is a Story media item, then make sure to keep up with the StoriesPrefs serialized slides
+                    // this looks for the slide saved with the local id key (media.getId()), and re-converts it to
+                    // mediaId.
+                    // Also: we don't need to worry about checking if this mediaModel corresponds to a media upload
+                    // within a story block in this post: we will only replace items for which a local-keyed frame has
+                    // been created before, which can only happen when using the Story Creator.
+                    mStoriesPrefs.replaceLocalMediaIdKeyedSlideWithRemoteMediaIdKeyedSlide(
+                            media.getId(),
+                            media.getMediaId(),
+                            mSite.getId()
+                    );
+                }
+            } else if (media.getMarkedLocallyAsFeatured() && media.getLocalPostId() == mEditPostRepository
+                    .getId()) {
+                setFeaturedImageId(media.getMediaId(), false);
+            }
         }
     }
 
@@ -2183,7 +2230,8 @@ public Fragment getItem(int position) {
                                 mIsNewPost,
                                 gutenbergWebViewAuthorizationData,
                                 mTenorFeatureConfig.isEnabled(),
-                                gutenbergPropsBuilder
+                                gutenbergPropsBuilder,
+                                RequestCodes.EDIT_STORY
                         );
                     } else {
                         // If gutenberg editor is not selected, default to Aztec.
@@ -2220,6 +2268,10 @@ public Fragment getItem(int position) {
 
                         reattachUploadingMediaForAztec();
                     }
+
+                    if (mEditorFragment instanceof StorySaveMediaListener) {
+                        mStoriesEventListener.setSaveMediaListener((StorySaveMediaListener) mEditorFragment);
+                    }
                     break;
                 case PAGE_SETTINGS:
                     mEditPostSettingsFragment = (EditPostSettingsFragment) fragment;
@@ -2251,6 +2303,7 @@ private GutenbergPropsBuilder getGutenbergPropsBuilder() {
         boolean unsupportedBlockEditorSwitch = !mIsJetpackSsoEnabled && "gutenberg".equals(mSite.getWebEditor());
 
         return new GutenbergPropsBuilder(
+                mWPStoriesFeatureConfig.isEnabled(),
                 enableMentions,
                 isUnsupportedBlockEditorEnabled,
                 unsupportedBlockEditorSwitch,
@@ -2520,6 +2573,13 @@ public void onActivityResult(int requestCode, int resultCode, Intent data) {
             }
         }
 
+        if (requestCode == RequestCodes.EDIT_STORY) {
+            if (mEditorFragment instanceof GutenbergEditorFragment) {
+                mEditorFragment.onActivityResult(requestCode, resultCode, data);
+                return;
+            }
+        }
+
         if (data != null || ((requestCode == RequestCodes.TAKE_PHOTO || requestCode == RequestCodes.TAKE_VIDEO
                               || requestCode == RequestCodes.PHOTO_PICKER))) {
             switch (requestCode) {
@@ -3196,6 +3256,33 @@ public void onTrackableEvent(TrackableEvent event, Map<String, String> propertie
         mEditorTracker.trackEditorEvent(event, mEditorFragment.getEditorName(), properties);
     }
 
+    @Override public void onStoryComposerLoadRequested(ArrayList<Object> mediaFiles, String blockId) {
+        boolean noSlidesLoaded = mStoriesEventListener.onRequestMediaFilesEditorLoad(
+                this,
+                new LocalId(mEditPostRepository.getId()),
+                mNetworkErrorOnLastMediaFetchAttempt,
+                mediaFiles,
+                blockId
+        );
+
+        if (mNetworkErrorOnLastMediaFetchAttempt && noSlidesLoaded) {
+            // try another fetchMedia request
+            fetchMediaList();
+        }
+    }
+
+    @Override public void onRetryUploadForMediaCollection(ArrayList<Object> mediaFiles) {
+        mStoriesEventListener.onRetryUploadForMediaCollection(this, mediaFiles, mEditorMediaUploadListener);
+    }
+
+    @Override public void onCancelUploadForMediaCollection(ArrayList<Object> mediaFiles) {
+        mStoriesEventListener.onCancelUploadForMediaCollection(mediaFiles);
+    }
+
+    @Override public void onCancelSaveForMediaCollection(ArrayList<Object> mediaFiles) {
+        mStoriesEventListener.onCancelSaveForMediaCollection(mediaFiles);
+    }
+
     // FluxC events
 
     @SuppressWarnings("unused")
@@ -3228,6 +3315,14 @@ public void onMediaUploaded(OnMediaUploaded event) {
 
     // FluxC events
 
+    @SuppressWarnings("unused")
+    @Subscribe(threadMode = ThreadMode.MAIN)
+    public void onMediaListFetched(OnMediaListFetched event) {
+        if (event != null) {
+            mNetworkErrorOnLastMediaFetchAttempt = event.isError();
+        }
+    }
+
     @SuppressWarnings("unused")
     @Subscribe(threadMode = ThreadMode.MAIN)
     public void onPostChanged(OnPostChanged event) {
@@ -3354,6 +3449,18 @@ private void refreshEditorTheme() {
         mDispatcher.dispatch(EditorThemeActionBuilder.newFetchEditorThemeAction(payload));
     }
 
+    private void fetchMediaList() {
+        // do not refresh if there is no network
+        if (!NetworkUtils.isNetworkAvailable(this)) {
+            mNetworkErrorOnLastMediaFetchAttempt = true;
+            return;
+        }
+        FetchMediaListPayload payload =
+                new FetchMediaListPayload(mSite, MediaStore.DEFAULT_NUM_MEDIA_PER_FETCH, false);
+        mDispatcher.dispatch(MediaActionBuilder.newFetchMediaListAction(payload));
+    }
+
+
     @SuppressWarnings("unused")
     @Subscribe(threadMode = ThreadMode.MAIN_ORDERED)
     public void onEditorThemeChanged(OnEditorThemeChanged event) {
@@ -3423,6 +3530,11 @@ public void syncPostObjectWithUiAndSaveIt(@Nullable OnPostUpdatedFromUIListener
         WPMediaUtils.advertiseImageOptimization(this, listener::invoke);
     }
 
+    @Override
+    public void onMediaModelsCreatedFromOptimizedUris(@NotNull Map<Uri, ? extends MediaModel> oldUriToMediaModels) {
+        // no op - we're not doing any special handling on MediaModels in EditPostActivity
+    }
+
     @Override
     public Consumer<Exception> getExceptionLogger() {
         return (Exception e) -> AppLog.e(T.EDITOR, e);
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/posts/editor/StoriesEventListener.kt b/WordPress/src/main/java/org/wordpress/android/ui/posts/editor/StoriesEventListener.kt
new file mode 100644
index 000000000000..b8559f5a8bf0
--- /dev/null
+++ b/WordPress/src/main/java/org/wordpress/android/ui/posts/editor/StoriesEventListener.kt
@@ -0,0 +1,317 @@
+package org.wordpress.android.ui.posts.editor
+
+import android.app.Activity
+import android.content.DialogInterface
+import android.net.Uri
+import androidx.appcompat.app.AlertDialog.Builder
+import androidx.lifecycle.Lifecycle
+import androidx.lifecycle.Lifecycle.State.CREATED
+import androidx.lifecycle.LifecycleObserver
+import androidx.lifecycle.OnLifecycleEvent
+import com.google.android.material.dialog.MaterialAlertDialogBuilder
+import com.wordpress.stories.compose.frame.StorySaveEvents.FrameSaveCompleted
+import com.wordpress.stories.compose.frame.StorySaveEvents.FrameSaveFailed
+import com.wordpress.stories.compose.frame.StorySaveEvents.FrameSaveProgress
+import com.wordpress.stories.compose.frame.StorySaveEvents.FrameSaveStart
+import com.wordpress.stories.compose.frame.StorySaveEvents.StorySaveResult
+import org.greenrobot.eventbus.Subscribe
+import org.greenrobot.eventbus.ThreadMode
+import org.wordpress.android.R
+import org.wordpress.android.R.string
+import org.wordpress.android.analytics.AnalyticsTracker
+import org.wordpress.android.analytics.AnalyticsTracker.Stat.EDITOR_UPLOAD_MEDIA_RETRIED
+import org.wordpress.android.editor.EditorMediaUploadListener
+import org.wordpress.android.editor.gutenberg.StorySaveMediaListener
+import org.wordpress.android.fluxc.Dispatcher
+import org.wordpress.android.fluxc.model.LocalOrRemoteId.LocalId
+import org.wordpress.android.fluxc.model.MediaModel
+import org.wordpress.android.fluxc.model.MediaModel.MediaUploadState.UPLOADED
+import org.wordpress.android.fluxc.model.SiteModel
+import org.wordpress.android.fluxc.store.MediaStore
+import org.wordpress.android.ui.ActivityLauncher
+import org.wordpress.android.ui.posts.EditPostRepository
+import org.wordpress.android.ui.posts.editor.media.EditorMedia
+import org.wordpress.android.ui.stories.SaveStoryGutenbergBlockUseCase.Companion.TEMPORARY_ID_PREFIX
+import org.wordpress.android.ui.stories.StoryRepositoryWrapper
+import org.wordpress.android.ui.stories.media.StoryMediaSaveUploadBridge.StoryFrameMediaModelCreatedEvent
+import org.wordpress.android.ui.stories.usecase.LoadStoryFromStoriesPrefsUseCase
+import org.wordpress.android.ui.uploads.UploadService
+import org.wordpress.android.util.AppLog
+import org.wordpress.android.util.AppLog.T.MEDIA
+import org.wordpress.android.util.EventBusWrapper
+import org.wordpress.android.util.FluxCUtils
+import org.wordpress.android.util.StringUtils
+import org.wordpress.android.util.helpers.MediaFile
+import java.util.ArrayList
+import java.util.HashMap
+import javax.inject.Inject
+
+class StoriesEventListener @Inject constructor(
+    private val dispatcher: Dispatcher,
+    private val mediaStore: MediaStore,
+    private val eventBusWrapper: EventBusWrapper,
+    private val editorMedia: EditorMedia,
+    private val loadStoryFromStoriesPrefsUseCase: LoadStoryFromStoriesPrefsUseCase,
+    private val storyRepositoryWrapper: StoryRepositoryWrapper
+) : LifecycleObserver {
+    private lateinit var lifecycle: Lifecycle
+    private lateinit var site: SiteModel
+    private lateinit var editPostRepository: EditPostRepository
+    private var storySaveMediaListener: StorySaveMediaListener? = null
+
+    @OnLifecycleEvent(Lifecycle.Event.ON_CREATE)
+    private fun onCreate() {
+        dispatcher.register(this)
+        eventBusWrapper.register(this)
+    }
+
+    /**
+     * Handles the [Lifecycle.Event.ON_DESTROY] event to cleanup the registration for dispatcher and removing the
+     * observer for lifecycle   .
+     */
+    @OnLifecycleEvent(Lifecycle.Event.ON_DESTROY)
+    private fun onDestroy() {
+        lifecycle.removeObserver(this)
+        dispatcher.unregister(this)
+        eventBusWrapper.unregister(this)
+    }
+
+    fun start(lifecycle: Lifecycle, site: SiteModel, editPostRepository: EditPostRepository) {
+        this.site = site
+        this.editPostRepository = editPostRepository
+        this.lifecycle = lifecycle
+        this.lifecycle.addObserver(this)
+    }
+
+    fun setSaveMediaListener(newListener: StorySaveMediaListener) {
+        storySaveMediaListener = newListener
+    }
+
+    // Story Frame Save Service events
+    @Subscribe(threadMode = ThreadMode.MAIN)
+    fun onStoryFrameSaveStart(event: FrameSaveStart) {
+        if (!lifecycle.currentState.isAtLeast(CREATED)) {
+            return
+        }
+        val localMediaId = event.frameId.toString()
+        val progress = storyRepositoryWrapper.getCurrentStorySaveProgress(event.storyIndex, 0.0f)
+        storySaveMediaListener?.onMediaSaveReattached(localMediaId, progress)
+    }
+
+    @Subscribe(threadMode = ThreadMode.MAIN)
+    fun onStoryFrameSaveProgress(event: FrameSaveProgress) {
+        if (!lifecycle.currentState.isAtLeast(CREATED)) {
+            return
+        }
+        val localMediaId = event.frameId.toString()
+        val progress: Float = storyRepositoryWrapper.getCurrentStorySaveProgress(
+                event.storyIndex,
+                event.progress
+        )
+        storySaveMediaListener?.onMediaSaveProgress(localMediaId, progress)
+    }
+
+    @Subscribe(threadMode = ThreadMode.MAIN)
+    fun onStoryFrameSaveCompleted(event: FrameSaveCompleted) {
+        if (!lifecycle.currentState.isAtLeast(CREATED)) {
+            return
+        }
+        val localMediaId = requireNotNull(event.frameId)
+
+        // check whether this is a temporary file being just saved (so we don't have a proper local MediaModel yet)
+        // catch ( NumberFormatException e)
+        if (localMediaId.startsWith(TEMPORARY_ID_PREFIX)) {
+            val (frames) = storyRepositoryWrapper.getStoryAtIndex(event.storyIndex)
+
+            // first, update the media's url
+            val frame = frames[event.frameIndex]
+            storySaveMediaListener?.onMediaSaveSucceeded(
+                    localMediaId,
+                    Uri.fromFile(frame.composedFrameFile).toString()
+            )
+
+            // now update progress
+            val totalProgress: Float = storyRepositoryWrapper.getCurrentStorySaveProgress(
+                    event.storyIndex,
+                    0.0f
+            )
+            storySaveMediaListener?.onMediaSaveProgress(localMediaId, totalProgress)
+        } else {
+            val mediaModel: MediaModel = mediaStore.getSiteMediaWithId(site, localMediaId.toLong())
+            if (mediaModel != null) {
+                val mediaFile: MediaFile = FluxCUtils.mediaFileFromMediaModel(mediaModel)
+                storySaveMediaListener?.onMediaSaveSucceeded(localMediaId, mediaFile.getFileURL())
+            }
+        }
+    }
+
+    @Subscribe(threadMode = ThreadMode.MAIN)
+    fun onStoryFrameMediaIdChanged(event: StoryFrameMediaModelCreatedEvent) {
+        if (!lifecycle.currentState.isAtLeast(CREATED)) {
+            return
+        }
+        storySaveMediaListener?.onMediaModelCreatedForFile(event.oldId, event.newId.toString(), event.oldUrl)
+    }
+
+    @Subscribe(threadMode = ThreadMode.MAIN)
+    fun onStoryFrameSaveFailed(event: FrameSaveFailed) {
+        if (!lifecycle.currentState.isAtLeast(CREATED)) {
+            return
+        }
+        val localMediaId = event.frameId.toString()
+        // just update progress, we may have still some other frames in this story that need be saved.
+        // we will send the Failed signal once all the Story frames have been processed (see onStorySaveProcessFinished)
+        val progress: Float = storyRepositoryWrapper.getCurrentStorySaveProgress(event.storyIndex, 0.0f)
+        storySaveMediaListener?.onMediaSaveReattached(localMediaId, progress)
+        // storySaveMediaListener?.onMediaSaveFailed(localMediaId)
+    }
+
+    @Subscribe(threadMode = ThreadMode.MAIN)
+    fun onStorySaveProcessFinished(event: StorySaveResult) {
+        if (!lifecycle.currentState.isAtLeast(CREATED)) {
+            return
+        }
+        val story = storyRepositoryWrapper.getStoryAtIndex(event.storyIndex)
+        if (!event.isRetry && event.frameSaveResult.size == story.frames.size) {
+            // take the first frame IDs and mediaUri
+            val localMediaId = story.frames[0].id.toString()
+            storySaveMediaListener?.onStorySaveResult(localMediaId, event.isSuccess())
+        }
+    }
+
+    // Editor load / cancel events
+    fun onRequestMediaFilesEditorLoad(
+        activity: Activity,
+        postId: LocalId,
+        networkErrorOnLastMediaFetchAttempt: Boolean,
+        mediaFiles: ArrayList<Any>,
+        blockId: String
+    ): Boolean {
+        if (mediaFiles.isEmpty()) {
+            ActivityLauncher.editEmptyStoryForResult(
+                    activity,
+                    site,
+                    postId,
+                    storyRepositoryWrapper.getCurrentStoryIndex(),
+                    blockId
+            )
+            return false
+        }
+
+        val reCreateStoryResult = loadStoryFromStoriesPrefsUseCase
+                .loadStoryFromMemoryOrRecreateFromPrefs(site, mediaFiles)
+        if (!reCreateStoryResult.noSlidesLoaded) {
+            // Story instance loaded or re-created! Load it onto the StoryComposer for editing now
+            ActivityLauncher.editStoryForResult(
+                    activity,
+                    site,
+                    postId,
+                    reCreateStoryResult.storyIndex,
+                    reCreateStoryResult.allStorySlidesAreEditable,
+                    true,
+                    blockId
+            )
+        } else {
+            // unfortunately we couldn't even load the remote media Ids indicated by the StoryBlock so we can't allow
+            // editing at this time :(
+            if (networkErrorOnLastMediaFetchAttempt) {
+                // there was an error fetching media when we were loading the editor,
+                // we *may* still have a possibility, tell the user they may try refreshing the media again
+                val builder: Builder = MaterialAlertDialogBuilder(
+                        activity
+                )
+                builder.setTitle(activity.getString(R.string.dialog_edit_story_unavailable_title))
+                builder.setMessage(activity.getString(R.string.dialog_edit_story_unavailable_message))
+                builder.setPositiveButton(R.string.dialog_button_ok) { dialog, id ->
+                    dialog.dismiss()
+                }
+                val dialog = builder.create()
+                dialog.show()
+            } else {
+                // unrecoverable error, nothing we can do, inform the user :(.
+                val builder: Builder = MaterialAlertDialogBuilder(
+                        activity
+                )
+                builder.setTitle(activity.getString(R.string.dialog_edit_story_unrecoverable_title))
+                builder.setMessage(activity.getString(R.string.dialog_edit_story_unrecoverable_message))
+                builder.setPositiveButton(R.string.dialog_button_ok) { dialog, id -> dialog.dismiss() }
+                val dialog = builder.create()
+                dialog.show()
+            }
+        }
+        return reCreateStoryResult.noSlidesLoaded
+    }
+
+    fun onCancelUploadForMediaCollection(mediaFiles: ArrayList<Any>) {
+        // just cancel upload for each media
+        for (mediaFile in mediaFiles) {
+            val localMediaId = StringUtils.stringToInt(
+                    (mediaFile as HashMap<String?, Any?>)["id"].toString(), 0
+            )
+            if (localMediaId != 0) {
+                editorMedia.cancelMediaUploadAsync(localMediaId, false)
+            }
+        }
+    }
+
+    fun onRetryUploadForMediaCollection(
+        activity: Activity,
+        mediaFiles: ArrayList<Any>,
+        editorMediaUploadListener: EditorMediaUploadListener?
+    ) {
+        val mediaIdsToRetry = ArrayList<Int>()
+        for (mediaFile in mediaFiles) {
+            val localMediaId = StringUtils.stringToInt(
+                    (mediaFile as HashMap<String?, Any?>)["id"].toString(), 0
+            )
+            if (localMediaId != 0) {
+                val media: MediaModel = mediaStore.getMediaWithLocalId(localMediaId)
+                // if we find at least one item in the mediaFiles collection passed
+                // for which we don't have a local MediaModel, just tell the user and bail
+                if (media == null) {
+                    AppLog.e(
+                            MEDIA,
+                            "Can't find media with local id: $localMediaId"
+                    )
+                    val builder: Builder = MaterialAlertDialogBuilder(
+                            activity
+                    )
+                    builder.setTitle(activity.getString(string.cannot_retry_deleted_media_item_fatal))
+                    builder.setPositiveButton(string.yes) { dialog, id -> dialog.dismiss() }
+                    builder.setNegativeButton(activity.getString(string.no),
+                            DialogInterface.OnClickListener { dialog: DialogInterface, id: Int -> dialog.dismiss() }
+                    )
+                    val dialog = builder.create()
+                    dialog.show()
+                    return
+                }
+                if (media.url != null && media.uploadState == UPLOADED.toString()) {
+                    // Note: we should actually do this when the editor fragment starts instead of waiting for user
+                    // input.
+                    // Notify the editor fragment upload was successful and it should replace the local url by the
+                    // remote url.
+                    editorMediaUploadListener?.onMediaUploadSucceeded(
+                            media.id.toString(),
+                            FluxCUtils.mediaFileFromMediaModel(media)
+                    )
+                } else {
+                    UploadService.cancelFinalNotification(
+                            activity,
+                            editPostRepository.getPost()
+                    )
+                    UploadService.cancelFinalNotificationForMedia(activity, site)
+                    mediaIdsToRetry.add(localMediaId)
+                }
+            }
+        }
+
+        if (!mediaIdsToRetry.isEmpty()) {
+            editorMedia.retryFailedMediaAsync(mediaIdsToRetry)
+        }
+        AnalyticsTracker.track(EDITOR_UPLOAD_MEDIA_RETRIED)
+    }
+
+    fun onCancelSaveForMediaCollection(mediaFiles: ArrayList<Any>) {
+        // TODO implement cancelling save process for media collection
+    }
+}
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/posts/editor/media/AddLocalMediaToPostUseCase.kt b/WordPress/src/main/java/org/wordpress/android/ui/posts/editor/media/AddLocalMediaToPostUseCase.kt
index 06129dd43457..6deae0e3139f 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/posts/editor/media/AddLocalMediaToPostUseCase.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/posts/editor/media/AddLocalMediaToPostUseCase.kt
@@ -67,6 +67,14 @@ class AddLocalMediaToPostUseCase @Inject constructor(
                 optimizeMediaResult.optimizedMediaUris
         )
 
+        // here we pass a map of "old" (before optimisation) Uris to the new MediaModels which contain
+        // both the mediaModel ids and the optimized media URLs.
+        // this way, the listener will be able to process from other models pointing to the old URLs
+        // and make any needed updates
+        editorMediaListener.onMediaModelsCreatedFromOptimizedUris(
+                uriList.zip(createMediaModelsResult.mediaModels).toMap()
+        )
+
         // Add media to editor and optionally initiate upload
         addToEditorAndOptionallyUpload(createMediaModelsResult.mediaModels, editorMediaListener, doUploadAfterAdding)
 
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/posts/editor/media/EditorMediaListener.kt b/WordPress/src/main/java/org/wordpress/android/ui/posts/editor/media/EditorMediaListener.kt
index bb8254f726d7..e9fadf48d011 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/posts/editor/media/EditorMediaListener.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/posts/editor/media/EditorMediaListener.kt
@@ -1,5 +1,7 @@
 package org.wordpress.android.ui.posts.editor.media
 
+import android.net.Uri
+import org.wordpress.android.fluxc.model.MediaModel
 import org.wordpress.android.fluxc.model.PostImmutableModel
 import org.wordpress.android.ui.posts.EditPostActivity.OnPostUpdatedFromUIListener
 import org.wordpress.android.util.helpers.MediaFile
@@ -8,5 +10,6 @@ interface EditorMediaListener {
     fun appendMediaFiles(mediaFiles: Map<String, MediaFile>)
     fun syncPostObjectWithUiAndSaveIt(listener: OnPostUpdatedFromUIListener? = null)
     fun advertiseImageOptimization(listener: () -> Unit)
+    fun onMediaModelsCreatedFromOptimizedUris(oldUriToMediaFiles: Map<Uri, MediaModel>)
     fun getImmutablePost(): PostImmutableModel
 }
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/stories/SaveStoryGutenbergBlockUseCase.kt b/WordPress/src/main/java/org/wordpress/android/ui/stories/SaveStoryGutenbergBlockUseCase.kt
index 9f74693d0a78..8dae05f35665 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/stories/SaveStoryGutenbergBlockUseCase.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/stories/SaveStoryGutenbergBlockUseCase.kt
@@ -1,34 +1,63 @@
 package org.wordpress.android.ui.stories
 
 import com.google.gson.Gson
+import com.wordpress.stories.compose.frame.FrameIndex
+import com.wordpress.stories.compose.story.StoryFrameItem
+import com.wordpress.stories.compose.story.StoryIndex
 import org.wordpress.android.fluxc.model.PostModel
+import org.wordpress.android.fluxc.model.SiteModel
 import org.wordpress.android.ui.posts.EditPostRepository
+import org.wordpress.android.ui.stories.prefs.StoriesPrefs
+import org.wordpress.android.ui.stories.prefs.StoriesPrefs.TempId
 import org.wordpress.android.util.StringUtils
 import org.wordpress.android.util.helpers.MediaFile
 import javax.inject.Inject
 
-class SaveStoryGutenbergBlockUseCase @Inject constructor() {
+class SaveStoryGutenbergBlockUseCase @Inject constructor(
+    private val storiesPrefs: StoriesPrefs
+) {
     fun buildJetpackStoryBlockInPost(
         editPostRepository: EditPostRepository,
-        mediaFiles: Map<String, MediaFile>
+        mediaFiles: ArrayList<MediaFile>
     ) {
-        val jsonArrayMediaFiles = ArrayList<StoryMediaFileData>() // holds media files
-        for (entry in mediaFiles.entries) {
-            jsonArrayMediaFiles.add(buildMediaFileData(entry.value))
-        }
-
-        val storyBlock = StoryBlockData(mediaFiles = jsonArrayMediaFiles)
-
         editPostRepository.update { postModel: PostModel ->
-            postModel.setContent(createGBStoryBlockStringFromJson(storyBlock))
+            postModel.setContent(buildJetpackStoryBlockString(mediaFiles))
             true
         }
     }
 
+    private fun buildJetpackStoryBlockString(
+        mediaFiles: List<MediaFile>
+    ): String {
+        val jsonArrayMediaFiles = ArrayList<StoryMediaFileData>() // holds media files
+        for (mediaFile in mediaFiles) {
+            jsonArrayMediaFiles.add(buildMediaFileData(mediaFile))
+        }
+        return buildJetpackStoryBlockStringFromStoryMediaFileData(jsonArrayMediaFiles)
+    }
+
+    fun buildJetpackStoryBlockStringFromStoryMediaFileData(
+        storyMediaFileDataList: ArrayList<StoryMediaFileData>
+    ): String {
+        return createGBStoryBlockStringFromJson(StoryBlockData(mediaFiles = storyMediaFileDataList))
+    }
+
     private fun buildMediaFileData(mediaFile: MediaFile): StoryMediaFileData {
         return StoryMediaFileData(
                 alt = "",
-                id = mediaFile.id,
+                id = mediaFile.id.toString(),
+                link = StringUtils.notNullStr(mediaFile.fileURL),
+                type = if (mediaFile.isVideo) "video" else "image",
+                mime = StringUtils.notNullStr(mediaFile.mimeType),
+                caption = "",
+                url = StringUtils.notNullStr(mediaFile.fileURL)
+        )
+    }
+
+    fun buildMediaFileDataWithTemporaryId(mediaFile: MediaFile, temporaryId: String): StoryMediaFileData {
+        return StoryMediaFileData(
+                alt = "",
+                id = temporaryId, // mediaFile.id,
                 link = StringUtils.notNullStr(mediaFile.fileURL),
                 type = if (mediaFile.isVideo) "video" else "image",
                 mime = StringUtils.notNullStr(mediaFile.mimeType),
@@ -37,28 +66,108 @@ class SaveStoryGutenbergBlockUseCase @Inject constructor() {
         )
     }
 
-    fun replaceLocalMediaIdsWithRemoteMediaIdsInPost(post: PostModel, mediaFile: MediaFile) {
-        // here we're going to first find the block header, obtain the JSON object, re-parse it, and re-build the block
-        // WARNING note we're assuming to have only one Story block here so, beware of that!! this will find
-        // the first match only, always. (shouldn't be a problem because we're always creating a new Post in the
-        // app, but this won't make the cut if we decide to allow editing. Which we'll do by integrating with
-        // the gutenberg parser / validator anyway.
-        val content = post.content
-        val jsonString: String = content.substring(
-                content.indexOf(HEADING_START) + HEADING_START.length,
-                content.indexOf(HEADING_END)
+    fun buildMediaFileDataWithTemporaryIdNoMediaFile(
+        temporaryId: String,
+        url: String,
+        isVideo: Boolean
+    ): StoryMediaFileData {
+        return StoryMediaFileData(
+                alt = "",
+                id = temporaryId, // mediaFile.id,
+                link = url,
+                type = if (isVideo) "video" else "image",
+                mime = "",
+                caption = "",
+                url = url
         )
+    }
+
+    fun getTempIdForStoryFrame(tempIdBase: Long, storyIndex: StoryIndex, frameIndex: FrameIndex): String {
+        return TEMPORARY_ID_PREFIX + "$tempIdBase-$storyIndex-$frameIndex"
+    }
+
+    fun findAllStoryBlocksInPostAndPerformOnEachMediaFilesJson(
+        postModel: PostModel,
+        listener: DoWithMediaFilesListener
+    ) {
+        var content = postModel.content
+        // val contentMutable = StringBuilder(postModel.content)
+
+        // find next Story Block
+        // evaluate if this has a temporary id mediafile
+        // --> remove mediaFiles entirely
+        // set start index and go up.
+        var storyBlockStartIndex = 0
+        while (storyBlockStartIndex > -1 && storyBlockStartIndex < content.length) {
+            storyBlockStartIndex = content.indexOf(HEADING_START, storyBlockStartIndex)
+            if (storyBlockStartIndex > -1) {
+                val jsonString: String = content.substring(
+                        storyBlockStartIndex + HEADING_START.length,
+                        content.indexOf(HEADING_END))
+                content = listener.doWithMediaFilesJson(content, jsonString)
+                storyBlockStartIndex += HEADING_START.length
+            }
+        }
+
+        postModel.setContent(content)
+    }
+
+    fun replaceLocalMediaIdsWithRemoteMediaIdsInPost(postModel: PostModel, mediaFile: MediaFile) {
         val gson = Gson()
-        val storyBlockData: StoryBlockData? = gson.fromJson(jsonString, StoryBlockData::class.java)
-
-        val localMediaId = mediaFile.id
-        // now replace matching localMediaId with remoteMediaId in the mediaFileObjects, obtain the URLs and replace
-        storyBlockData?.mediaFiles?.find { it.id == localMediaId }?.apply {
-            id = mediaFile.mediaId.toInt()
-            link = mediaFile.fileURL
-            url = mediaFile.fileURL
+        findAllStoryBlocksInPostAndPerformOnEachMediaFilesJson(
+                postModel,
+                object : DoWithMediaFilesListener {
+                    override fun doWithMediaFilesJson(content: String, mediaFilesJsonString: String): String {
+                        var processedContent = content
+                        val storyBlockData: StoryBlockData? =
+                                gson.fromJson(mediaFilesJsonString, StoryBlockData::class.java)
+                        storyBlockData?.let { storyBlockDataNonNull ->
+                            val localMediaId = mediaFile.id.toString()
+                            // now replace matching localMediaId with remoteMediaId in the mediaFileObjects, obtain the URLs and replace
+                            val mediaFiles = storyBlockDataNonNull.mediaFiles.filter { it.id == localMediaId }
+                            if (mediaFiles.isNotEmpty()) {
+                                mediaFiles[0].apply {
+                                    id = mediaFile.mediaId
+                                    link = mediaFile.fileURL
+                                    url = mediaFile.fileURL
+
+                                    // look for the slide saved with the local id key (mediaFile.id), and re-convert to
+                                    // mediaId.
+                                    storiesPrefs.replaceLocalMediaIdKeyedSlideWithRemoteMediaIdKeyedSlide(
+                                            mediaFile.id,
+                                            mediaFile.mediaId.toLong(),
+                                            postModel.localSiteId.toLong()
+                                    )
+                                }
+                            }
+                            processedContent = content.replace(mediaFilesJsonString, gson.toJson(storyBlockDataNonNull))
+                        }
+                        return processedContent
+                    }
+                }
+        )
+    }
+
+    fun saveNewLocalFilesToStoriesPrefsTempSlides(
+        site: SiteModel,
+        storyIndex: StoryIndex,
+        frames: ArrayList<StoryFrameItem>
+    ) {
+        for ((frameIndex, frame) in frames.withIndex()) {
+            if (frame.id == null) {
+                val assignedTempId = getTempIdForStoryFrame(
+                        storiesPrefs.getNewIncrementalTempId(),
+                        storyIndex,
+                        frameIndex
+                )
+                frame.id = assignedTempId
+            }
+            storiesPrefs.saveSlideWithTempId(
+                    site.id.toLong(),
+                    TempId(requireNotNull(frame.id)), // should not be null at this point
+                    frame
+            )
         }
-        post.setContent(createGBStoryBlockStringFromJson(requireNotNull(storyBlockData)))
     }
 
     private fun createGBStoryBlockStringFromJson(storyBlock: StoryBlockData): String {
@@ -66,13 +175,17 @@ class SaveStoryGutenbergBlockUseCase @Inject constructor() {
         return HEADING_START + gson.toJson(storyBlock) + HEADING_END + DIV_PART + CLOSING_TAG
     }
 
+    interface DoWithMediaFilesListener {
+        fun doWithMediaFilesJson(content: String, mediaFilesJsonString: String): String
+    }
+
     data class StoryBlockData(
         val mediaFiles: List<StoryMediaFileData>
     )
 
     data class StoryMediaFileData(
-        val alt: String,
-        var id: Int,
+        var alt: String,
+        var id: String,
         var link: String,
         val type: String,
         val mime: String,
@@ -81,6 +194,7 @@ class SaveStoryGutenbergBlockUseCase @Inject constructor() {
     )
 
     companion object {
+        const val TEMPORARY_ID_PREFIX = "tempid-"
         const val HEADING_START = "<!-- wp:jetpack/story "
         const val HEADING_END = " -->\n"
         const val DIV_PART = "<div class=\"wp-story wp-block-jetpack-story\"></div>\n"
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/stories/StoryComposerActivity.kt b/WordPress/src/main/java/org/wordpress/android/ui/stories/StoryComposerActivity.kt
index 08fc213f505a..1b91eba4fa3e 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/stories/StoryComposerActivity.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/stories/StoryComposerActivity.kt
@@ -1,16 +1,21 @@
 package org.wordpress.android.ui.stories
 
+import android.app.Activity
 import android.app.PendingIntent
 import android.app.ProgressDialog
 import android.content.Intent
 import android.net.Uri
 import android.os.Bundle
+import androidx.fragment.app.DialogFragment
 import androidx.lifecycle.Observer
 import androidx.lifecycle.ViewModelProvider
 import androidx.lifecycle.ViewModelProviders
 import com.google.android.material.snackbar.Snackbar
 import com.wordpress.stories.compose.AuthenticationHeadersProvider
 import com.wordpress.stories.compose.ComposeLoopFrameActivity
+import com.wordpress.stories.compose.FrameSaveErrorDialog
+import com.wordpress.stories.compose.FrameSaveErrorDialogOk
+import com.wordpress.stories.compose.GenericAnnouncementDialogProvider
 import com.wordpress.stories.compose.MediaPickerProvider
 import com.wordpress.stories.compose.MetadataProvider
 import com.wordpress.stories.compose.NotificationIntentLoader
@@ -19,16 +24,27 @@ import com.wordpress.stories.compose.PrepublishingEventProvider
 import com.wordpress.stories.compose.SnackbarProvider
 import com.wordpress.stories.compose.StoryDiscardListener
 import com.wordpress.stories.compose.frame.StorySaveEvents.StorySaveResult
+import com.wordpress.stories.compose.story.StoryFrameItem
+import com.wordpress.stories.compose.story.StoryFrameItem.BackgroundSource.FileBackgroundSource
+import com.wordpress.stories.compose.story.StoryFrameItem.BackgroundSource.UriBackgroundSource
+import com.wordpress.stories.compose.story.StoryFrameItemType.VIDEO
 import com.wordpress.stories.compose.story.StoryIndex
+import com.wordpress.stories.compose.story.StoryRepository.DEFAULT_NONE_SELECTED
+import com.wordpress.stories.util.KEY_STORY_EDIT_MODE
 import com.wordpress.stories.util.KEY_STORY_INDEX
 import com.wordpress.stories.util.KEY_STORY_SAVE_RESULT
-import org.wordpress.android.R.id
+import org.wordpress.android.R
 import org.wordpress.android.WordPress
 import org.wordpress.android.analytics.AnalyticsTracker.Stat
 import org.wordpress.android.analytics.AnalyticsTracker.Stat.PREPUBLISHING_BOTTOM_SHEET_OPENED
+import org.wordpress.android.editor.gutenberg.GutenbergEditorFragment.ARG_STORY_BLOCK_ID
+import org.wordpress.android.editor.gutenberg.GutenbergEditorFragment.ARG_STORY_BLOCK_UPDATED_CONTENT
 import org.wordpress.android.fluxc.model.LocalOrRemoteId.LocalId
+import org.wordpress.android.fluxc.model.LocalOrRemoteId.RemoteId
+import org.wordpress.android.fluxc.model.MediaModel
 import org.wordpress.android.fluxc.model.PostImmutableModel
 import org.wordpress.android.fluxc.model.SiteModel
+import org.wordpress.android.fluxc.store.MediaStore
 import org.wordpress.android.fluxc.store.PostStore
 import org.wordpress.android.push.NotificationType
 import org.wordpress.android.push.NotificationsProcessingService
@@ -49,11 +65,16 @@ import org.wordpress.android.ui.posts.PublishPost
 import org.wordpress.android.ui.posts.editor.media.AddExistingMediaSource.WP_MEDIA_LIBRARY
 import org.wordpress.android.ui.posts.editor.media.EditorMediaListener
 import org.wordpress.android.ui.posts.prepublishing.PrepublishingBottomSheetListener
+import org.wordpress.android.ui.stories.SaveStoryGutenbergBlockUseCase.Companion.TEMPORARY_ID_PREFIX
+import org.wordpress.android.ui.stories.SaveStoryGutenbergBlockUseCase.StoryMediaFileData
 import org.wordpress.android.ui.stories.media.StoryEditorMedia
 import org.wordpress.android.ui.stories.media.StoryEditorMedia.AddMediaToStoryPostUiState
+import org.wordpress.android.ui.stories.prefs.StoriesPrefs
 import org.wordpress.android.ui.utils.AuthenticationUtils
 import org.wordpress.android.ui.utils.UiHelpers
+import org.wordpress.android.util.FluxCUtilsWrapper
 import org.wordpress.android.util.ListUtils
+import org.wordpress.android.util.MediaUtils
 import org.wordpress.android.util.WPMediaUtils
 import org.wordpress.android.util.WPPermissionUtils
 import org.wordpress.android.util.analytics.AnalyticsTrackerWrapper
@@ -75,7 +96,8 @@ class StoryComposerActivity : ComposeLoopFrameActivity(),
         EditPostActivityHook,
         PrepublishingEventProvider,
         PrepublishingBottomSheetListener,
-        PermanentPermissionDenialDialogProvider {
+        PermanentPermissionDenialDialogProvider,
+        GenericAnnouncementDialogProvider {
     private var site: SiteModel? = null
 
     @Inject lateinit var storyEditorMedia: StoryEditorMedia
@@ -88,26 +110,38 @@ class StoryComposerActivity : ComposeLoopFrameActivity(),
     @Inject lateinit var analyticsUtilsWrapper: AnalyticsUtilsWrapper
     @Inject internal lateinit var viewModelFactory: ViewModelProvider.Factory
     @Inject internal lateinit var mediaPickerLauncher: MediaPickerLauncher
+    @Inject lateinit var saveStoryGutenbergBlockUseCase: SaveStoryGutenbergBlockUseCase
+    @Inject lateinit var mediaStore: MediaStore
+    @Inject lateinit var fluxCUtilsWrapper: FluxCUtilsWrapper
+    @Inject lateinit var storyRepositoryWrapper: StoryRepositoryWrapper
+    @Inject lateinit var storiesPrefs: StoriesPrefs
+
     private lateinit var viewModel: StoryComposerViewModel
 
     private var addingMediaToEditorProgressDialog: ProgressDialog? = null
+    private val frameIdsToRemove = ArrayList<String>()
 
     override fun getSite() = site
     override fun getEditPostRepository() = editPostRepository
 
     companion object {
+        protected const val FRAGMENT_ANNOUNCEMENT_DIALOG = "story_announcement_dialog"
         const val STATE_KEY_POST_LOCAL_ID = "state_key_post_model_local_id"
         const val STATE_KEY_EDITOR_SESSION_DATA = "stateKeyEditorSessionData"
         const val KEY_POST_LOCAL_ID = "key_post_model_local_id"
+        const val KEY_LAUNCHED_FROM_GUTENBERG = "key_launched_from_gutenberg"
+        const val KEY_ALL_UNFLATTENED_LOADED_SLIDES = "key_all_unflattened_laoded_slides"
         const val UNUSED_KEY = "unused_key"
         const val BASE_FRAME_MEDIA_ERROR_NOTIFICATION_ID: Int = 72300
     }
 
     override fun onCreate(savedInstanceState: Bundle?) {
+        // convert our WPAndroid KEY_LAUNCHED_FROM_GUTENBERG flag into Stories general purpose EDIT_MODE flag
+        intent.putExtra(KEY_STORY_EDIT_MODE, intent.getBooleanExtra(KEY_LAUNCHED_FROM_GUTENBERG, false))
+        setMediaPickerProvider(this)
         super.onCreate(savedInstanceState)
         (application as WordPress).component().inject(this)
         setSnackbarProvider(this)
-        setMediaPickerProvider(this)
         setAuthenticationProvider(this)
         setNotificationExtrasLoader(this)
         setMetadataProvider(this)
@@ -116,6 +150,8 @@ class StoryComposerActivity : ComposeLoopFrameActivity(),
         setNotificationTrackerProvider((application as WordPress).getStoryNotificationTrackerProvider())
         setPrepublishingEventProvider(this)
         setPermissionDialogProvider(this)
+        setGenericAnnouncementDialogProvider(this)
+        setUseTempCaptureFile(false) // we need to keep the captured files for later Story editing
 
         initViewModel(savedInstanceState)
     }
@@ -161,8 +197,29 @@ class StoryComposerActivity : ComposeLoopFrameActivity(),
 
     private fun setupViewModelObservers() {
         viewModel.mediaFilesUris.observe(this, Observer { uriList ->
-            addFramesToStoryFromMediaUriList(uriList)
-            setDefaultSelectionAndUpdateBackgroundSurfaceUI(uriList)
+            val filteredList = uriList.filterNot { MediaUtils.isGif(it.toString()) }
+            if (filteredList.isNotEmpty()) {
+                addFramesToStoryFromMediaUriList(filteredList)
+                setDefaultSelectionAndUpdateBackgroundSurfaceUI(filteredList)
+            }
+
+            // finally if any of the files was a gif, warn the user
+            if (filteredList.size != uriList.size) {
+                FrameSaveErrorDialog.newInstance(
+                        title = getString(R.string.dialog_edit_story_unsupported_format_title),
+                        message = getString(R.string.dialog_edit_story_unsupported_format_message),
+                        hideCancelButton = true,
+                        listener = object : FrameSaveErrorDialogOk {
+                            override fun OnOkClicked(dialog: DialogFragment) {
+                                if (filteredList.isEmpty()) {
+                                    onStoryDiscarded()
+                                    setResult(Activity.RESULT_CANCELED)
+                                    finish()
+                                }
+                            }
+                        }
+                ).show(supportFragmentManager, FRAGMENT_ANNOUNCEMENT_DIALOG)
+            }
         })
 
         viewModel.openPrepublishingBottomSheet.observe(this, Observer { event ->
@@ -319,7 +376,7 @@ class StoryComposerActivity : ComposeLoopFrameActivity(),
                     if (messageHolder != null) {
                         WPSnackbar
                                 .make(
-                                        findViewById(id.editor_activity),
+                                        findViewById(org.wordpress.android.R.id.editor_activity),
                                         uiHelpers.getTextOfUiString(this, messageHolder.message),
                                         Snackbar.LENGTH_SHORT
                                 )
@@ -349,6 +406,10 @@ class StoryComposerActivity : ComposeLoopFrameActivity(),
         WPMediaUtils.advertiseImageOptimization(this) { listener.invoke() }
     }
 
+    override fun onMediaModelsCreatedFromOptimizedUris(oldUriToMediaFiles: Map<Uri, MediaModel>) {
+        // no op - we're not doing any special handling while composing, only when saving in the UploadBridge
+    }
+
     private fun updateAddingMediaToStoryComposerProgressDialogState(uiState: ProgressDialogUiState) {
         addingMediaToEditorProgressDialog = progressDialogHelper
                 .updateProgressDialogState(this, addingMediaToEditorProgressDialog, uiState, uiHelpers)
@@ -393,12 +454,26 @@ class StoryComposerActivity : ComposeLoopFrameActivity(),
     }
 
     override fun onStoryDiscarded() {
-        viewModel.onStoryDiscarded()
+        val launchedFromGutenberg = intent.getBooleanExtra(KEY_LAUNCHED_FROM_GUTENBERG, false)
+        viewModel.onStoryDiscarded(!launchedFromGutenberg)
+
+        if (launchedFromGutenberg) {
+            setResult(Activity.RESULT_CANCELED)
+            finish()
+        }
     }
 
     override fun onFrameRemove(storyIndex: StoryIndex, storyFrameIndex: Int) {
-        // no op
-        // TODO this will be implemented after the Story block support lands in develop
+        // keep record of the frames users deleted.
+        // But we'll only actually do cleanup once they tap on the DONE/SAVE button, because they could
+        // still bail out of the StoryComposer by tapping back or the cross and then admitting they want to lose
+        // the changes they made (this means, they'd want to keep the stories).
+        val story = storyRepositoryWrapper.getStoryAtIndex(storyIndex)
+        if (storyFrameIndex < story.frames.size) {
+            story.frames[storyFrameIndex].id?.let {
+                frameIdsToRemove.add(it)
+            }
+        }
     }
 
     private fun openPrepublishingBottomSheet() {
@@ -414,7 +489,119 @@ class StoryComposerActivity : ComposeLoopFrameActivity(),
     }
 
     override fun onStorySaveButtonPressed() {
-        viewModel.onStorySaveButtonPressed()
+        if (intent.getBooleanExtra(KEY_LAUNCHED_FROM_GUTENBERG, false)) {
+            // first of all, remove any StoriesPref for removed slides
+            site?.let {
+                val siteLocalId = it.id.toLong()
+                for (frameId in frameIdsToRemove) {
+                    if (storiesPrefs.checkSlideIdExists(siteLocalId, RemoteId(frameId.toLong()))) {
+                        storiesPrefs.deleteSlideWithRemoteId(siteLocalId, RemoteId(frameId.toLong()))
+                    } else {
+                        // shouldn't happen but just in case the story frame has just been created but not yet uploaded
+                        // let's delete the local slide pref.
+                        storiesPrefs.deleteSlideWithLocalId(siteLocalId, LocalId(frameId.toInt()))
+                    }
+                }
+            }
+
+            val savedContentIntent = Intent()
+            val blockId = intent.extras?.getString(ARG_STORY_BLOCK_ID)
+            savedContentIntent.putExtra(ARG_STORY_BLOCK_ID, blockId)
+
+            // check if story index has been passed through intent
+            var storyIndex = intent.getIntExtra(KEY_STORY_INDEX, DEFAULT_NONE_SELECTED)
+            if (storyIndex == DEFAULT_NONE_SELECTED) {
+                // if not, let's use the current Story
+                storyIndex = storyRepositoryWrapper.getCurrentStoryIndex()
+            }
+            // if we are editing this Story Block, then the id is assured to be a remote media file id, but
+            // the frame no longer points to such media Id on the site given we are just about to save a
+            // new flattened media. Hence, we need to set a new temporary Id we can use to identify
+            // this frame within the Gutenberg Story block inside a Post, and match it to an existing Story frame in
+            // our StoryRepository.
+            // All of this while still keeping a valid "old" remote URl and mediaId so the block is still
+            // rendered as non-empty on mobile gutenberg while the actual flattening happens on the service.
+            val updatedStoryBlock =
+                    saveStoryGutenbergBlockUseCase.buildJetpackStoryBlockStringFromStoryMediaFileData(
+                            buildStoryMediaFileDataListFromStoryFrameIndexes(storyIndex)
+                    )
+
+            savedContentIntent.putExtra(ARG_STORY_BLOCK_UPDATED_CONTENT, updatedStoryBlock)
+            setResult(Activity.RESULT_OK, savedContentIntent)
+
+            // TODO add tracks
+            processStorySaving()
+
+            finish()
+        } else {
+            // assume this is a new Post, and proceed to PrePublish bottom sheet
+            viewModel.onStorySaveButtonPressed()
+        }
+    }
+
+    private fun buildStoryMediaFileDataListFromStoryFrameIndexes(
+        storyIndex: StoryIndex
+    ): ArrayList<StoryMediaFileData> {
+        val storyMediaFileDataList = ArrayList<StoryMediaFileData>() // holds media files
+        val story = storyRepositoryWrapper.getStoryAtIndex(storyIndex)
+        for ((frameIndex, frame) in story.frames.withIndex()) {
+            val newTempId = storiesPrefs.getNewIncrementalTempId()
+            val assignedTempId = saveStoryGutenbergBlockUseCase.getTempIdForStoryFrame(
+                    newTempId, storyIndex, frameIndex
+            )
+            when (frame.id) {
+                // if the frame.id is null, this is a new frame that has been added to an edited Story
+                // so, we don't have much information yet. We do have the background source (not the flattened
+                // image yet) so, let's use that for now, and assign the temporaryID we'll use to send
+                // save progress events to Gutenberg.
+                null -> {
+                    val storyMediaFileData = buildStoryMediaFileDataForTemporarySlide(
+                            frame,
+                            assignedTempId
+                    )
+                    frame.id = storyMediaFileData.id
+                    storyMediaFileDataList.add(storyMediaFileData)
+                }
+                // if the frame.id is populated and is not a temporary id, this should be an actual MediaModel mediaId so,
+                // let's use that to obtain the mediaFile and then replace it with the temporary frame.id
+                else -> {
+                    frame.id?.let {
+                        if (it.startsWith(TEMPORARY_ID_PREFIX)) {
+                            val storyMediaFileData = buildStoryMediaFileDataForTemporarySlide(
+                                    frame,
+                                    it
+                            )
+                            storyMediaFileDataList.add(storyMediaFileData)
+                        } else {
+                            val mediaModel = mediaStore.getSiteMediaWithId(site, it.toLong())
+                            val mediaFile = fluxCUtilsWrapper.mediaFileFromMediaModel(mediaModel)
+                            mediaFile?.let { mediafile ->
+                                val storyMediaFileData =
+                                        saveStoryGutenbergBlockUseCase.buildMediaFileDataWithTemporaryId(
+                                                mediaFile = mediafile,
+                                                temporaryId = assignedTempId
+                                        )
+                                frame.id = storyMediaFileData.id
+                                storyMediaFileDataList.add(storyMediaFileData)
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return storyMediaFileDataList
+    }
+
+    private fun buildStoryMediaFileDataForTemporarySlide(frame: StoryFrameItem, tempId: String): StoryMediaFileData {
+        return saveStoryGutenbergBlockUseCase.buildMediaFileDataWithTemporaryIdNoMediaFile(
+                        temporaryId = tempId,
+                        url = if (frame.source is FileBackgroundSource) {
+                            (frame.source as FileBackgroundSource).file.toString()
+                        } else {
+                            (frame.source as UriBackgroundSource).contentUri.toString()
+                        },
+                        isVideo = (frame.frameItemType is VIDEO)
+                )
     }
 
     override fun onSubmitButtonClicked(publishPost: PublishPost) {
@@ -424,4 +611,16 @@ class StoryComposerActivity : ComposeLoopFrameActivity(),
     override fun showPermissionPermanentlyDeniedDialog(permission: String) {
         WPPermissionUtils.showPermissionAlwaysDeniedDialog(this, permission)
     }
+
+    override fun showGenericAnnouncementDialog() {
+        if (intent.getBooleanExtra(KEY_LAUNCHED_FROM_GUTENBERG, false)) {
+            if (!intent.getBooleanExtra(KEY_ALL_UNFLATTENED_LOADED_SLIDES, false)) {
+                // not all slides in this Story could be unflattened so, show the warning informative dialog
+                FrameSaveErrorDialog.newInstance(
+                        title = getString(R.string.dialog_edit_story_limited_title),
+                        message = getString(R.string.dialog_edit_story_limited_message)
+                ).show(supportFragmentManager, FRAGMENT_ANNOUNCEMENT_DIALOG)
+            }
+        }
+    }
 }
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/stories/StoryComposerViewModel.kt b/WordPress/src/main/java/org/wordpress/android/ui/stories/StoryComposerViewModel.kt
index 8f3b42c66d1c..04f82f03f678 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/stories/StoryComposerViewModel.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/stories/StoryComposerViewModel.kt
@@ -114,9 +114,11 @@ class StoryComposerViewModel @Inject constructor(
         outState.putSerializable(StoryComposerActivity.STATE_KEY_EDITOR_SESSION_DATA, postEditorAnalyticsSession)
     }
 
-    fun onStoryDiscarded() {
-        // delete empty post from database
-        dispatcher.dispatch(PostActionBuilder.newRemovePostAction(editPostRepository.getEditablePost()))
+    fun onStoryDiscarded(deleteDiscardedPost: Boolean) {
+        if (deleteDiscardedPost) {
+            // delete empty post from database
+            dispatcher.dispatch(PostActionBuilder.newRemovePostAction(editPostRepository.getEditablePost()))
+        }
         postEditorAnalyticsSession.setOutcome(CANCEL)
     }
 
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/stories/StoryRepositoryWrapper.kt b/WordPress/src/main/java/org/wordpress/android/ui/stories/StoryRepositoryWrapper.kt
index ee6deefcb3eb..2f0b472c6bfd 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/stories/StoryRepositoryWrapper.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/stories/StoryRepositoryWrapper.kt
@@ -1,5 +1,7 @@
 package org.wordpress.android.ui.stories
 
+import com.wordpress.stories.compose.story.StoryFrameItem
+import com.wordpress.stories.compose.story.StoryIndex
 import com.wordpress.stories.compose.story.StoryRepository
 import javax.inject.Inject
 
@@ -7,4 +9,14 @@ class StoryRepositoryWrapper @Inject constructor() {
     fun setCurrentStoryTitle(title: String) = StoryRepository.setCurrentStoryTitle(title)
     fun getCurrentStoryThumbnailUrl() = StoryRepository.getCurrentStoryThumbnailUrl()
     fun getCurrentStoryTitle() = StoryRepository.getCurrentStoryTitle()
+    fun getCurrentStoryIndex(): StoryIndex = StoryRepository.currentStoryIndex
+    fun loadStory(storyIndex: StoryIndex) = StoryRepository.loadStory(storyIndex)
+    fun addStoryFrameItemToCurrentStory(item: StoryFrameItem) =
+            StoryRepository.addStoryFrameItemToCurrentStory(item)
+    fun getStoryAtIndex(index: StoryIndex) = StoryRepository.getStoryAtIndex(index)
+    fun getImmutableStories() = StoryRepository.getImmutableStories()
+    fun getCurrentStorySaveProgress(storyIndex: StoryIndex, oneItemActualProgress: Float = 0.0F) =
+            StoryRepository.getCurrentStorySaveProgress(storyIndex, oneItemActualProgress)
+    fun findStoryContainingStoryFrameItemsByIds(ids: ArrayList<String>) =
+            StoryRepository.findStoryContainingStoryFrameItemsByIds(ids)
 }
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/stories/media/StoryMediaSaveUploadBridge.kt b/WordPress/src/main/java/org/wordpress/android/ui/stories/media/StoryMediaSaveUploadBridge.kt
index 1b16d1c9dc9b..51917328a1a5 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/stories/media/StoryMediaSaveUploadBridge.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/stories/media/StoryMediaSaveUploadBridge.kt
@@ -8,14 +8,17 @@ import androidx.lifecycle.LifecycleObserver
 import androidx.lifecycle.LifecycleOwner
 import androidx.lifecycle.OnLifecycleEvent
 import com.wordpress.stories.compose.frame.StorySaveEvents.StorySaveResult
-import com.wordpress.stories.compose.story.StoryRepository
+import com.wordpress.stories.compose.story.StoryFrameItem
 import kotlinx.coroutines.CoroutineDispatcher
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Job
 import kotlinx.coroutines.launch
+import org.greenrobot.eventbus.EventBus
 import org.greenrobot.eventbus.Subscribe
 import org.greenrobot.eventbus.ThreadMode.MAIN
 import org.wordpress.android.WordPress
+import org.wordpress.android.fluxc.model.LocalOrRemoteId.LocalId
+import org.wordpress.android.fluxc.model.MediaModel
 import org.wordpress.android.fluxc.model.PostImmutableModel
 import org.wordpress.android.fluxc.model.SiteModel
 import org.wordpress.android.modules.UI_THREAD
@@ -28,6 +31,9 @@ import org.wordpress.android.ui.posts.editor.media.EditorMediaListener
 import org.wordpress.android.ui.stories.SaveStoryGutenbergBlockUseCase
 import org.wordpress.android.ui.stories.StoriesTrackerHelper
 import org.wordpress.android.ui.stories.StoryComposerActivity
+import org.wordpress.android.ui.stories.StoryRepositoryWrapper
+import org.wordpress.android.ui.stories.prefs.StoriesPrefs
+import org.wordpress.android.ui.stories.prefs.StoriesPrefs.TempId
 import org.wordpress.android.ui.uploads.UploadServiceFacade
 import org.wordpress.android.util.EventBusWrapper
 import org.wordpress.android.util.NetworkUtilsWrapper
@@ -47,12 +53,14 @@ import kotlin.coroutines.CoroutineContext
 class StoryMediaSaveUploadBridge @Inject constructor(
     private val addLocalMediaToPostUseCase: AddLocalMediaToPostUseCase,
     private val savePostToDbUseCase: SavePostToDbUseCase,
+    private val storiesPrefs: StoriesPrefs,
     private val uploadService: UploadServiceFacade,
     private val networkUtils: NetworkUtilsWrapper,
     private val postUtils: PostUtilsWrapper,
     private val eventBusWrapper: EventBusWrapper,
+    private val storyRepositoryWrapper: StoryRepositoryWrapper,
     @Named(UI_THREAD) private val mainDispatcher: CoroutineDispatcher
-) : CoroutineScope, LifecycleObserver, EditorMediaListener {
+) : CoroutineScope, LifecycleObserver {
     // region Fields
     private var job: Job = Job()
     private lateinit var appContext: Context
@@ -87,37 +95,118 @@ class StoryMediaSaveUploadBridge @Inject constructor(
     // region Adding new composed / processed frames to a Story post
     private fun addNewStoryFrameMediaItemsToPostAndUploadAsync(site: SiteModel, saveResult: StorySaveResult) {
         // let's invoke the UploadService and enqueue all the files that were saved by the FrameSaveService
-        val frames = StoryRepository.getStoryAtIndex(saveResult.storyIndex).frames
+        val frames = storyRepositoryWrapper.getStoryAtIndex(saveResult.storyIndex).frames
         val uriList = frames.map { Uri.fromFile(it.composedFrameFile) }
-        addNewMediaItemsToPostAsync(site, uriList)
+        addNewMediaItemsToPostAsync(site, uriList, saveResult.isEditMode)
     }
 
-    private fun addNewMediaItemsToPostAsync(site: SiteModel, uriList: List<Uri>) {
+    private fun addNewMediaItemsToPostAsync(site: SiteModel, uriList: List<Uri>, isEditMode: Boolean) {
         // this is similar to addNewMediaItemsToEditorAsync in EditorMedia
         launch {
+            val localEditorMediaListener = object : EditorMediaListener {
+                override fun appendMediaFiles(mediaFiles: Map<String, MediaFile>) {
+                    if (!isEditMode) {
+                        saveStoryGutenbergBlockUseCase.buildJetpackStoryBlockInPost(
+                                editPostRepository,
+                                ArrayList(mediaFiles.values)
+                        )
+                    } else {
+                        // no op: in edit mode, we're handling replacing of the block's mediaFiles in Gutenberg
+                    }
+                }
+
+                override fun getImmutablePost(): PostImmutableModel {
+                    return editPostRepository.getPost()!!
+                }
+
+                override fun syncPostObjectWithUiAndSaveIt(listener: OnPostUpdatedFromUIListener?) {
+                    // no op
+                    // WARNING: don't remove this, we need to call the listener no matter what, so save & upload actually happen
+                    listener?.onPostUpdatedFromUI(null)
+                }
+
+                override fun advertiseImageOptimization(listener: () -> Unit) {
+                    // no op
+                }
+
+                override fun onMediaModelsCreatedFromOptimizedUris(oldUriToMediaFiles: Map<Uri, MediaModel>) {
+                    // in order to support Story editing capabilities, we save a serialized version of the Story slides
+                    // after their composedFrameFiles have been processed.
+
+                    // here we change the ids on the actual StoryFrameItems, and also update the flattened / composed image
+                    // urls with the new URLs which may have been replaced after image optimization
+                    for (story in storyRepositoryWrapper.getImmutableStories()) {
+                        // find the MediaModel for a given Uri from composedFrameFile
+                        for (frame in story.frames) {
+                            // if the old URI in frame.composedFrameFile exists as a key in the passed map, then update that
+                            // value with the new (probably optimized) URL and also keep track of the new id.
+                            val oldUri = Uri.fromFile(frame.composedFrameFile)
+                            val mediaModel = oldUriToMediaFiles.get(oldUri)
+                            mediaModel?.let {
+                                val oldTemporaryId = frame.id ?: ""
+                                frame.id = it.id.toString()
+
+                                // if prefs has this Slide with the temporary key, replace it
+                                // if not, let's now save the new slide with the local key
+                                storiesPrefs.replaceTempMediaIdKeyedSlideWithLocalMediaIdKeyedSlide(
+                                        TempId(oldTemporaryId),
+                                        LocalId(it.id),
+                                        it.localSiteId.toLong()
+                                ) ?: storiesPrefs.saveSlideWithLocalId(
+                                        it.localSiteId.toLong(),
+                                        // use the local id to save the original, will be replaced later
+                                        // with mediaModel.mediaId after uploading to the remote site
+                                        LocalId(it.id),
+                                        frame
+                                )
+
+                                // for editMode, we'll need to tell the Gutenberg Editor to replace their mediaFiles
+                                // ids with the new MediaModel local ids are created so, broadcasting the event.
+                                if (isEditMode) {
+                                    // finally send the event that this frameId has changed
+                                    EventBus.getDefault().post(
+                                            StoryFrameMediaModelCreatedEvent(
+                                                    oldTemporaryId,
+                                                    it.id,
+                                                    oldUri.toString(),
+                                                    frame
+                                            )
+                                    )
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
             addLocalMediaToPostUseCase.addNewMediaToEditorAsync(
                     uriList,
                     site,
                     freshlyTaken = false, // we don't care about this
-                    editorMediaListener = this@StoryMediaSaveUploadBridge,
+                    editorMediaListener = localEditorMediaListener,
                     doUploadAfterAdding = true
             )
-            postUtils.preparePostForPublish(requireNotNull(editPostRepository.getEditablePost()), site)
-            savePostToDbUseCase.savePostToDb(editPostRepository, site)
-
-            if (networkUtils.isNetworkAvailable()) {
-                postUtils.trackSavePostAnalytics(
-                        editPostRepository.getPost(),
-                        site
-                )
-                uploadService.uploadPost(appContext, editPostRepository.id, true)
-                // SAVED_ONLINE
-                storiesTrackerHelper.trackStoryPostSavedEvent(uriList.size, site, false)
-            } else {
-                // SAVED_LOCALLY
-                storiesTrackerHelper.trackStoryPostSavedEvent(uriList.size, site, true)
-                // no op, when network is available the offline mode in WPAndroid will gather the queued Post
-                // and try to upload.
+
+            // only save this post if we're not currently in edit mode
+            // In edit mode, we'll let the Gutenberg editor save the edited block if / when needed.
+            if (!isEditMode) {
+                postUtils.preparePostForPublish(requireNotNull(editPostRepository.getEditablePost()), site)
+                savePostToDbUseCase.savePostToDb(editPostRepository, site)
+
+                if (networkUtils.isNetworkAvailable()) {
+                    postUtils.trackSavePostAnalytics(
+                            editPostRepository.getPost(),
+                            site
+                    )
+                    uploadService.uploadPost(appContext, editPostRepository.id, true)
+                    // SAVED_ONLINE
+                    storiesTrackerHelper.trackStoryPostSavedEvent(uriList.size, site, false)
+                } else {
+                    // SAVED_LOCALLY
+                    storiesTrackerHelper.trackStoryPostSavedEvent(uriList.size, site, true)
+                    // no op, when network is available the offline mode in WPAndroid will gather the queued Post
+                    // and try to upload.
+                }
             }
         }
     }
@@ -132,15 +221,22 @@ class StoryMediaSaveUploadBridge @Inject constructor(
         // track event
         storiesTrackerHelper.trackStorySaveResultEvent(event)
 
-        // only trigger the bridge preparation and the UploadService if the Story is now complete
-        // otherwise we can be receiving successful retry events for individual frames we shouldn't care about just
-        // yet.
-        if (isStorySavingComplete(event)) {
-            // only remove it if it was successful - we want to keep it and show a snackbar once when the user
-            // comes back to the app if it wasn't, see MySiteFrament for details.
-            eventBusWrapper.removeStickyEvent(event)
-            event.metadata?.let {
-                val site = it.getSerializable(WordPress.SITE) as SiteModel
+        event.metadata?.let {
+            val site = it.getSerializable(WordPress.SITE) as SiteModel
+            val story = storyRepositoryWrapper.getStoryAtIndex(event.storyIndex)
+            saveStoryGutenbergBlockUseCase.saveNewLocalFilesToStoriesPrefsTempSlides(
+                    site,
+                    event.storyIndex,
+                    story.frames
+            )
+
+            // only trigger the bridge preparation and the UploadService if the Story is now complete
+            // otherwise we can be receiving successful retry events for individual frames we shouldn't care about just
+            // yet.
+            if (isStorySavingComplete(event) && !event.isRetry) {
+                // only remove it if it was successful - we want to keep it and show a snackbar once when the user
+                // comes back to the app if it wasn't, see MySiteFragment for details.
+                eventBusWrapper.removeStickyEvent(event)
                 editPostRepository.loadPostByLocalPostId(it.getInt(StoryComposerActivity.KEY_POST_LOCAL_ID))
                 // media upload tracking already in addLocalMediaToPostUseCase.addNewMediaToEditorAsync
                 addNewStoryFrameMediaItemsToPostAndUploadAsync(site, event)
@@ -150,24 +246,13 @@ class StoryMediaSaveUploadBridge @Inject constructor(
 
     private fun isStorySavingComplete(event: StorySaveResult): Boolean {
         return (event.isSuccess() &&
-                event.frameSaveResult.size == StoryRepository.getStoryAtIndex(event.storyIndex).frames.size)
-    }
-
-    override fun appendMediaFiles(mediaFiles: Map<String, MediaFile>) {
-        saveStoryGutenbergBlockUseCase.buildJetpackStoryBlockInPost(editPostRepository, mediaFiles)
+                event.frameSaveResult.size == storyRepositoryWrapper.getStoryAtIndex(event.storyIndex).frames.size)
     }
 
-    override fun getImmutablePost(): PostImmutableModel {
-        return editPostRepository.getPost()!!
-    }
-
-    override fun syncPostObjectWithUiAndSaveIt(listener: OnPostUpdatedFromUIListener?) {
-        // no op
-        // WARNING: don't remove this, we need to call the listener no matter what, so save & upload actually happen
-        listener?.onPostUpdatedFromUI(null)
-    }
-
-    override fun advertiseImageOptimization(listener: () -> Unit) {
-        // no op
-    }
+    data class StoryFrameMediaModelCreatedEvent(
+        val oldId: String,
+        val newId: Int,
+        val oldUrl: String,
+        val frame: StoryFrameItem
+    )
 }
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/stories/prefs/StoriesPrefs.kt b/WordPress/src/main/java/org/wordpress/android/ui/stories/prefs/StoriesPrefs.kt
new file mode 100644
index 000000000000..a96b2cdb8f48
--- /dev/null
+++ b/WordPress/src/main/java/org/wordpress/android/ui/stories/prefs/StoriesPrefs.kt
@@ -0,0 +1,263 @@
+package org.wordpress.android.ui.stories.prefs
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.net.Uri
+import androidx.preference.PreferenceManager
+import com.wordpress.stories.compose.story.StoryFrameItem
+import com.wordpress.stories.compose.story.StoryFrameItem.BackgroundSource.FileBackgroundSource
+import com.wordpress.stories.compose.story.StoryFrameItem.BackgroundSource.UriBackgroundSource
+import com.wordpress.stories.compose.story.StorySerializerUtils
+import org.wordpress.android.fluxc.model.LocalOrRemoteId.LocalId
+import org.wordpress.android.fluxc.model.LocalOrRemoteId.RemoteId
+import javax.inject.Inject
+import javax.inject.Singleton
+
+@Singleton
+class StoriesPrefs @Inject constructor(
+    private val context: Context
+) {
+    companion object {
+        private const val KEY_STORIES_SLIDE_INCREMENTAL_ID = "incremental_id"
+        private const val KEY_PREFIX_STORIES_SLIDE_ID = "story_slide_id-"
+        private const val KEY_PREFIX_TEMP_MEDIA_ID = "t-"
+        private const val KEY_PREFIX_LOCAL_MEDIA_ID = "l-"
+        private const val KEY_PREFIX_REMOTE_MEDIA_ID = "r-"
+    }
+
+    private fun buildSlideKey(siteId: Long, mediaId: RemoteId): String {
+        return KEY_PREFIX_STORIES_SLIDE_ID + siteId.toString() + "-" +
+                KEY_PREFIX_REMOTE_MEDIA_ID + mediaId.value.toString()
+    }
+
+    private fun buildSlideKey(siteId: Long, mediaId: LocalId): String {
+        return KEY_PREFIX_STORIES_SLIDE_ID + siteId.toString() + "-" +
+                KEY_PREFIX_LOCAL_MEDIA_ID + mediaId.value.toString()
+    }
+
+    private fun buildSlideKey(siteId: Long, tempId: TempId): String {
+        return KEY_PREFIX_STORIES_SLIDE_ID + siteId.toString() + "-" +
+                KEY_PREFIX_TEMP_MEDIA_ID + tempId.id
+    }
+
+    @SuppressLint("ApplySharedPref")
+    @Synchronized
+    fun getNewIncrementalTempId(): Long {
+        var currentIncrementalId = getIncrementalTempId()
+        currentIncrementalId++
+        val editor = PreferenceManager.getDefaultSharedPreferences(context).edit()
+        editor.putLong(KEY_STORIES_SLIDE_INCREMENTAL_ID, currentIncrementalId)
+        editor.commit()
+        return currentIncrementalId
+    }
+
+    private fun getIncrementalTempId(): Long {
+        return PreferenceManager.getDefaultSharedPreferences(context).getLong(
+                        KEY_STORIES_SLIDE_INCREMENTAL_ID,
+                        0
+                )
+    }
+
+    fun checkSlideIdExists(siteId: Long, mediaId: RemoteId): Boolean {
+        val slideIdKey = buildSlideKey(siteId, mediaId)
+        return PreferenceManager.getDefaultSharedPreferences(context).contains(slideIdKey)
+    }
+
+    private fun checkSlideIdExists(siteId: Long, tempId: TempId): Boolean {
+        val slideIdKey = buildSlideKey(siteId, tempId)
+        return PreferenceManager.getDefaultSharedPreferences(context).contains(slideIdKey)
+    }
+
+    private fun checkSlideIdExists(siteId: Long, localId: LocalId): Boolean {
+        val slideIdKey = buildSlideKey(siteId, localId)
+        return PreferenceManager.getDefaultSharedPreferences(context).contains(slideIdKey)
+    }
+
+    private fun checkSlideOriginalBackgroundMediaExists(siteId: Long, mediaId: RemoteId): Boolean {
+        return checkSlideOriginalBackgroundMediaExists(getSlideWithRemoteId(siteId, mediaId))
+    }
+
+    private fun checkSlideOriginalBackgroundMediaExists(siteId: Long, mediaId: TempId): Boolean {
+        return checkSlideOriginalBackgroundMediaExists(getSlideWithTempId(siteId, mediaId))
+    }
+
+    private fun checkSlideOriginalBackgroundMediaExists(siteId: Long, mediaId: LocalId): Boolean {
+        return checkSlideOriginalBackgroundMediaExists(getSlideWithLocalId(siteId, mediaId))
+    }
+
+    private fun checkSlideOriginalBackgroundMediaExists(storyFrameItem: StoryFrameItem?): Boolean {
+        storyFrameItem?.let { frame ->
+            // now check the background media exists or is accessible on this device
+            frame.source.let { source ->
+                if (source is FileBackgroundSource) {
+                    source.file?.let {
+                        return it.exists()
+                    } ?: return false
+                } else if (source is UriBackgroundSource) {
+                    source.contentUri?.let {
+                        return isUriAccessible(it)
+                    } ?: return false
+                }
+            }
+        }
+        return false
+    }
+
+    private fun isUriAccessible(uri: Uri): Boolean {
+        if (uri.toString().startsWith("http")) {
+            // TODO: assume it'll be accessible - we'll figure out later
+            // potentially force external download using MediaUtils.downloadExternalMedia() here to ensure
+            return true
+        }
+        try {
+            context.contentResolver.openInputStream(uri)?.let {
+                it.close()
+                return true
+            }
+        } catch (e: java.lang.Exception) {
+            e.printStackTrace()
+        }
+        return false
+    }
+
+    private fun saveSlide(slideIdKey: String, storySlideJson: String) {
+        val editor = PreferenceManager.getDefaultSharedPreferences(context).edit()
+        editor.putString(slideIdKey, storySlideJson)
+        editor.apply()
+    }
+
+    fun isValidSlide(siteId: Long, mediaId: RemoteId): Boolean {
+        return checkSlideIdExists(siteId, mediaId) &&
+                checkSlideOriginalBackgroundMediaExists(siteId, mediaId)
+    }
+
+    fun isValidSlide(siteId: Long, tempId: TempId): Boolean {
+        return checkSlideIdExists(siteId, tempId) &&
+                checkSlideOriginalBackgroundMediaExists(siteId, tempId)
+    }
+
+    fun isValidSlide(siteId: Long, localId: LocalId): Boolean {
+        return checkSlideIdExists(siteId, localId) &&
+                checkSlideOriginalBackgroundMediaExists(siteId, localId)
+    }
+
+    private fun getSlideJson(slideIdKey: String): String? {
+        return PreferenceManager.getDefaultSharedPreferences(context).getString(slideIdKey, null)
+    }
+
+    fun getSlideWithRemoteId(siteId: Long, mediaId: RemoteId): StoryFrameItem? {
+        val jsonSlide = getSlideJson(buildSlideKey(siteId, mediaId))
+        jsonSlide?.let {
+            return StorySerializerUtils.deserializeStoryFrameItem(jsonSlide)
+        } ?: return null
+    }
+
+    fun getSlideWithLocalId(siteId: Long, mediaId: LocalId): StoryFrameItem? {
+        val jsonSlide = getSlideJson(buildSlideKey(siteId, mediaId))
+        jsonSlide?.let {
+            return StorySerializerUtils.deserializeStoryFrameItem(jsonSlide)
+        } ?: return null
+    }
+
+    fun getSlideWithTempId(siteId: Long, tempId: TempId): StoryFrameItem? {
+        val jsonSlide = getSlideJson(buildSlideKey(siteId, tempId))
+        jsonSlide?.let {
+            return StorySerializerUtils.deserializeStoryFrameItem(jsonSlide)
+        } ?: return null
+    }
+
+    fun saveSlideWithTempId(siteId: Long, tempId: TempId, storyFrameItem: StoryFrameItem) {
+        val slideIdKey = buildSlideKey(siteId, tempId)
+        saveSlide(slideIdKey, StorySerializerUtils.serializeStoryFrameItem(storyFrameItem))
+    }
+
+    fun saveSlideWithLocalId(siteId: Long, mediaId: LocalId, storyFrameItem: StoryFrameItem) {
+        val slideIdKey = buildSlideKey(siteId, mediaId)
+        saveSlide(slideIdKey, StorySerializerUtils.serializeStoryFrameItem(storyFrameItem))
+    }
+
+    fun saveSlideWithRemoteId(siteId: Long, mediaId: RemoteId, storyFrameItem: StoryFrameItem) {
+        val slideIdKey = buildSlideKey(siteId, mediaId)
+        saveSlide(slideIdKey, StorySerializerUtils.serializeStoryFrameItem(storyFrameItem))
+    }
+
+    fun deleteSlideWithTempId(siteId: Long, tempId: TempId) {
+        val slideIdKey = buildSlideKey(siteId, tempId)
+        val editor = PreferenceManager.getDefaultSharedPreferences(context).edit()
+        editor.remove(slideIdKey)
+        editor.apply()
+    }
+
+    fun deleteSlideWithLocalId(siteId: Long, mediaId: LocalId) {
+        val slideIdKey = buildSlideKey(siteId, mediaId)
+        val editor = PreferenceManager.getDefaultSharedPreferences(context).edit()
+        editor.remove(slideIdKey)
+        editor.apply()
+    }
+
+    fun deleteSlideWithRemoteId(siteId: Long, mediaId: RemoteId) {
+        val slideIdKey = buildSlideKey(siteId, mediaId)
+        PreferenceManager.getDefaultSharedPreferences(context).edit().apply {
+            remove(slideIdKey)
+            apply()
+        }
+    }
+
+    // Phase 2: this method is likely used after a first phase in which a local media which only has a temporary id has
+    // then be replaced by a local id. At this point, we now have a remote Id and we can replace the local
+    // media id with the remote media id.
+    fun replaceLocalMediaIdKeyedSlideWithRemoteMediaIdKeyedSlide(
+        localIdKey: Int,
+        remoteIdKey: Long,
+        localSiteId: Long
+    ) {
+        // look for the slide saved with the local id key (mediaFile.id), and re-convert to mediaId.
+        getSlideWithLocalId(
+                localSiteId,
+                LocalId(localIdKey)
+        )?.let {
+            it.id = remoteIdKey.toString() // update the StoryFrameItem id to hold the same value as the remote mediaID
+            saveSlideWithRemoteId(
+                    localSiteId,
+                    RemoteId(remoteIdKey), // use the new mediaId as key
+                    it
+            )
+            // now delete the old entry
+            deleteSlideWithLocalId(
+                    localSiteId,
+                    LocalId(localIdKey)
+            )
+        }
+    }
+
+    // Phase 1: this method is likely used at the beginning when a local media which only has a temporary id needs now
+    // to be assigned with a localMediaId. At a later point when the media is uploaded to the server, it will be
+    // assigned a remote Id which will replace this localId.
+    fun replaceTempMediaIdKeyedSlideWithLocalMediaIdKeyedSlide(
+        tempId: TempId,
+        localId: LocalId,
+        localSiteId: Long
+    ): StoryFrameItem? {
+        // look for the slide saved with the local id key (mediaFile.id), and re-convert to mediaId.
+        getSlideWithTempId(
+                localSiteId,
+                tempId
+        )?.let {
+            it.id = localId.value.toString()
+            saveSlideWithLocalId(
+                    localSiteId,
+                    localId, // use the new localId as key
+                    it
+            )
+            // now delete the old entry
+            deleteSlideWithTempId(
+                    localSiteId,
+                    tempId
+            )
+            return it
+        }
+        return null
+    }
+
+    data class TempId(val id: String)
+}
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/stories/usecase/LoadStoryFromStoriesPrefsUseCase.kt b/WordPress/src/main/java/org/wordpress/android/ui/stories/usecase/LoadStoryFromStoriesPrefsUseCase.kt
new file mode 100644
index 000000000000..4b7d0e694015
--- /dev/null
+++ b/WordPress/src/main/java/org/wordpress/android/ui/stories/usecase/LoadStoryFromStoriesPrefsUseCase.kt
@@ -0,0 +1,146 @@
+package org.wordpress.android.ui.stories.usecase
+
+import android.net.Uri
+import com.wordpress.stories.compose.story.StoryFrameItem
+import com.wordpress.stories.compose.story.StoryIndex
+import com.wordpress.stories.compose.story.StoryRepository
+import dagger.Reusable
+import org.wordpress.android.fluxc.model.LocalOrRemoteId.LocalId
+import org.wordpress.android.fluxc.model.LocalOrRemoteId.RemoteId
+import org.wordpress.android.fluxc.model.MediaModel
+import org.wordpress.android.fluxc.model.SiteModel
+import org.wordpress.android.fluxc.store.MediaStore
+import org.wordpress.android.ui.stories.SaveStoryGutenbergBlockUseCase.Companion.TEMPORARY_ID_PREFIX
+import org.wordpress.android.ui.stories.StoryRepositoryWrapper
+import org.wordpress.android.ui.stories.prefs.StoriesPrefs
+import org.wordpress.android.ui.stories.prefs.StoriesPrefs.TempId
+import org.wordpress.android.util.StringUtils
+import java.util.ArrayList
+import java.util.HashMap
+import javax.inject.Inject
+
+@Reusable
+class LoadStoryFromStoriesPrefsUseCase @Inject constructor(
+    private val storyRepositoryWrapper: StoryRepositoryWrapper,
+    private val storiesPrefs: StoriesPrefs,
+    private val mediaStore: MediaStore
+) {
+    fun getMediaIdsFromStoryBlockBridgeMediaFiles(mediaFiles: ArrayList<Any>): ArrayList<String> {
+        val mediaIds = ArrayList<String>()
+        for (mediaFile in mediaFiles) {
+            val rawIdField = (mediaFile as HashMap<String?, Any?>)["id"]
+            if (rawIdField is String && rawIdField.startsWith(TEMPORARY_ID_PREFIX)) {
+                mediaIds.add(rawIdField)
+            } else {
+                val mediaIdLong = rawIdField
+                        .toString()
+                        .toDouble() // this conversion is needed to strip off decimals that can come from RN
+                        .toLong()
+                val mediaIdString = mediaIdLong.toString()
+                mediaIds.add(mediaIdString)
+            }
+        }
+        return mediaIds
+    }
+
+    fun areAllStorySlidesEditable(site: SiteModel, mediaIds: ArrayList<String>): Boolean {
+        for (mediaId in mediaIds) {
+            // if this is not a remote nor a local / temporary slide, return false
+            if (mediaId.startsWith(TEMPORARY_ID_PREFIX)) {
+                if (!storiesPrefs.isValidSlide(site.id.toLong(), TempId(mediaId))) {
+                    return false
+                }
+            } else {
+                if (!storiesPrefs.isValidSlide(site.id.toLong(), RemoteId(mediaId.toLong())) &&
+                        !storiesPrefs.isValidSlide(site.id.toLong(), LocalId(StringUtils.stringToInt(mediaId)))) {
+                    return false
+                }
+            }
+        }
+        return true
+    }
+
+    private fun loadOrReCreateStoryFromStoriesPrefs(site: SiteModel, mediaIds: ArrayList<String>): ReCreateStoryResult {
+        // the StoryRepository didn't have it but we have editable serialized slides so,
+        // create a new Story from scratch with these deserialized StoryFrameItems
+        var allStorySlidesAreEditable: Boolean = true
+        var noSlidesLoaded = false
+        var storyIndex = StoryRepository.DEFAULT_NONE_SELECTED
+        storyRepositoryWrapper.loadStory(storyIndex)
+        storyIndex = storyRepositoryWrapper.getCurrentStoryIndex()
+        for (mediaId in mediaIds) {
+            // let's check if this is a temporary id
+            if (mediaId.startsWith(TEMPORARY_ID_PREFIX)) {
+                storiesPrefs.getSlideWithTempId(
+                        site.getId().toLong(),
+                        TempId(mediaId)
+                )?.let {
+                    storyRepositoryWrapper.addStoryFrameItemToCurrentStory(it)
+                }
+            } else {
+                storiesPrefs.getSlideWithRemoteId(
+                        site.getId().toLong(),
+                        RemoteId(mediaId.toLong())
+                )?.let {
+                    storyRepositoryWrapper.addStoryFrameItemToCurrentStory(it)
+                } ?: run {
+                    allStorySlidesAreEditable = false
+
+                    // for this missing frame we'll create a new frame using the actual uploaded flattened media
+                    val tmpMediaIdsLong = ArrayList<Long>()
+                    tmpMediaIdsLong.add(mediaId.toLong())
+                    val mediaModelList: List<MediaModel> = mediaStore.getSiteMediaWithIds(
+                            site,
+                            tmpMediaIdsLong
+                    )
+                    if (mediaModelList.isEmpty()) {
+                        noSlidesLoaded = true
+                    } else {
+                        for (mediaModel in mediaModelList) {
+                            val storyFrameItem = StoryFrameItem.getNewStoryFrameItemFromUri(
+                                    Uri.parse(mediaModel.url),
+                                    mediaModel.isVideo
+                            )
+                            storyFrameItem.id = mediaModel.mediaId.toString()
+                            storyRepositoryWrapper.addStoryFrameItemToCurrentStory(storyFrameItem)
+                        }
+                    }
+                }
+            }
+        }
+
+        noSlidesLoaded = storyRepositoryWrapper.getStoryAtIndex(storyIndex).frames.size == 0
+
+        return ReCreateStoryResult(storyIndex, allStorySlidesAreEditable, noSlidesLoaded)
+    }
+
+    fun loadStoryFromMemoryOrRecreateFromPrefs(site: SiteModel, mediaFiles: ArrayList<Any>): ReCreateStoryResult {
+        val mediaIds = getMediaIdsFromStoryBlockBridgeMediaFiles(
+                mediaFiles
+        )
+        var allStorySlidesAreEditable = areAllStorySlidesEditable(
+                site,
+                mediaIds
+        )
+
+        // now look for a Story in the StoryRepository that has all these frames and, if not found, let's
+        // just build the Story object ourselves to match the order in which the media files were passed. 
+        var storyIndex = storyRepositoryWrapper.findStoryContainingStoryFrameItemsByIds(mediaIds)
+        if (storyIndex == StoryRepository.DEFAULT_NONE_SELECTED) {
+            // the StoryRepository didn't have it but we have editable serialized slides so,
+            // create a new Story from scratch with these deserialized StoryFrameItems
+            return loadOrReCreateStoryFromStoriesPrefs(
+                    site,
+                    mediaIds
+            )
+        } else {
+            return ReCreateStoryResult(storyIndex, allStorySlidesAreEditable, false)
+        }
+    }
+
+    data class ReCreateStoryResult(
+        val storyIndex: StoryIndex,
+        val allStorySlidesAreEditable: Boolean,
+        val noSlidesLoaded: Boolean
+    )
+}
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/uploads/MediaUploadReadyProcessor.java b/WordPress/src/main/java/org/wordpress/android/ui/uploads/MediaUploadReadyProcessor.java
index 8ff1bbdc09d1..7eb3180df08d 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/uploads/MediaUploadReadyProcessor.java
+++ b/WordPress/src/main/java/org/wordpress/android/ui/uploads/MediaUploadReadyProcessor.java
@@ -11,8 +11,16 @@
 import org.wordpress.android.ui.stories.SaveStoryGutenbergBlockUseCase;
 import org.wordpress.android.util.helpers.MediaFile;
 
+import javax.inject.Inject;
+
 
 public class MediaUploadReadyProcessor implements MediaUploadReadyListener {
+    @Inject SaveStoryGutenbergBlockUseCase mSaveStoryGutenbergBlockUseCase;
+
+    @Inject public MediaUploadReadyProcessor() {
+        ((WordPress) WordPress.getContext().getApplicationContext()).component().inject(this);
+    }
+
     @Override
     public PostModel replaceMediaFileWithUrlInPost(@Nullable PostModel post, String localMediaId, MediaFile mediaFile,
                                                    String siteUrl) {
@@ -21,9 +29,8 @@ public PostModel replaceMediaFileWithUrlInPost(@Nullable PostModel post, String
             boolean showGutenbergEditor = AppPrefs.isGutenbergEditorEnabled();
 
             if (PostUtils.contentContainsWPStoryGutenbergBlocks(post.getContent())) {
-                SaveStoryGutenbergBlockUseCase saveStoryGutenbergBlockUseCase = new SaveStoryGutenbergBlockUseCase();
-                saveStoryGutenbergBlockUseCase
-                        .replaceLocalMediaIdsWithRemoteMediaIdsInPost(post, mediaFile);
+                mSaveStoryGutenbergBlockUseCase
+                    .replaceLocalMediaIdsWithRemoteMediaIdsInPost(post, mediaFile);
             } else if (showGutenbergEditor && PostUtils.contentContainsGutenbergBlocks(post.getContent())) {
                 post.setContent(
                         PostUtils.replaceMediaFileWithUrlInGutenbergPost(post.getContent(), localMediaId, mediaFile,
diff --git a/WordPress/src/main/res/values/strings.xml b/WordPress/src/main/res/values/strings.xml
index cf3bf3256131..95a765cdf791 100644
--- a/WordPress/src/main/res/values/strings.xml
+++ b/WordPress/src/main/res/values/strings.xml
@@ -209,6 +209,7 @@
     <!-- Delete Media -->
     <string name="cannot_delete_multi_media_items">Some media can\'t be deleted at this time. Try again later.</string>
     <string name="cannot_retry_deleted_media_item">Media has been removed. Delete it from this post?</string>
+    <string name="cannot_retry_deleted_media_item_fatal">Media has been removed. Try editing your Story.</string>
     <string name="media_empty_list">You don\'t have any media</string>
     <string name="media_empty_search_list">No media matching your search</string>
     <string name="media_empty_image_list">You don\'t have any images</string>
@@ -2933,6 +2934,15 @@
     <string name="hpp_error_subtitle">Tap retry when you\'re back online.</string>
     <string name="hpp_retry_error">Please Check your internet connection and retry.</string>
 
+    <!-- Stories -->
+    <string name="dialog_edit_story_limited_title">Limited Story Editing</string>
+    <string name="dialog_edit_story_limited_message">This story was edited on a different device and the ability to edit certain objects may be limited.</string>
+    <string name="dialog_edit_story_unavailable_title">Can\'t edit Story</string>
+    <string name="dialog_edit_story_unavailable_message">Unable to load media for this story. Check your internet connection and try again in a moment.</string>
+    <string name="dialog_edit_story_unrecoverable_title">Can\'t edit Story</string>
+    <string name="dialog_edit_story_unrecoverable_message">We couldn\'t find the media for this story on the site.</string>
+    <string name="dialog_edit_story_unsupported_format_title">GIF files not supported</string>
+    <string name="dialog_edit_story_unsupported_format_message">One or more slides have not been added to your Story because Stories don\'t support GIF files at the moment. Please choose a static image or video background instead.</string>
     <string name="capture_button_alt">Capture</string>
     <string name="flip_button_alt">Flip camera</string>
     <string name="flash_button_alt">Flash</string>
diff --git a/WordPress/src/test/java/org/wordpress/android/ui/posts/mediauploadcompletionprocessors/TestContent.kt b/WordPress/src/test/java/org/wordpress/android/ui/posts/mediauploadcompletionprocessors/TestContent.kt
index efb10f6fbacb..b078f93e0495 100644
--- a/WordPress/src/test/java/org/wordpress/android/ui/posts/mediauploadcompletionprocessors/TestContent.kt
+++ b/WordPress/src/test/java/org/wordpress/android/ui/posts/mediauploadcompletionprocessors/TestContent.kt
@@ -547,10 +547,10 @@ object TestContent {
 <!-- /wp:gallery -->
 """
     const val storyMediaFileMimeTypeImage = "image/jpeg"
-    const val storyBlockWithLocalIdsAndUrls = """<!-- wp:jetpack/story {"mediaFiles":[{"alt":"","id":$localMediaId,"link":"$localImageUrl","type":"image","mime":"$storyMediaFileMimeTypeImage","caption":"","url":"$localImageUrl"},{"alt":"","id":$localMediaId2,"link":"$localImageUrl2","type":"image","mime":"$storyMediaFileMimeTypeImage","caption":"","url":"$localImageUrl2"}]} -->
+    const val storyBlockWithLocalIdsAndUrls = """<!-- wp:jetpack/story {"mediaFiles":[{"alt":"","id":"$localMediaId","link":"$localImageUrl","type":"image","mime":"$storyMediaFileMimeTypeImage","caption":"","url":"$localImageUrl"},{"alt":"","id":"$localMediaId2","link":"$localImageUrl2","type":"image","mime":"$storyMediaFileMimeTypeImage","caption":"","url":"$localImageUrl2"}]} -->
 <div class="wp-story wp-block-jetpack-story"></div>
 <!-- /wp:jetpack/story -->"""
-    const val storyBlockWithFirstRemoteIdsAndUrlsReplaced = """<!-- wp:jetpack/story {"mediaFiles":[{"alt":"","id":$remoteMediaId,"link":"$remoteImageUrl","type":"image","mime":"$storyMediaFileMimeTypeImage","caption":"","url":"$remoteImageUrl"},{"alt":"","id":$localMediaId2,"link":"$localImageUrl2","type":"image","mime":"$storyMediaFileMimeTypeImage","caption":"","url":"$localImageUrl2"}]} -->
+    const val storyBlockWithFirstRemoteIdsAndUrlsReplaced = """<!-- wp:jetpack/story {"mediaFiles":[{"alt":"","id":"$remoteMediaId","link":"$remoteImageUrl","type":"image","mime":"$storyMediaFileMimeTypeImage","caption":"","url":"$remoteImageUrl"},{"alt":"","id":"$localMediaId2","link":"$localImageUrl2","type":"image","mime":"$storyMediaFileMimeTypeImage","caption":"","url":"$localImageUrl2"}]} -->
 <div class="wp-story wp-block-jetpack-story"></div>
 <!-- /wp:jetpack/story -->"""
 
diff --git a/WordPress/src/test/java/org/wordpress/android/ui/stories/SaveStoryGutenbergBlockUseCaseTest.kt b/WordPress/src/test/java/org/wordpress/android/ui/stories/SaveStoryGutenbergBlockUseCaseTest.kt
index f2174e57c58c..aca40497d5f3 100644
--- a/WordPress/src/test/java/org/wordpress/android/ui/stories/SaveStoryGutenbergBlockUseCaseTest.kt
+++ b/WordPress/src/test/java/org/wordpress/android/ui/stories/SaveStoryGutenbergBlockUseCaseTest.kt
@@ -1,6 +1,12 @@
 package org.wordpress.android.ui.stories
 
+import android.content.Context
 import com.nhaarman.mockitokotlin2.any
+import com.nhaarman.mockitokotlin2.mock
+import com.nhaarman.mockitokotlin2.times
+import com.nhaarman.mockitokotlin2.verify
+import com.wordpress.stories.compose.story.StoryFrameItem
+import kotlinx.coroutines.InternalCoroutinesApi
 import com.nhaarman.mockitokotlin2.whenever
 import org.assertj.core.api.Assertions
 import org.junit.Before
@@ -8,22 +14,158 @@ import org.junit.Test
 import org.junit.runner.RunWith
 import org.mockito.Mock
 import org.mockito.junit.MockitoJUnitRunner
+import org.wordpress.android.BaseUnitTest
+import org.wordpress.android.TEST_DISPATCHER
 import org.wordpress.android.fluxc.model.PostModel
+import org.wordpress.android.fluxc.store.PostStore
 import org.wordpress.android.ui.posts.EditPostRepository
 import org.wordpress.android.ui.posts.mediauploadcompletionprocessors.TestContent
+import org.wordpress.android.ui.stories.SaveStoryGutenbergBlockUseCase.Companion.TEMPORARY_ID_PREFIX
+import org.wordpress.android.ui.stories.SaveStoryGutenbergBlockUseCase.StoryMediaFileData
+import org.wordpress.android.ui.stories.prefs.StoriesPrefs
 import org.wordpress.android.util.helpers.MediaFile
 
 @RunWith(MockitoJUnitRunner::class)
-class SaveStoryGutenbergBlockUseCaseTest {
+class SaveStoryGutenbergBlockUseCaseTest : BaseUnitTest() {
     private lateinit var saveStoryGutenbergBlockUseCase: SaveStoryGutenbergBlockUseCase
-    @Mock lateinit var editPostRepository: EditPostRepository
+    private lateinit var editPostRepository: EditPostRepository
+    @Mock lateinit var storiesPrefs: StoriesPrefs
+    @Mock lateinit var context: Context
+    @Mock lateinit var postStore: PostStore
     @Mock lateinit var mediaFile: MediaFile
     @Mock lateinit var mediaFile2: MediaFile
-    lateinit var postModel: PostModel
 
+    @InternalCoroutinesApi
     @Before
     fun setUp() {
-        saveStoryGutenbergBlockUseCase = SaveStoryGutenbergBlockUseCase()
+        saveStoryGutenbergBlockUseCase = SaveStoryGutenbergBlockUseCase(storiesPrefs)
+        editPostRepository = EditPostRepository(
+                mock(),
+                postStore,
+                mock(),
+                TEST_DISPATCHER,
+                TEST_DISPATCHER
+        )
+    }
+
+    @Test
+    fun `post with empty Story block is given an empty mediaFiles array`() {
+        // Given
+        val mediaFiles: ArrayList<MediaFile> = setupFluxCMediaFiles(emptyList = true)
+        editPostRepository.set { PostModel() }
+
+        // When
+        saveStoryGutenbergBlockUseCase.buildJetpackStoryBlockInPost(
+                editPostRepository,
+                mediaFiles
+        )
+
+        // Then
+        Assertions.assertThat(editPostRepository.content).isEqualTo(BLOCK_WITH_EMPTY_MEDIA_FILES)
+    }
+
+    @Test
+    fun `post with non-empty Story block is set given a non-empty mediaFiles array`() {
+        // Given
+        val mediaFiles: ArrayList<MediaFile> = setupFluxCMediaFiles(emptyList = false)
+        editPostRepository.set { PostModel() }
+
+        // When
+        saveStoryGutenbergBlockUseCase.buildJetpackStoryBlockInPost(
+                editPostRepository,
+                mediaFiles
+        )
+
+        // Then
+        Assertions.assertThat(editPostRepository.content).isEqualTo(BLOCK_WITH_NON_EMPTY_MEDIA_FILES)
+    }
+
+    @Test
+    fun `builds non-empty story block string from non-empty mediaFiles array`() {
+        // Given
+        val mediaFileDataList: ArrayList<StoryMediaFileData> = setupMediaFileDataList(emptyList = false)
+
+        // When
+        val result = saveStoryGutenbergBlockUseCase.buildJetpackStoryBlockStringFromStoryMediaFileData(
+                mediaFileDataList
+        )
+
+        // Then
+        Assertions.assertThat(result).isEqualTo(BLOCK_WITH_NON_EMPTY_MEDIA_FILES)
+    }
+
+    @Test
+    fun `builds empty story block string from empty mediaFiles array`() {
+        // Given
+        val mediaFileDataList: ArrayList<StoryMediaFileData> = setupMediaFileDataList(emptyList = true)
+
+        // When
+        val result = saveStoryGutenbergBlockUseCase.buildJetpackStoryBlockStringFromStoryMediaFileData(
+                mediaFileDataList
+        )
+
+        // Then
+        Assertions.assertThat(result).isEqualTo(BLOCK_WITH_EMPTY_MEDIA_FILES)
+    }
+
+    @Test
+    fun `verify all properties of mediaFileData that are created from buildMediaFileDataWithTemporaryId are correct`() {
+        // Given
+        val mediaFileId = 1
+        val mediaFile = getMediaFile(mediaFileId)
+
+        // When
+        val mediaFileData = saveStoryGutenbergBlockUseCase.buildMediaFileDataWithTemporaryId(
+                mediaFile,
+                TEMPORARY_ID_PREFIX + mediaFileId
+        )
+
+        // Then
+        Assertions.assertThat(mediaFileData.alt).isEqualTo("")
+        Assertions.assertThat(mediaFileData.id).isEqualTo(TEMPORARY_ID_PREFIX + mediaFileId)
+        Assertions.assertThat(mediaFileData.link).isEqualTo(
+                "https://testsite.files.wordpress.com/2020/10/wp-0000000.jpg"
+        )
+        Assertions.assertThat(mediaFileData.type).isEqualTo("image")
+        Assertions.assertThat(mediaFileData.mime).isEqualTo(mediaFile.mimeType)
+        Assertions.assertThat(mediaFileData.caption).isEqualTo("")
+        Assertions.assertThat(mediaFileData.url).isEqualTo(mediaFile.fileURL)
+    }
+
+    @Test
+    fun `local media id is found and gets replaced with remote media id`() {
+        // Given
+        val mediaFile = getMediaFile(1)
+        val postModel = PostModel()
+        postModel.setContent(BLOCK_WITH_NON_EMPTY_MEDIA_FILES)
+
+        // When
+        saveStoryGutenbergBlockUseCase.replaceLocalMediaIdsWithRemoteMediaIdsInPost(
+                postModel,
+                mediaFile
+        )
+
+        // Then
+        Assertions.assertThat(postModel.content).isEqualTo(BLOCK_WITH_NON_EMPTY_MEDIA_FILES_WITH_ONE_REMOTE_ID)
+    }
+
+    @Test
+    fun `slides are saved locally to storiedPrefs`() {
+        // Given
+        val frames = ArrayList<StoryFrameItem>()
+        frames.add(getOneStoryFrameItem("1"))
+        frames.add(getOneStoryFrameItem("2"))
+        frames.add(getOneStoryFrameItem("3"))
+
+        // When
+        saveStoryGutenbergBlockUseCase.saveNewLocalFilesToStoriesPrefsTempSlides(
+                mock(),
+                0,
+                frames
+        )
+
+        // Then
+        verify(storiesPrefs, times(3)).saveSlideWithTempId(any(), any(), any())
     }
 
     @Test
@@ -32,7 +174,7 @@ class SaveStoryGutenbergBlockUseCaseTest {
         whenever(mediaFile.id).thenReturn(TestContent.localMediaId.toInt())
         whenever(mediaFile.mediaId).thenReturn(TestContent.remoteMediaId)
         whenever(mediaFile.fileURL).thenReturn(TestContent.remoteImageUrl)
-        postModel = PostModel()
+        val postModel = PostModel()
         postModel.setContent(TestContent.storyBlockWithLocalIdsAndUrls)
 
         // act
@@ -45,12 +187,9 @@ class SaveStoryGutenbergBlockUseCaseTest {
     @Test
     fun `buildJetpackStoryBlockInPost sets the Post content to a Story block with local ids and urls`() {
         // arrange
-        postModel = PostModel()
-        whenever(editPostRepository.update<PostModel>(any())).then {
-            val action: (PostModel) -> Boolean = it.getArgument(0)
-            action(postModel)
-            null
-        }
+        val postModel = PostModel()
+        editPostRepository.set { postModel }
+
         whenever(mediaFile.id).thenReturn(TestContent.localMediaId.toInt())
         whenever(mediaFile.fileURL).thenReturn(TestContent.localImageUrl)
         whenever(mediaFile.mimeType).thenReturn(TestContent.storyMediaFileMimeTypeImage)
@@ -59,9 +198,9 @@ class SaveStoryGutenbergBlockUseCaseTest {
         whenever(mediaFile2.fileURL).thenReturn(TestContent.localImageUrl2)
         whenever(mediaFile2.mimeType).thenReturn(TestContent.storyMediaFileMimeTypeImage)
 
-        val mediaFiles = HashMap<String, MediaFile>()
-        mediaFiles.put(TestContent.localMediaId, mediaFile)
-        mediaFiles.put(TestContent.localMediaId2, mediaFile2)
+        val mediaFiles = ArrayList<MediaFile>()
+        mediaFiles.add(mediaFile)
+        mediaFiles.add(mediaFile2)
 
         // act
         saveStoryGutenbergBlockUseCase.buildJetpackStoryBlockInPost(editPostRepository, mediaFiles)
@@ -69,4 +208,124 @@ class SaveStoryGutenbergBlockUseCaseTest {
         // assert
         Assertions.assertThat(postModel.content).isEqualTo(TestContent.storyBlockWithLocalIdsAndUrls)
     }
+
+    private fun setupFluxCMediaFiles(
+        emptyList: Boolean
+    ): ArrayList<MediaFile> {
+        return when (emptyList) {
+            true -> ArrayList()
+            false -> {
+                val mediaFiles = ArrayList<MediaFile>()
+                for (i in 1..10) {
+                    val mediaFile = MediaFile()
+                    mediaFile.id = i
+                    mediaFile.mediaId = (i + 1000).toString()
+                    mediaFile.mimeType = "image/jpeg"
+                    mediaFile.fileURL = "https://testsite.files.wordpress.com/2020/10/wp-0000000.jpg"
+                    mediaFiles.add(mediaFile)
+                }
+                mediaFiles
+            }
+        }
+    }
+
+    private fun getMediaFile(id: Int): MediaFile {
+        val mediaFile = MediaFile()
+        mediaFile.id = id
+        mediaFile.mediaId = (id + 1000).toString()
+        mediaFile.mimeType = "image/jpeg"
+        mediaFile.fileURL = "https://testsite.files.wordpress.com/2020/10/wp-0000000.jpg"
+        return mediaFile
+    }
+
+    private fun getOneStoryFrameItem(id: String): StoryFrameItem {
+        return StoryFrameItem(
+                source = mock(),
+                id = id
+        )
+    }
+
+    private fun setupMediaFileDataList(
+        emptyList: Boolean
+    ): ArrayList<StoryMediaFileData> {
+        when (emptyList) {
+            true -> return ArrayList()
+            false -> {
+                val mediaFiles = ArrayList<StoryMediaFileData>()
+                for (i in 1..10) {
+                    val mediaFile = StoryMediaFileData(
+                            id = i.toString(),
+                            mime = "image/jpeg",
+                            link = "https://testsite.files.wordpress.com/2020/10/wp-0000000.jpg",
+                            url = "https://testsite.files.wordpress.com/2020/10/wp-0000000.jpg",
+                            alt = "",
+                            type = "image",
+                            caption = ""
+                    )
+                    mediaFiles.add(mediaFile)
+                }
+                return mediaFiles
+            }
+        }
+    }
+
+    companion object {
+        private const val BLOCK_WITH_EMPTY_MEDIA_FILES = "<!-- wp:jetpack/story {\"mediaFiles\":[]} -->\n" +
+                "<div class=\"wp-story wp-block-jetpack-story\"></div>\n" +
+                "<!-- /wp:jetpack/story -->"
+        private const val BLOCK_WITH_NON_EMPTY_MEDIA_FILES = "<!-- wp:jetpack/story " +
+                "{\"mediaFiles\":[{\"alt\":\"\",\"id\":\"1\",\"link\":\"https://testsite.files." +
+                "wordpress.com/2020/10/wp-0000000.jpg\",\"type\":\"image\",\"mime\":\"image/jpeg\",\"caption\":\"\"," +
+                "\"url\":\"https://testsite.files.wordpress.com/2020/10/wp-0000000.jpg\"},{\"alt\":\"\",\"id\":\"2\"," +
+                "\"link\":\"https://testsite.files.wordpress.com/2020/10/wp-0000000.jpg\",\"type\":\"image\",\"mime\"" +
+                ":\"image/jpeg\",\"caption\":\"\",\"url\":\"https://testsite.files.wordpress.com/2020/10/wp-0000000." +
+                "jpg\"},{\"alt\":\"\",\"id\":\"3\",\"link\":\"https://testsite.files.wordpress.com/2020/10/wp-0000000" +
+                ".jpg\",\"type\":\"image\",\"mime\":\"image/jpeg\",\"caption\":\"\",\"url\":\"https://testsite.files" +
+                ".wordpress.com/2020/10/wp-0000000.jpg\"},{\"alt\":\"\",\"id\":\"4\",\"link\":\"https://testsite.file" +
+                "s.wordpress.com/2020/10/wp-0000000.jpg\",\"type\":\"image\",\"mime\":\"image/jpeg\",\"caption\":\"\"" +
+                ",\"url\":\"https://testsite.files.wordpress.com/2020/10/wp-0000000.jpg\"},{\"alt\":\"\",\"id\":\"5\"" +
+                ",\"link\":\"https://testsite.files.wordpress.com/2020/10/wp-0000000.jpg\",\"type\":\"image\",\"mime" +
+                "\":\"image/jpeg\",\"caption\":\"\",\"url\":\"https://testsite.files.wordpress.com/2020/10/wp-0000000" +
+                ".jpg\"},{\"alt\":\"\",\"id\":\"6\",\"link\":\"https://testsite.files.wordpress.com/2020/10/wp-000000" +
+                "0.jpg\",\"type\":\"image\",\"mime\":\"image/jpeg\",\"caption\":\"\",\"url\":\"https://testsite.file" +
+                "s.wordpress.com/2020/10/wp-0000000.jpg\"},{\"alt\":\"\",\"id\":\"7\",\"link\":\"https://testsite.fi" +
+                "les.wordpress.com/2020/10/wp-0000000.jpg\",\"type\":\"image\",\"mime\":\"image/jpeg\",\"caption\":" +
+                "\"\",\"url\":\"https://testsite.files.wordpress.com/2020/10/wp-0000000.jpg\"},{\"alt\":\"\",\"id\":" +
+                "\"8\",\"link\":\"https://testsite.files.wordpress.com/2020/10/wp-0000000.jpg\",\"type\":\"image\"," +
+                "\"mime\":\"image/jpeg\",\"caption\":\"\",\"url\":\"https://testsite.files.wordpress.com/2020/10/wp-" +
+                "0000000.jpg\"},{\"alt\":\"\",\"id\":\"9\",\"link\":\"https://testsite.files.wordpress.com/2020/10/wp" +
+                "-0000000.jpg\",\"type\":\"image\",\"mime\":\"image/jpeg\",\"caption\":\"\",\"url\":\"https://tests" +
+                "ite.files.wordpress.com/2020/10/wp-0000000.jpg\"},{\"alt\":\"\",\"id\":\"10\",\"link\":\"https://te" +
+                "stsite.files.wordpress.com/2020/10/wp-0000000.jpg\",\"type\":\"image\",\"mime\":\"image/jpeg\",\"ca" +
+                "ption\":\"\",\"url\":\"https://testsite.files.wordpress.com/2020/10/wp-0000000.jpg\"}]} -->\n" +
+                "<div class=\"wp-story wp-block-jetpack-story\"></div>\n" +
+                "<!-- /wp:jetpack/story -->"
+        private const val BLOCK_WITH_NON_EMPTY_MEDIA_FILES_WITH_ONE_REMOTE_ID = "<!-- wp:jetpack/story " +
+                "{\"mediaFiles\":[{\"alt\":\"\",\"id\":\"1001\",\"link\":\"https://testsite.files." +
+                "wordpress.com/2020/10/wp-0000000.jpg\",\"type\":\"image\",\"mime\":\"image/jpeg\",\"caption\":\"\"," +
+                "\"url\":\"https://testsite.files.wordpress.com/2020/10/wp-0000000.jpg\"},{\"alt\":\"\",\"id\":\"2\"," +
+                "\"link\":\"https://testsite.files.wordpress.com/2020/10/wp-0000000.jpg\",\"type\":\"image\",\"mime\"" +
+                ":\"image/jpeg\",\"caption\":\"\",\"url\":\"https://testsite.files.wordpress.com/2020/10/wp-0000000." +
+                "jpg\"},{\"alt\":\"\",\"id\":\"3\",\"link\":\"https://testsite.files.wordpress.com/2020/10/wp-0000000" +
+                ".jpg\",\"type\":\"image\",\"mime\":\"image/jpeg\",\"caption\":\"\",\"url\":\"https://testsite.files" +
+                ".wordpress.com/2020/10/wp-0000000.jpg\"},{\"alt\":\"\",\"id\":\"4\",\"link\":\"https://testsite.file" +
+                "s.wordpress.com/2020/10/wp-0000000.jpg\",\"type\":\"image\",\"mime\":\"image/jpeg\",\"caption\":\"\"" +
+                ",\"url\":\"https://testsite.files.wordpress.com/2020/10/wp-0000000.jpg\"},{\"alt\":\"\",\"id\":\"5\"" +
+                ",\"link\":\"https://testsite.files.wordpress.com/2020/10/wp-0000000.jpg\",\"type\":\"image\",\"mime" +
+                "\":\"image/jpeg\",\"caption\":\"\",\"url\":\"https://testsite.files.wordpress.com/2020/10/wp-0000000" +
+                ".jpg\"},{\"alt\":\"\",\"id\":\"6\",\"link\":\"https://testsite.files.wordpress.com/2020/10/wp-000000" +
+                "0.jpg\",\"type\":\"image\",\"mime\":\"image/jpeg\",\"caption\":\"\",\"url\":\"https://testsite.file" +
+                "s.wordpress.com/2020/10/wp-0000000.jpg\"},{\"alt\":\"\",\"id\":\"7\",\"link\":\"https://testsite.fi" +
+                "les.wordpress.com/2020/10/wp-0000000.jpg\",\"type\":\"image\",\"mime\":\"image/jpeg\",\"caption\":" +
+                "\"\",\"url\":\"https://testsite.files.wordpress.com/2020/10/wp-0000000.jpg\"},{\"alt\":\"\",\"id\":" +
+                "\"8\",\"link\":\"https://testsite.files.wordpress.com/2020/10/wp-0000000.jpg\",\"type\":\"image\"," +
+                "\"mime\":\"image/jpeg\",\"caption\":\"\",\"url\":\"https://testsite.files.wordpress.com/2020/10/wp-" +
+                "0000000.jpg\"},{\"alt\":\"\",\"id\":\"9\",\"link\":\"https://testsite.files.wordpress.com/2020/10/wp" +
+                "-0000000.jpg\",\"type\":\"image\",\"mime\":\"image/jpeg\",\"caption\":\"\",\"url\":\"https://tests" +
+                "ite.files.wordpress.com/2020/10/wp-0000000.jpg\"},{\"alt\":\"\",\"id\":\"10\",\"link\":\"https://te" +
+                "stsite.files.wordpress.com/2020/10/wp-0000000.jpg\",\"type\":\"image\",\"mime\":\"image/jpeg\",\"ca" +
+                "ption\":\"\",\"url\":\"https://testsite.files.wordpress.com/2020/10/wp-0000000.jpg\"}]} -->\n" +
+                "<div class=\"wp-story wp-block-jetpack-story\"></div>\n" +
+                "<!-- /wp:jetpack/story -->"
+    }
 }
diff --git a/WordPress/src/test/java/org/wordpress/android/ui/stories/StoryComposerViewModelTest.kt b/WordPress/src/test/java/org/wordpress/android/ui/stories/StoryComposerViewModelTest.kt
index 33127f3c799a..e10f3519b2cc 100644
--- a/WordPress/src/test/java/org/wordpress/android/ui/stories/StoryComposerViewModelTest.kt
+++ b/WordPress/src/test/java/org/wordpress/android/ui/stories/StoryComposerViewModelTest.kt
@@ -192,15 +192,25 @@ class StoryComposerViewModelTest : BaseUnitTest() {
     }
 
     @Test
-    fun `If onStoryDiscarded is called then the post is removed with the dispatcher`() {
+    fun `If onStoryDiscarded is called then the post is removed with the dispatcher when deleteDiscardedPost true `() {
         // act
         viewModel.start(site, editPostRepository, LocalId(0), mock(), mock())
-        viewModel.onStoryDiscarded()
+        viewModel.onStoryDiscarded(deleteDiscardedPost = true)
 
         // assert
         verify(dispatcher, times(1)).dispatch(any<Action<PostModel>>())
     }
 
+    @Test
+    fun `If onStoryDiscarded is called then the post is not removed when deleteDiscardedPost false `() {
+        // act
+        viewModel.start(site, editPostRepository, LocalId(0), mock(), mock())
+        viewModel.onStoryDiscarded(deleteDiscardedPost = false)
+
+        // assert
+        verify(dispatcher, times(0)).dispatch(any<Action<PostModel>>())
+    }
+
     @Test
     fun `verify that triggering onStorySaveButtonPressed will trigger the associated openPrepublishingBottomSheet`() {
         // act
diff --git a/WordPress/src/test/java/org/wordpress/android/ui/stories/usecase/LoadStoryFromStoriesPrefsUseCaseTest.kt b/WordPress/src/test/java/org/wordpress/android/ui/stories/usecase/LoadStoryFromStoriesPrefsUseCaseTest.kt
new file mode 100644
index 000000000000..285954b3341b
--- /dev/null
+++ b/WordPress/src/test/java/org/wordpress/android/ui/stories/usecase/LoadStoryFromStoriesPrefsUseCaseTest.kt
@@ -0,0 +1,188 @@
+package org.wordpress.android.ui.stories.usecase
+
+import android.content.Context
+import com.nhaarman.mockitokotlin2.whenever
+import org.assertj.core.api.Assertions
+import org.junit.Before
+import org.junit.Test
+import org.junit.runner.RunWith
+import org.mockito.Mock
+import org.mockito.junit.MockitoJUnitRunner
+import org.wordpress.android.fluxc.model.LocalOrRemoteId.LocalId
+import org.wordpress.android.fluxc.model.LocalOrRemoteId.RemoteId
+import org.wordpress.android.fluxc.model.SiteModel
+import org.wordpress.android.fluxc.store.MediaStore
+import org.wordpress.android.ui.stories.SaveStoryGutenbergBlockUseCase.Companion.TEMPORARY_ID_PREFIX
+import org.wordpress.android.ui.stories.StoryRepositoryWrapper
+import org.wordpress.android.ui.stories.prefs.StoriesPrefs
+import org.wordpress.android.ui.stories.prefs.StoriesPrefs.TempId
+
+@RunWith(MockitoJUnitRunner::class)
+class LoadStoryFromStoriesPrefsUseCaseTest {
+    private lateinit var loadStoryFromStoriesPrefsUseCase: LoadStoryFromStoriesPrefsUseCase
+    @Mock lateinit var storyRepositoryWrapper: StoryRepositoryWrapper
+    @Mock lateinit var mediaStore: MediaStore
+    @Mock lateinit var storiesPrefs: StoriesPrefs
+    @Mock lateinit var context: Context
+    @Mock lateinit var siteModel: SiteModel
+
+    @Before
+    fun setUp() {
+        loadStoryFromStoriesPrefsUseCase = LoadStoryFromStoriesPrefsUseCase(
+                storyRepositoryWrapper,
+                storiesPrefs,
+                mediaStore
+        )
+    }
+
+    @Test
+    fun `obtain empty media ids list from empty mediaFiles array`() {
+        // Given
+        val mediaFiles: ArrayList<HashMap<String, Any>> = setupMediaFiles(emptyList = true)
+
+        // When
+        val mediaIds = loadStoryFromStoriesPrefsUseCase.getMediaIdsFromStoryBlockBridgeMediaFiles(
+                mediaFiles as ArrayList<Any>
+        )
+
+        // Then
+        Assertions.assertThat(mediaIds).isEmpty()
+    }
+
+    @Test
+    fun `obtain media ids list from non empty mediaFiles array`() {
+        // Given
+        val mediaFiles: ArrayList<HashMap<String, Any>> = setupMediaFiles(emptyList = false)
+
+        // When
+        val mediaIds = loadStoryFromStoriesPrefsUseCase.getMediaIdsFromStoryBlockBridgeMediaFiles(
+                mediaFiles as ArrayList<Any>
+        )
+
+        // Then
+        Assertions.assertThat(mediaIds).containsExactly("1", "2", "3", "4", "5", "6", "7", "8", "9", "10")
+    }
+
+    @Test
+    fun `verify all story slides are editable with temporary ids`() {
+        // Given
+        val tempMediaIds = setupTestSlides(markAsValid = true, useTempPrefix = true, useRemoteId = false)
+
+        // When
+        val result = loadStoryFromStoriesPrefsUseCase.areAllStorySlidesEditable(siteModel, tempMediaIds)
+
+        // Then
+        Assertions.assertThat(result).isTrue()
+    }
+
+    @Test
+    fun `verify all story slides are editable with local ids`() {
+        // Given
+        val mediaIdsLocal = setupTestSlides(markAsValid = true, useTempPrefix = false, useRemoteId = false)
+
+        // When
+        val result = loadStoryFromStoriesPrefsUseCase.areAllStorySlidesEditable(siteModel, mediaIdsLocal)
+
+        // Then
+        Assertions.assertThat(result).isTrue()
+    }
+
+    @Test
+    fun `verify all story slides are editable with remote ids`() {
+        // Given
+        val mediaIdsLocal = setupTestSlides(markAsValid = true, useTempPrefix = false, useRemoteId = true)
+
+        // When
+        val result = loadStoryFromStoriesPrefsUseCase.areAllStorySlidesEditable(siteModel, mediaIdsLocal)
+
+        // Then
+        Assertions.assertThat(result).isTrue()
+    }
+
+    @Test
+    fun `verify not all story slides are editable with temporary ids`() {
+        // Given
+        val mediaIdsLocal = setupTestSlides(markAsValid = false, useTempPrefix = true, useRemoteId = false)
+
+        // When
+        val result = loadStoryFromStoriesPrefsUseCase.areAllStorySlidesEditable(siteModel, mediaIdsLocal)
+
+        // Then
+        Assertions.assertThat(result).isFalse()
+    }
+
+    @Test
+    fun `verify not all story slides are editable with remote ids`() {
+        // Given
+        val mediaIdsLocal = setupTestSlides(markAsValid = false, useTempPrefix = false, useRemoteId = true)
+
+        // When
+        val result = loadStoryFromStoriesPrefsUseCase.areAllStorySlidesEditable(siteModel, mediaIdsLocal)
+
+        // Then
+        Assertions.assertThat(result).isFalse()
+    }
+
+    @Test
+    fun `verify not all story slides are editable with local ids`() {
+        // Given
+        val mediaIdsLocal = setupTestSlides(markAsValid = false, useTempPrefix = false, useRemoteId = false)
+
+        // When
+        val result = loadStoryFromStoriesPrefsUseCase.areAllStorySlidesEditable(siteModel, mediaIdsLocal)
+
+        // Then
+        Assertions.assertThat(result).isFalse()
+    }
+
+    private fun setupMediaFiles(
+        emptyList: Boolean
+    ): ArrayList<HashMap<String, Any>> {
+        return when (emptyList) {
+            true -> ArrayList()
+            false -> {
+                val mediaFiles = ArrayList<HashMap<String, Any>>()
+                for (i in 1..10) {
+                    val mediaFile = HashMap<String, Any>()
+                    mediaFile["mime"] = "image/jpeg"
+                    mediaFile["link"] = "https://testsite.files.wordpress.com/2020/10/wp-0000000.jpg"
+                    mediaFile["type"] = "image"
+                    mediaFile["id"] = i.toString()
+                    mediaFiles.add(mediaFile)
+                }
+                mediaFiles
+            }
+        }
+    }
+
+    private fun setupTestSlides(
+        markAsValid: Boolean,
+        useTempPrefix: Boolean,
+        useRemoteId: Boolean
+    ): ArrayList<String> {
+        val mediaIds = ArrayList<String>()
+
+        for (i in 1..10) {
+            val mediaId = (if (useTempPrefix) TEMPORARY_ID_PREFIX else "") + i.toString()
+            mediaIds.add(mediaId)
+            if (useTempPrefix) {
+                whenever(storiesPrefs.isValidSlide(siteModel.id.toLong(), TempId(mediaId))).thenReturn(markAsValid)
+            } else if (useRemoteId) {
+                whenever(
+                        storiesPrefs.isValidSlide(
+                                siteModel.id.toLong(),
+                                RemoteId(mediaId.toLong())
+                        )
+                ).thenReturn(markAsValid)
+            } else {
+                whenever(storiesPrefs.isValidSlide(
+                            siteModel.id.toLong(),
+                            LocalId(mediaId.toInt())
+                        )
+                ).thenReturn(markAsValid)
+            }
+        }
+
+        return mediaIds
+    }
+}
diff --git a/libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/EditorFragmentAbstract.java b/libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/EditorFragmentAbstract.java
index eccf9727ac94..c3ca0429d248 100644
--- a/libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/EditorFragmentAbstract.java
+++ b/libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/EditorFragmentAbstract.java
@@ -207,6 +207,10 @@ public interface EditorFragmentListener extends DialogVisibilityProvider {
         boolean onGutenbergEditorRequestStarterPageTemplatesTooltipShown();
         String getErrorMessageFromMedia(int mediaId);
         void showJetpackSettings();
+        void onStoryComposerLoadRequested(ArrayList<Object> mediaFiles, String blockId);
+        void onRetryUploadForMediaCollection(ArrayList<Object> mediaFiles);
+        void onCancelUploadForMediaCollection(ArrayList<Object> mediaFiles);
+        void onCancelSaveForMediaCollection(ArrayList<Object> mediaFiles);
     }
 
     /**
diff --git a/libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/gutenberg/GutenbergContainerFragment.java b/libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/gutenberg/GutenbergContainerFragment.java
index 1dc8b411e8fc..d215a8be808e 100644
--- a/libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/gutenberg/GutenbergContainerFragment.java
+++ b/libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/gutenberg/GutenbergContainerFragment.java
@@ -24,10 +24,12 @@
 import org.wordpress.mobile.WPAndroidGlue.WPAndroidGlueCode.OnGutenbergDidSendButtonPressedActionListener;
 import org.wordpress.mobile.WPAndroidGlue.WPAndroidGlueCode.OnImageFullscreenPreviewListener;
 import org.wordpress.mobile.WPAndroidGlue.WPAndroidGlueCode.OnLogGutenbergUserEventListener;
+import org.wordpress.mobile.WPAndroidGlue.WPAndroidGlueCode.OnReattachMediaSavingQueryListener;
+import org.wordpress.mobile.WPAndroidGlue.WPAndroidGlueCode.OnReattachMediaUploadQueryListener;
 import org.wordpress.mobile.WPAndroidGlue.WPAndroidGlueCode.OnStarterPageTemplatesTooltipShownEventListener;
 import org.wordpress.mobile.WPAndroidGlue.WPAndroidGlueCode.OnMediaEditorListener;
 import org.wordpress.mobile.WPAndroidGlue.WPAndroidGlueCode.OnMediaLibraryButtonListener;
-import org.wordpress.mobile.WPAndroidGlue.WPAndroidGlueCode.OnReattachQueryListener;
+import org.wordpress.mobile.WPAndroidGlue.WPAndroidGlueCode.OnMediaFilesCollectionBasedBlockEditorListener;
 
 import java.util.ArrayList;
 
@@ -53,7 +55,8 @@ public boolean hasReceivedAnyContent() {
     }
 
     public void attachToContainer(ViewGroup viewGroup, OnMediaLibraryButtonListener onMediaLibraryButtonListener,
-                                  OnReattachQueryListener onReattachQueryListener,
+                                  OnReattachMediaUploadQueryListener onReattachQueryListener,
+                                  OnReattachMediaSavingQueryListener onStorySavingReattachQueryListener,
                                   OnEditorMountListener onEditorMountListener,
                                   OnEditorAutosaveListener onEditorAutosaveListener,
                                   OnAuthHeaderRequestedListener onAuthHeaderRequestedListener,
@@ -67,11 +70,14 @@ public void attachToContainer(ViewGroup viewGroup, OnMediaLibraryButtonListener
                                           onGutenbergDidSendButtonPressedActionListener,
                                   AddMentionUtil addMentionUtil,
                                   OnStarterPageTemplatesTooltipShownEventListener onSPTTooltipShownEventListener,
+                                  OnMediaFilesCollectionBasedBlockEditorListener
+                                          onMediaFilesCollectionBasedBlockEditorListener,
                                   boolean isDarkMode) {
             mWPAndroidGlueCode.attachToContainer(
                     viewGroup,
                     onMediaLibraryButtonListener,
                     onReattachQueryListener,
+                    onStorySavingReattachQueryListener,
                     onEditorMountListener,
                     onEditorAutosaveListener,
                     onAuthHeaderRequestedListener,
@@ -83,6 +89,7 @@ public void attachToContainer(ViewGroup viewGroup, OnMediaLibraryButtonListener
                     onGutenbergDidSendButtonPressedActionListener,
                     addMentionUtil,
                     onSPTTooltipShownEventListener,
+                    onMediaFilesCollectionBasedBlockEditorListener,
                     isDarkMode);
     }
 
@@ -208,6 +215,10 @@ public void replaceUnsupportedBlock(String content, String blockId) {
         mWPAndroidGlueCode.replaceUnsupportedBlock(content, blockId);
     }
 
+    public void replaceStoryEditedBlock(String mediaFiles, String blockId) {
+        mWPAndroidGlueCode.replaceMediaFilesEditedBlock(mediaFiles, blockId);
+    }
+
     public void updateTheme(Bundle editorTheme) {
         mWPAndroidGlueCode.updateTheme(editorTheme);
     }
@@ -225,4 +236,28 @@ public void updateCapabilities(GutenbergPropsBuilder gutenbergPropsBuilder) {
             mWPAndroidGlueCode.updateCapabilities(gutenbergProps);
         }
     }
+
+    public void clearFileSaveStatus(final String mediaId) {
+        mWPAndroidGlueCode.clearFileSaveStatus(mediaId);
+    }
+
+    public void mediaFileSaveProgress(final String mediaId, final float progress) {
+        mWPAndroidGlueCode.mediaFileSaveProgress(mediaId, progress);
+    }
+
+    public void mediaFileSaveFailed(final String mediaId) {
+        mWPAndroidGlueCode.mediaFileSaveFailed(mediaId);
+    }
+
+    public void mediaFileSaveSucceeded(final String mediaId, final String mediaUrl) {
+        mWPAndroidGlueCode.mediaFileSaveSucceeded(mediaId, mediaUrl);
+    }
+
+    public void onStorySaveResult(final String storyFirstMediaId, final boolean success) {
+        mWPAndroidGlueCode.mediaCollectionFinalSaveResult(storyFirstMediaId, success);
+    }
+
+    public void onMediaModelCreatedForFile(String oldId, String newId, String oldUrl) {
+        mWPAndroidGlueCode.mediaIdChanged(oldId, newId, oldUrl);
+    }
 }
diff --git a/libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/gutenberg/GutenbergEditorFragment.java b/libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/gutenberg/GutenbergEditorFragment.java
index c525fff0bf60..b61743db4930 100644
--- a/libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/gutenberg/GutenbergEditorFragment.java
+++ b/libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/gutenberg/GutenbergEditorFragment.java
@@ -47,6 +47,7 @@
 import org.wordpress.android.util.DateTimeUtils;
 import org.wordpress.android.util.PermissionUtils;
 import org.wordpress.android.util.ProfilingUtils;
+import org.wordpress.android.util.StringUtils;
 import org.wordpress.android.util.ToastUtils;
 import org.wordpress.android.util.helpers.MediaFile;
 import org.wordpress.android.util.helpers.MediaGallery;
@@ -61,9 +62,11 @@
 import org.wordpress.mobile.WPAndroidGlue.WPAndroidGlueCode.OnGutenbergDidRequestUnsupportedBlockFallbackListener;
 import org.wordpress.mobile.WPAndroidGlue.WPAndroidGlueCode.OnGutenbergDidSendButtonPressedActionListener;
 import org.wordpress.mobile.WPAndroidGlue.WPAndroidGlueCode.OnLogGutenbergUserEventListener;
+import org.wordpress.mobile.WPAndroidGlue.WPAndroidGlueCode.OnReattachMediaSavingQueryListener;
+import org.wordpress.mobile.WPAndroidGlue.WPAndroidGlueCode.OnReattachMediaUploadQueryListener;
 import org.wordpress.mobile.WPAndroidGlue.WPAndroidGlueCode.OnStarterPageTemplatesTooltipShownEventListener;
 import org.wordpress.mobile.WPAndroidGlue.WPAndroidGlueCode.OnMediaLibraryButtonListener;
-import org.wordpress.mobile.WPAndroidGlue.WPAndroidGlueCode.OnReattachQueryListener;
+import org.wordpress.mobile.WPAndroidGlue.WPAndroidGlueCode.OnMediaFilesCollectionBasedBlockEditorListener;
 
 import java.util.ArrayList;
 import java.util.Date;
@@ -78,7 +81,8 @@
 public class GutenbergEditorFragment extends EditorFragmentAbstract implements
         EditorMediaUploadListener,
         IHistoryListener,
-        EditorThemeUpdateListener {
+        EditorThemeUpdateListener,
+        StorySaveMediaListener {
     private static final String GUTENBERG_EDITOR_NAME = "gutenberg";
     private static final String KEY_HTML_MODE_ENABLED = "KEY_HTML_MODE_ENABLED";
     private static final String KEY_EDITOR_DID_MOUNT = "KEY_EDITOR_DID_MOUNT";
@@ -86,6 +90,9 @@ public class GutenbergEditorFragment extends EditorFragmentAbstract implements
     private static final String ARG_GUTENBERG_WEB_VIEW_AUTH_DATA = "param_gutenberg_web_view_auth_data";
     private static final String ARG_TENOR_ENABLED = "param_tenor_enabled";
     private static final String ARG_GUTENBERG_PROPS_BUILDER = "param_gutenberg_props_builder";
+    private static final String ARG_STORY_EDITOR_REQUEST_CODE = "param_sory_editor_request_code";
+    public static final String ARG_STORY_BLOCK_ID = "story_block_id";
+    public static final String ARG_STORY_BLOCK_UPDATED_CONTENT = "story_block_updated_content";
 
     private static final int CAPTURE_PHOTO_PERMISSION_REQUEST_CODE = 101;
     private static final int CAPTURE_VIDEO_PERMISSION_REQUEST_CODE = 102;
@@ -103,6 +110,7 @@ public class GutenbergEditorFragment extends EditorFragmentAbstract implements
     private Runnable mInvalidateOptionsRunnable;
 
     private LiveTextWatcher mTextWatcher = new LiveTextWatcher();
+    private int mStoryBlockEditRequestCode;
 
     // pointer (to the Gutenberg container fragment) that outlives this fragment's Android lifecycle. The retained
     //  fragment can be alive and accessible even before it gets attached to an activity.
@@ -126,7 +134,8 @@ public static GutenbergEditorFragment newInstance(String title,
                                                       boolean isNewPost,
                                                       GutenbergWebViewAuthorizationData webViewAuthorizationData,
                                                       boolean tenorEnabled,
-                                                      GutenbergPropsBuilder gutenbergPropsBuilder) {
+                                                      GutenbergPropsBuilder gutenbergPropsBuilder,
+                                                      int storyBlockEditRequestCode) {
         GutenbergEditorFragment fragment = new GutenbergEditorFragment();
         Bundle args = new Bundle();
         args.putString(ARG_PARAM_TITLE, title);
@@ -135,6 +144,7 @@ public static GutenbergEditorFragment newInstance(String title,
         args.putParcelable(ARG_GUTENBERG_WEB_VIEW_AUTH_DATA, webViewAuthorizationData);
         args.putBoolean(ARG_TENOR_ENABLED, tenorEnabled);
         args.putParcelable(ARG_GUTENBERG_PROPS_BUILDER, gutenbergPropsBuilder);
+        args.putInt(ARG_STORY_EDITOR_REQUEST_CODE, storyBlockEditRequestCode);
         fragment.setArguments(args);
         return fragment;
     }
@@ -184,6 +194,7 @@ public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle sa
 
         if (getArguments() != null) {
             mIsNewPost = getArguments().getBoolean(ARG_IS_NEW_POST);
+            mStoryBlockEditRequestCode = getArguments().getInt(ARG_STORY_EDITOR_REQUEST_CODE);
         }
 
         ViewGroup gutenbergContainer = view.findViewById(R.id.gutenberg_container);
@@ -261,13 +272,21 @@ public void onOtherMediaButtonClicked(String mediaSource, boolean allowMultipleS
                         }
                     }
                 },
-                new OnReattachQueryListener() {
+                new OnReattachMediaUploadQueryListener() {
                     @Override
                     public void onQueryCurrentProgressForUploadingMedia() {
                         updateFailedMediaState();
                         updateMediaProgress();
                     }
                 },
+                new OnReattachMediaSavingQueryListener() {
+                    @Override public void onQueryCurrentProgressForSavingMedia() {
+                        // TODO: probably go through mFailedMediaIds, and see if any block in the post content
+                        // has these mediaFIleIds. If there's a match, mark such a block in FAILED state.
+                        updateFailedMediaState();
+                        updateMediaProgress();
+                    }
+                },
                 new OnEditorMountListener() {
                     @Override
                     public void onEditorDidMount(ArrayList<Object> unsupportedBlocks) {
@@ -332,6 +351,23 @@ public boolean onRequestStarterPageTemplatesTooltipShown() {
                         return mEditorFragmentListener.onGutenbergEditorRequestStarterPageTemplatesTooltipShown();
                     }
                 },
+                new OnMediaFilesCollectionBasedBlockEditorListener() {
+                    @Override public void onRequestMediaFilesEditorLoad(ArrayList<Object> mediaFiles, String blockId) {
+                        mEditorFragmentListener.onStoryComposerLoadRequested(mediaFiles, blockId);
+                    }
+
+                    @Override public void onCancelUploadForMediaCollection(ArrayList<Object> mediaFiles) {
+                        showCancelMediaCollectionUploadDialog(mediaFiles);
+                    }
+
+                    @Override public void onRetryUploadForMediaCollection(ArrayList<Object> mediaFiles) {
+                        showRetryMediaCollectionUploadDialog(mediaFiles);
+                    }
+
+                    @Override public void onCancelSaveForMediaCollection(ArrayList<Object> mediaFiles) {
+                        showCancelMediaCollectionSaveDialog(mediaFiles);
+                    }
+                },
                 GutenbergUtils.isDarkMode(getActivity()));
 
         // request dependency injection. Do this after setting min/max dimensions
@@ -422,6 +458,16 @@ public void onActivityResult(int requestCode, int resultCode, @Nullable Intent d
             } else {
                 trackWebViewClosed("dismiss");
             }
+        } else if (requestCode == mStoryBlockEditRequestCode) {
+            if (resultCode == Activity.RESULT_OK) {
+                // handle edited block content
+                String blockId = data.getStringExtra(ARG_STORY_BLOCK_ID);
+                String updatedBlockContent = data.getStringExtra(ARG_STORY_BLOCK_UPDATED_CONTENT);
+                getGutenbergContainerFragment().replaceStoryEditedBlock(updatedBlockContent, blockId);
+                // TODO maybe we need to track something here?
+            } else {
+                // TODO maybe we need to track something here?
+            }
         }
     }
 
@@ -493,14 +539,25 @@ public void resetUploadingMediaToFailed(Set<Integer> failedMediaIds) {
 
     private void updateFailedMediaState() {
         for (String mediaId : mFailedMediaIds) {
-            getGutenbergContainerFragment().mediaFileUploadFailed(Integer.valueOf(mediaId));
+            // upload progress should work on numeric mediaIds only
+            if (!TextUtils.isEmpty(mediaId) && TextUtils.isDigitsOnly(mediaId)) {
+                getGutenbergContainerFragment().mediaFileUploadFailed(Integer.valueOf(mediaId));
+            } else {
+                getGutenbergContainerFragment().mediaFileSaveFailed(mediaId);
+            }
         }
     }
 
     private void updateMediaProgress() {
         for (String mediaId : mUploadingMediaProgressMax.keySet()) {
-            getGutenbergContainerFragment().mediaFileUploadProgress(Integer.valueOf(mediaId),
-                    mUploadingMediaProgressMax.get(mediaId));
+            // upload progress should work on numeric mediaIds only
+            if (!TextUtils.isEmpty(mediaId) && TextUtils.isDigitsOnly(mediaId)) {
+                getGutenbergContainerFragment().mediaFileUploadProgress(Integer.valueOf(mediaId),
+                        mUploadingMediaProgressMax.get(mediaId));
+            } else {
+                getGutenbergContainerFragment().mediaFileSaveProgress(mediaId,
+                        mUploadingMediaProgressMax.get(mediaId));
+            }
         }
     }
 
@@ -587,6 +644,76 @@ public void onClick(DialogInterface dialog, int id) {
         dialog.show();
     }
 
+    private void showCancelMediaCollectionUploadDialog(ArrayList<Object> mediaFiles) {
+        // Display 'cancel upload' dialog
+        AlertDialog.Builder builder = new MaterialAlertDialogBuilder(getActivity());
+        builder.setTitle(getString(R.string.stop_upload_dialog_title));
+        builder.setPositiveButton(R.string.stop_upload_dialog_button_yes,
+                new DialogInterface.OnClickListener() {
+                    public void onClick(DialogInterface dialog, int id) {
+                        mEditorFragmentListener.onCancelUploadForMediaCollection(mediaFiles);
+                        // now signal Gutenberg upload failed, and remove the mediaIds from our tracking map
+                        for (Object mediaFile : mediaFiles) {
+                            // this conversion is needed to strip off decimals that can come from RN when using int as
+                            // string
+                            int localMediaId
+                                    = StringUtils.stringToInt(
+                                            ((HashMap<String, Object>) mediaFile).get("id").toString(), 0);
+                            getGutenbergContainerFragment().mediaFileUploadFailed(localMediaId);
+                            mUploadingMediaProgressMax.remove(localMediaId);
+                        }
+                        dialog.dismiss();
+                    }
+                });
+
+        builder.setNegativeButton(R.string.stop_upload_dialog_button_no, new DialogInterface.OnClickListener() {
+            public void onClick(DialogInterface dialog, int id) {
+                dialog.dismiss();
+            }
+        });
+
+        AlertDialog dialog = builder.create();
+        dialog.show();
+    }
+
+    private void showRetryMediaCollectionUploadDialog(ArrayList<Object> mediaFiles) {
+        // Display 'retry upload' dialog
+        AlertDialog.Builder builder = new MaterialAlertDialogBuilder(getActivity());
+        builder.setTitle(getString(R.string.retry_failed_upload_title));
+        builder.setPositiveButton(R.string.retry_failed_upload_yes,
+                new DialogInterface.OnClickListener() {
+                    public void onClick(DialogInterface dialog, int id) {
+                        mEditorFragmentListener.onRetryUploadForMediaCollection(mediaFiles);
+                        dialog.dismiss();
+                    }
+                });
+
+        builder.setNegativeButton(R.string.dialog_button_cancel, new DialogInterface.OnClickListener() {
+            public void onClick(DialogInterface dialog, int id) {
+                dialog.dismiss();
+            }
+        });
+
+        AlertDialog dialog = builder.create();
+        dialog.show();
+    }
+
+    private void showCancelMediaCollectionSaveDialog(ArrayList<Object> mediaFiles) {
+        // Display 'cancel upload' dialog
+        AlertDialog.Builder builder = new MaterialAlertDialogBuilder(getActivity());
+        builder.setTitle(getString(R.string.stop_save_dialog_title));
+        builder.setMessage(getString(R.string.stop_save_dialog_message));
+        builder.setPositiveButton(R.string.stop_save_dialog_ok_button,
+                new DialogInterface.OnClickListener() {
+                    public void onClick(DialogInterface dialog, int id) {
+                        dialog.dismiss();
+                    }
+                });
+
+        AlertDialog dialog = builder.create();
+        dialog.show();
+    }
+
     private void showImplicitKeyboard() {
         InputMethodManager keyboard = (InputMethodManager) getActivity().getSystemService(Context.INPUT_METHOD_SERVICE);
         keyboard.toggleSoftInput(InputMethodManager.SHOW_IMPLICIT, 0);
@@ -1013,6 +1140,39 @@ public void onEditorThemeUpdated(Bundle editorTheme) {
         getGutenbergContainerFragment().updateTheme(editorTheme);
     }
 
+    @Override public void onMediaSaveReattached(String localId, float currentProgress) {
+        mUploadingMediaProgressMax.put(localId, currentProgress);
+        getGutenbergContainerFragment().mediaFileSaveProgress(localId, currentProgress);
+    }
+
+    @Override public void onMediaSaveSucceeded(String localId, String mediaUrl) {
+        mUploadingMediaProgressMax.remove(localId);
+        getGutenbergContainerFragment().mediaFileSaveSucceeded(localId, mediaUrl);
+    }
+
+    @Override public void onMediaSaveProgress(String localId, float progress) {
+        mUploadingMediaProgressMax.put(localId, progress);
+        getGutenbergContainerFragment().mediaFileSaveProgress(localId, progress);
+    }
+
+    @Override public void onMediaSaveFailed(String localId) {
+        getGutenbergContainerFragment().mediaFileSaveFailed(localId);
+        mFailedMediaIds.add(localId);
+        mUploadingMediaProgressMax.remove(localId);
+    }
+
+    @Override public void onStorySaveResult(String storyFirstMediaId, boolean success) {
+        if (!success) {
+            mFailedMediaIds.add(storyFirstMediaId);
+            mUploadingMediaProgressMax.remove(storyFirstMediaId);
+        }
+        getGutenbergContainerFragment().onStorySaveResult(storyFirstMediaId, success);
+    }
+
+    @Override public void onMediaModelCreatedForFile(String oldId, String newId, String oldUrl) {
+        getGutenbergContainerFragment().onMediaModelCreatedForFile(oldId, newId, oldUrl);
+    }
+
     @Override
     public void showNotice(String message) {
         getGutenbergContainerFragment().showNotice(message);
diff --git a/libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/gutenberg/GutenbergPropsBuilder.kt b/libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/gutenberg/GutenbergPropsBuilder.kt
index 2f18c01038a8..e1bdd64b90df 100644
--- a/libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/gutenberg/GutenbergPropsBuilder.kt
+++ b/libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/gutenberg/GutenbergPropsBuilder.kt
@@ -8,6 +8,7 @@ import org.wordpress.mobile.WPAndroidGlue.GutenbergProps
 
 @Parcelize
 data class GutenbergPropsBuilder(
+    private val enableMediaFilesCollectionBlocks: Boolean,
     private val enableMentions: Boolean,
     private val enableUnsupportedBlockEditor: Boolean,
     private val unsupportedBlockEditorSwitch: Boolean,
@@ -18,6 +19,7 @@ data class GutenbergPropsBuilder(
     private val editorTheme: Bundle?
 ) : Parcelable {
     fun build(activity: Activity, isHtmlModeEnabled: Boolean) = GutenbergProps(
+            enableMediaFilesCollectionBlocks = enableMediaFilesCollectionBlocks,
             enableMentions = enableMentions,
             enableUnsupportedBlockEditor = enableUnsupportedBlockEditor,
             canEnableUnsupportedBlockEditor = unsupportedBlockEditorSwitch,
diff --git a/libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/gutenberg/StorySaveMediaListener.java b/libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/gutenberg/StorySaveMediaListener.java
new file mode 100644
index 000000000000..40eec3651fe7
--- /dev/null
+++ b/libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/gutenberg/StorySaveMediaListener.java
@@ -0,0 +1,10 @@
+package org.wordpress.android.editor.gutenberg;
+
+public interface StorySaveMediaListener {
+    void onMediaSaveReattached(String localId, float currentProgress);
+    void onMediaSaveSucceeded(String localId, String mediaUrl);
+    void onMediaSaveProgress(String localId, float progress);
+    void onMediaSaveFailed(String localId);
+    void onStorySaveResult(String storyFirstMediaId, boolean success);
+    void onMediaModelCreatedForFile(String oldId, String newId, String oldUrl);
+}
diff --git a/libs/editor/WordPressEditor/src/main/res/values/strings.xml b/libs/editor/WordPressEditor/src/main/res/values/strings.xml
index 3473aa1ea6c1..5f0296797549 100644
--- a/libs/editor/WordPressEditor/src/main/res/values/strings.xml
+++ b/libs/editor/WordPressEditor/src/main/res/values/strings.xml
@@ -20,6 +20,10 @@
     <string name="stop_upload_dialog_title">Stop uploading?</string>
     <string name="upload_finished_toast">Can\'t stop the upload because it\'s already finished</string>
 
+    <string name="stop_save_dialog_title">Files saving</string>
+    <string name="stop_save_dialog_message">Please wait until all files have been saved</string>
+    <string name="stop_save_dialog_ok_button">OK</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>
diff --git a/libs/gutenberg-mobile b/libs/gutenberg-mobile
index 7bdc0c0cf619..3e94d94eea66 160000
--- a/libs/gutenberg-mobile
+++ b/libs/gutenberg-mobile
@@ -1 +1 @@
-Subproject commit 7bdc0c0cf61985421a9d599a8b028f414fef74e1
+Subproject commit 3e94d94eea667ed3b4c8f435916b2e8312f56db7
diff --git a/libs/stories-android b/libs/stories-android
index 0946cae3a775..130daec678db 160000
--- a/libs/stories-android
+++ b/libs/stories-android
@@ -1 +1 @@
-Subproject commit 0946cae3a775ea9c49b2ceb57324bd4f4ce228d9
+Subproject commit 130daec678db776512eaac37e7f1422289b05a40