Merge pull request #14769 from wordpress-mobile/rnmobile/refactor/gal…

…lery-as-nested-image-blocks [Gutenberg] Gallery refactor as nested image blocks
wordpress-mobile · Jul 7, 2021 · 5c1cf69 · 5c1cf69
2 parents 886f6e9 + 705588c
commit 5c1cf69
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 3 deletions.
diff --git a/...org/wordpress/android/ui/posts/mediauploadcompletionprocessors/BlockProcessorFactory.java b/...org/wordpress/android/ui/posts/mediauploadcompletionprocessors/BlockProcessorFactory.java
@@ -36,7 +36,8 @@ BlockProcessorFactory init(String localId, MediaFile mediaFile, String siteUrl)
         mMediaBlockTypeBlockProcessorMap.put(IMAGE, new ImageBlockProcessor(localId, mediaFile));
         mMediaBlockTypeBlockProcessorMap.put(VIDEO, new VideoBlockProcessor(localId, mediaFile));
         mMediaBlockTypeBlockProcessorMap.put(MEDIA_TEXT, new MediaTextBlockProcessor(localId, mediaFile));
-        mMediaBlockTypeBlockProcessorMap.put(GALLERY, new GalleryBlockProcessor(localId, mediaFile, siteUrl));
+        mMediaBlockTypeBlockProcessorMap.put(GALLERY, new GalleryBlockProcessor(localId, mediaFile, siteUrl,
+                mMediaUploadCompletionProcessor));
         mMediaBlockTypeBlockProcessorMap.put(COVER, new CoverBlockProcessor(localId, mediaFile,
                 mMediaUploadCompletionProcessor));
         mMediaBlockTypeBlockProcessorMap.put(FILE, new FileBlockProcessor(localId, mediaFile));

