Skip to content

Commit 5cbafff

Browse files
daniloercolidaniloercoli
authored
Merge pull request #689 from wordpress-mobile/try/685-audio-tag-to-shortcode-fix-take2
Fix audio tag handling for Gutenberg audio blocks
2 parents 21fdf02 + 3bbe302 commit 5cbafff

File tree

4 files changed

+149
-0
lines changed

4 files changed

+149
-0
lines changed

‎app/src/androidTest/kotlin/org/wordpress/aztec/demo/tests/GutenbergCompatTests.kt‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import org.wordpress.aztec.demo.BaseTest
1818
import org.wordpress.aztec.demo.MainActivity
1919
import org.wordpress.aztec.demo.R
2020
import org.wordpress.aztec.demo.pages.EditorPage
21+
import org.wordpress.aztec.plugins.shortcodes.AudioShortcodePlugin
2122
import org.wordpress.aztec.source.SourceViewEditText
2223
import java.io.File
2324
import java.io.FileOutputStream
@@ -289,6 +290,51 @@ class GutenbergCompatTests : BaseTest() {
289290
.verifyHTML(htmlOriginal)
290291
}
291292

293+
@Test
294+
fun testRetainAudioTagByDisablingAudioShortcodePlugin() {
295+
val htmlGutenbergAudioBlock =
296+
"<!-- wp:audio {\"id\":435} --><figure class=\"wp-block-audio\"><audio controls src=\"https://selfhostedmario.mystagingwebsite.com/wp-content/uploads/2018/05/ArgentinaAnthem.mp3\"></audio><figcaption>a caption</figcaption></figure><!-- /wp:audio -->"
297+
298+
val htmlNormalAudioTag =
299+
"<figure class=\"wp-block-audio\"><audio controls src=\"https://selfhostedmario.mystagingwebsite.com/wp-content/uploads/2018/05/ArgentinaAnthem.mp3\"></audio><figcaption>a caption</figcaption></figure>"
300+
301+
val htmlWithoutShortcode = "<!-- wp:audio {\"id\":435} --><figure class=\"wp-block-audio\">\n" +
302+
" <audio controls=\"controls\" src=\"https://selfhostedmario.mystagingwebsite.com/wp-content/uploads/2018/05/ArgentinaAnthem.mp3\"></audio>\n" +
303+
" <figcaption>\n" +
304+
" a caption\n" +
305+
" </figcaption></figure><!-- /wp:audio -->"
306+
307+
val htmlWithShortcode = "<figure class=\"wp-block-audio\">\n" +
308+
" [audio controls=\"controls\" src=\"https://selfhostedmario.mystagingwebsite.com/wp-content/uploads/2018/05/ArgentinaAnthem.mp3\"]\n" +
309+
" <figcaption>\n" +
310+
" a caption\n" +
311+
" </figcaption></figure>"
312+
313+
val editorPage = EditorPage()
314+
val audioShortcodePlugin = AudioShortcodePlugin()
315+
val aztecText = mActivityIntentsTestRule.activity.findViewById<AztecText>(R.id.aztec)
316+
aztecText.plugins?.add(audioShortcodePlugin)
317+
318+
// let's test the plugin works as expected, i.e. it preserves the Gutenberg block structure
319+
editorPage
320+
.toggleHtml()
321+
.insertHTML(htmlGutenbergAudioBlock)
322+
.toggleHtml()
323+
.toggleHtml()
324+
.verifyHTML(htmlWithoutShortcode)
325+
326+
// now test a non-Gutenberg piece and make sure the <audio> tag has been replaced by the [audio] shortcode
327+
editorPage
328+
.toggleHtml()
329+
.clearText()
330+
.toggleHtml()
331+
.insertHTML(htmlNormalAudioTag)
332+
.toggleHtml()
333+
.toggleHtml()
334+
.verifyHTML(htmlWithShortcode)
335+
336+
}
337+
292338
@Test
293339
fun testDeleteAllItemsFromFirstList() {
294340
val itemOnListTwo = "item 1 on list 2"

‎wordpress-shortcodes/src/main/java/org/wordpress/aztec/plugins/shortcodes/AudioShortcodePlugin.kt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
package org.wordpress.aztec.plugins.shortcodes
22

33
import org.wordpress.aztec.plugins.html2visual.IHtmlPreprocessor
4+
import org.wordpress.aztec.plugins.shortcodes.utils.GutenbergUtils
45
import org.wordpress.aztec.plugins.visual2html.IHtmlPostprocessor
56

67
class AudioShortcodePlugin : IHtmlPreprocessor, IHtmlPostprocessor {
78

89
private val TAG = "audio"
910

1011
override fun beforeHtmlProcessed(source: String): String {
12+
if (GutenbergUtils.contentContainsGutenbergBlocks(source)) return source
1113
return source.replace(Regex("(?<!\\[)\\[$TAG([^\\]]*)\\](?!\\])"), "<$TAG$1 />")
1214
}
1315

1416
override fun onHtmlProcessed(source: String): String {
17+
if (GutenbergUtils.contentContainsGutenbergBlocks(source)) return source
1518
return StringBuilder(source)
1619
.replace(Regex("<$TAG([^>]*(?<! )) */>"), "[$TAG$1]")
1720
.replace(Regex("<$TAG([^>]*(?<! )) *></$TAG>"), "[$TAG$1]")

‎wordpress-shortcodes/src/main/java/org/wordpress/aztec/plugins/shortcodes/utils/GutenbergUtils.kt‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
package org.wordpress.aztec.plugins.shortcodes.utils
2+
3+
class GutenbergUtils {
4+
companion object {
5+
val GUTENBERG_BLOCK_START = "<!-- wp:"
6+
/*
7+
Note the way we detect we're in presence of Gutenberg blocks logic is taken from
8+
https://github.com/WordPress/gutenberg/blob/5a6693589285363341bebad15bd56d9371cf8ecc/lib/register.php#L331-L345
9+
10+
* Determine whether a content string contains blocks. This test optimizes for
11+
* performance rather than strict accuracy, detecting the pattern of a block
12+
* but not validating its structure. For strict accuracy, you should use the
13+
* block parser on post content.
14+
*
15+
* @since 1.6.0
16+
* @see gutenberg_parse_blocks()
17+
*
18+
* @param string $content Content to test.
19+
* @return bool Whether the content contains blocks.
20+
21+
function gutenberg_content_has_blocks( $content ) {
22+
return false !== strpos( $content, '<!-- wp:' );
23+
}
24+
*/
25+
fun contentContainsGutenbergBlocks(content: String?): Boolean {
26+
return content != null && content.contains(GUTENBERG_BLOCK_START)
27+
}
28+
}
29+
}

‎wordpress-shortcodes/src/test/java/org/wordpress/aztec/plugins/shortcodes/AudioShortcodeTest.kt‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
@file:Suppress("DEPRECATION")
2+
3+
package org.wordpress.aztec.plugins.shortcodes
4+
5+
import android.app.Activity
6+
import org.junit.Assert
7+
import org.junit.Before
8+
import org.junit.Test
9+
import org.junit.runner.RunWith
10+
import org.robolectric.Robolectric
11+
import org.robolectric.RobolectricTestRunner
12+
import org.robolectric.annotation.Config
13+
import org.wordpress.aztec.AztecText
14+
import org.wordpress.aztec.plugins.shortcodes.TestUtils.safeEmpty
15+
16+
/**
17+
* Tests for the caption shortcode plugin
18+
*/
19+
@RunWith(RobolectricTestRunner::class)
20+
@Config(constants = BuildConfig::class, sdk = intArrayOf(25))
21+
class AudioShortcodeTest {
22+
lateinit var editText: AztecText
23+
24+
private val htmlGutenbergAudioBlock =
25+
"<!-- wp:audio {\"id\":435} --><figure class=\"wp-block-audio\"><audio controls src=\"https://selfhostedmario.mystagingwebsite.com/wp-content/uploads/2018/05/ArgentinaAnthem.mp3\"></audio><figcaption>a caption</figcaption></figure><!-- /wp:audio -->"
26+
27+
private val htmlNormalAudioTag =
28+
"<figure class=\"wp-block-audio\"><audio controls src=\"https://selfhostedmario.mystagingwebsite.com/wp-content/uploads/2018/05/ArgentinaAnthem.mp3\"></audio><figcaption>a caption</figcaption></figure>"
29+
30+
/**
31+
* Initialize variables.
32+
*/
33+
@Before
34+
fun init() {
35+
val activity = Robolectric.buildActivity(Activity::class.java).create().visible().get()
36+
37+
editText = AztecText(activity)
38+
editText.setCalypsoMode(false)
39+
40+
activity.setContentView(editText)
41+
42+
editText.plugins.add(AudioShortcodePlugin())
43+
}
44+
45+
@Test
46+
@Throws(Exception::class)
47+
fun testGutenbergAudioBlockDoesntConvertToShortcode() {
48+
Assert.assertTrue(safeEmpty(editText))
49+
50+
editText.fromHtml(htmlGutenbergAudioBlock)
51+
52+
// expected result: the <audio> tag does not get converted to shortcode when it's found within a Gutenberg block
53+
// Note: the slight difference of <audio controls> being converted to <audio controls="controls"> should be equivalent
54+
val htmlWithoutShortcode = "<!-- wp:audio {\"id\":435} --><figure class=\"wp-block-audio\"><audio controls=\"controls\" src=\"https://selfhostedmario.mystagingwebsite.com/wp-content/uploads/2018/05/ArgentinaAnthem.mp3\" /><figcaption>a caption</figcaption></figure><!-- /wp:audio -->"
55+
56+
Assert.assertEquals(htmlWithoutShortcode, editText.toPlainHtml())
57+
}
58+
59+
@Test
60+
@Throws(Exception::class)
61+
fun testAudioTagConvertsToShortcode() {
62+
Assert.assertTrue(safeEmpty(editText))
63+
64+
editText.fromHtml(htmlNormalAudioTag)
65+
66+
// expected result: the <audio> tag gets converted to shortcode when it's found in free HTML
67+
val htmlWithShortcode = "<figure class=\"wp-block-audio\">[audio controls=\"controls\" src=\"https://selfhostedmario.mystagingwebsite.com/wp-content/uploads/2018/05/ArgentinaAnthem.mp3\"]<figcaption>a caption</figcaption></figure>"
68+
69+
Assert.assertEquals(htmlWithShortcode, editText.toPlainHtml())
70+
}
71+
}

0 commit comments

Comments
 (0)