diff --git a/...org/wordpress/android/ui/posts/mediauploadcompletionprocessors/GalleryBlockProcessor.java b/...org/wordpress/android/ui/posts/mediauploadcompletionprocessors/GalleryBlockProcessor.java
@@ -9,7 +9,11 @@
 import org.jsoup.nodes.Element;
 import org.wordpress.android.util.helpers.MediaFile;
 
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
+
 public class GalleryBlockProcessor extends BlockProcessor {
+    private final MediaUploadCompletionProcessor mMediaUploadCompletionProcessor;
     private String mAttachmentPageUrl;
     private String mLinkTo;
 
@@ -18,8 +22,18 @@ public class GalleryBlockProcessor extends BlockProcessor {
      */
     private String mGalleryImageQuerySelector;
 
-    public GalleryBlockProcessor(String localId, MediaFile mediaFile, String siteUrl) {
+    /**
+     * Template pattern used to match and splice inner image blocks in the refactored gallery format
+     */
+    private static final Pattern PATTERN_GALLERY_INNER = Pattern.compile(new StringBuilder()
+            .append("(^.*?<figure class=\"[^\"]*?wp-block-gallery[^\"]*?\">\\s*)")
+            .append("(.*)") // inner block contents
+            .append("(\\s*</figure>\\s*<!-- /wp:gallery -->.*)").toString(), Pattern.DOTALL);
+
+    public GalleryBlockProcessor(String localId, MediaFile mediaFile, String siteUrl, MediaUploadCompletionProcessor
+            mediaUploadCompletionProcessor) {
         super(localId, mediaFile);
+        mMediaUploadCompletionProcessor = mediaUploadCompletionProcessor;
         mGalleryImageQuerySelector = new StringBuilder()
                 .append("img[data-id=\"")
                 .append(localId)
@@ -67,6 +81,11 @@ public GalleryBlockProcessor(String localId, MediaFile mediaFile, String siteUrl
     }
 
     @Override boolean processBlockJsonAttributes(JsonObject jsonAttributes) {
+        // The presence of `imageCount` means we have the new format, so return early to defer to recursive processing
+        if (jsonAttributes.has("imageCount")) {
+            return false;
+        }
+
         JsonArray ids = jsonAttributes.getAsJsonArray("ids");
         if (ids == null || ids.isJsonNull()) {
             return false;
@@ -84,4 +103,21 @@ public GalleryBlockProcessor(String localId, MediaFile mediaFile, String siteUrl
         }
         return false;
     }
+
+    @Override String processInnerBlock(String block) {
+        Matcher innerMatcher = PATTERN_GALLERY_INNER.matcher(block);
+        boolean innerCapturesFound = innerMatcher.find();
+
+        // process inner contents recursively
+        if (innerCapturesFound) {
+            String innerProcessed = mMediaUploadCompletionProcessor.processContent(innerMatcher.group(2)); //
+            return new StringBuilder()
+                    .append(innerMatcher.group(1))
+                    .append(innerProcessed)
+                    .append(innerMatcher.group(3))
+                    .toString();
+        }
+
+        return block;
+    }
 }
diff --git a/...g/wordpress/android/ui/posts/mediauploadcompletionprocessors/GalleryBlockProcessorTest.kt b/...g/wordpress/android/ui/posts/mediauploadcompletionprocessors/GalleryBlockProcessorTest.kt
@@ -2,6 +2,7 @@ package org.wordpress.android.ui.posts.mediauploadcompletionprocessors
 
 import com.nhaarman.mockitokotlin2.any
 import com.nhaarman.mockitokotlin2.mock
+import com.nhaarman.mockitokotlin2.verify
 import com.nhaarman.mockitokotlin2.whenever
 import org.assertj.core.api.Assertions
 import org.junit.Test
@@ -11,14 +12,16 @@ import org.wordpress.android.util.helpers.MediaFile
 
 class GalleryBlockProcessorTest {
     private val mediaFile: MediaFile = mock()
+    private val mediaUploadCompletionProcessor: MediaUploadCompletionProcessor = mock()
     private lateinit var processor: GalleryBlockProcessor
 
     @Before
     fun before() {
         whenever(mediaFile.mediaId).thenReturn(TestContent.remoteMediaId)
         whenever(mediaFile.fileURL).thenReturn(TestContent.remoteImageUrl)
         whenever(mediaFile.getAttachmentPageURL(any())).thenReturn(TestContent.attachmentPageUrl)
-        processor = GalleryBlockProcessor(TestContent.localMediaId, mediaFile, TestContent.siteUrl)
+        processor = GalleryBlockProcessor(TestContent.localMediaId, mediaFile, TestContent.siteUrl,
+                mediaUploadCompletionProcessor)
     }
 
     @Test
@@ -56,4 +59,10 @@ class GalleryBlockProcessorTest {
         val processedBlock = processor.processBlock(TestContent.oldGalleryBlockLinkToAttachmentPage)
         Assertions.assertThat(processedBlock).isEqualTo(TestContent.newGalleryBlockLinkToAttachmentPage)
     }
+
+    @Test
+    fun `processBlock defers the refactored gallery to inner blocks recursion`() {
+        processor.processBlock(TestContent.oldRefactoredGalleryBlock)
+        verify(mediaUploadCompletionProcessor).processContent(TestContent.oldRefactoredGalleryBlockInnerBlocks)
+    }
 }
diff --git a/...ss/android/ui/posts/mediauploadcompletionprocessors/MediaUploadCompletionProcessorTest.kt b/...ss/android/ui/posts/mediauploadcompletionprocessors/MediaUploadCompletionProcessorTest.kt
@@ -94,4 +94,16 @@ class MediaUploadCompletionProcessorTest {
         val processedContent = processor.processContent(TestContent.oldPostWithGalleryJsonNullId)
         Assertions.assertThat(processedContent).isEqualTo(TestContent.newPostWithGalleryJsonNullId)
     }
+
+    @Test
+    fun `processPost can handle original galleries with refactored galleries present`() {
+        val processedContent = processor.processContent(TestContent.oldPostWithMixedGalleriesOriginal)
+        Assertions.assertThat(processedContent).isEqualTo(TestContent.newPostWithMixedGalleriesOriginal)
+    }
+
+    @Test
+    fun `processPost can handle refactored galleries with original galleries present`() {
+        val processedContent = processor.processContent(TestContent.oldPostWithMixedGalleriesRefactored)
+        Assertions.assertThat(processedContent).isEqualTo(TestContent.newPostWithMixedGalleriesRefactored)
+    }
 }
diff --git a/...c/test/java/org/wordpress/android/ui/posts/mediauploadcompletionprocessors/TestContent.kt b/...c/test/java/org/wordpress/android/ui/posts/mediauploadcompletionprocessors/TestContent.kt
@@ -261,6 +261,61 @@ object TestContent {
   </ul>
 </figure>
 <!-- /wp:gallery -->
+"""
+
+    const val oldRefactoredGalleryBlockInnerBlocks = """<!-- wp:image {"id":${remoteMediaId2},"align":"full"} -->
+<figure class="wp-block-image alignfull">
+  <img src="$remoteImageUrl2" alt="" class="wp-image-${remoteMediaId2}">
+  <figcaption><em>Gutenberg</em> on web</figcaption>
+</figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"id":${localMediaId},"align":"full","sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image alignfull">
+  <img src="$localImageUrl" alt="" class="wp-image-${localMediaId}">
+  <figcaption><em>Gutenberg</em> on web</figcaption>
+</figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"id":${remoteMediaId2},"align":"full"} -->
+<figure class="wp-block-image alignfull">
+  <img src="$remoteImageUrl2" alt="" class="wp-image-${remoteMediaId2}">
+  <figcaption><em>Gutenberg</em> on web</figcaption>
+</figure>
+<!-- /wp:image -->
+"""
+    const val oldRefactoredGalleryBlock = """<!-- wp:gallery {"linkTo":"none","imageCount":3} -->
+<figure class="wp-block-gallery blocks-gallery-grid has-nested-images columns-3 is-cropped">
+$oldRefactoredGalleryBlockInnerBlocks</figure>
+<!-- /wp:gallery -->
+"""
+
+    const val newRefactoredGalleryBlockInnerBlocks = """<!-- wp:image {"id":${remoteMediaId2},"align":"full"} -->
+<figure class="wp-block-image alignfull">
+  <img src="$remoteImageUrl2" alt="" class="wp-image-${remoteMediaId2}">
+  <figcaption><em>Gutenberg</em> on web</figcaption>
+</figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"id":${remoteMediaId},"align":"full","sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image alignfull">
+  <img src="$remoteImageUrl" alt="" class="wp-image-${remoteMediaId}">
+  <figcaption><em>Gutenberg</em> on web</figcaption>
+</figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"id":${remoteMediaId2},"align":"full"} -->
+<figure class="wp-block-image alignfull">
+  <img src="$remoteImageUrl2" alt="" class="wp-image-${remoteMediaId2}">
+  <figcaption><em>Gutenberg</em> on web</figcaption>
+</figure>
+<!-- /wp:image -->
+"""
+
+    const val newRefactoredGalleryBlock = """<!-- wp:gallery {"linkTo":"none","imageCount":3} -->
+<figure class="wp-block-gallery blocks-gallery-grid has-nested-images columns-3 is-cropped">
+$newRefactoredGalleryBlockInnerBlocks</figure>
+<!-- /wp:gallery -->
 """
 
     const val paragraphBlock = """<!-- wp:paragraph {"align":"center","fontSize":"small","className":"gutenberg-landing\u002d\u002dbutton-disclaimer"} -->
@@ -595,4 +650,8 @@ object TestContent {
     const val newPostWithJsonNullId = paragraphBlock + newImageBlock + imageBlockWithJsonNullId + newMediaTextBlock
     const val oldPostWithGalleryJsonNullId = paragraphBlock + oldImageBlock + galleryBlockWithJsonNullId
     const val newPostWithGalleryJsonNullId = paragraphBlock + newImageBlock + galleryBlockWithJsonNullId
+    const val oldPostWithMixedGalleriesOriginal = paragraphBlock + oldGalleryBlock + newRefactoredGalleryBlock
+    const val newPostWithMixedGalleriesOriginal = paragraphBlock + newGalleryBlock + newRefactoredGalleryBlock
+    const val oldPostWithMixedGalleriesRefactored = paragraphBlock + newGalleryBlock + oldRefactoredGalleryBlock
+    const val newPostWithMixedGalleriesRefactored = paragraphBlock + newGalleryBlock + newRefactoredGalleryBlock
 }