Buttons Block: "Problem displaying block" error for button blocks with custom colors or gradient backgrounds

[designsimply]

Steps to reproduce:

1. On the web, create a new post and add a buttons block.
2. Add a button and select the outline style in block settings.
3. Add a button and select a theme background and text color in the block settings.
4. Add a button and select a custom background and text color in the block settings.
5. Add a button and select a linear gradient background color in the block settings.
6. Add a button and select a radial gradient background color in the block settings.
7. Publish the post.
8. In the app, open the post in the editor and check to see if the button colors are rendered.

Result: button blocks with custom colors or gradient backgrounds are not rendered in the block editor in the app and instead show a "Problem displaying block" error.

WP.com block editor	WP.com block settings	WPAndroid block editor

^{Tested with WPAndroid 14.8-rc-3 on Pixel 3 Android 10 (seen in screenshots above) and with WPiOS 14.8.0.2 TestFlight beta on iPhone 11 iOS 13.4.1, both apps were tested using a WordPress.com Free site.}

Note: see test cases TC016, TC017, TC018, TC019 at Buttons Block - Test Cases.

[designsimply]

Here is a copy of the buttons block HTML from the post affected for reference:

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Outline</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"primary","textColor":"subtle-background"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-subtle-background-color has-primary-background-color has-text-color has-background">theme dark bg light text color</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"color":{"text":"#ffffff","background":"#090909"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background" style="background-color:#090909;color:#ffffff">custom black bg white text color</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"color":{"gradient":"radial-gradient(rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)","text":"#eae120"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background" style="background:radial-gradient(rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);color:#eae120">radial gradient</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"color":{"gradient":"linear-gradient(232deg,rgb(238,238,238) 0%,rgb(0,0,0) 100%)"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background" style="background:linear-gradient(232deg,rgb(238,238,238) 0%,rgb(0,0,0) 100%)">Linear gradient black to gray angle 232</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

[pinarol]

hey @designsimply 👋 I don't expect that invalid block error happening on custom colors, it should work according to the documented test cases. But sometimes those kinds of things can happen due to difference of gutenberg editor versions between web and mobile since the generated HTML differs(especially when the button was created with a newer version of the editor in one platform and then opened with an older version in the other platform, in this case the new markups can't get recognized by the older editor. I raised this problem to web folks internally but unfortunately there's no fix for this currently. And even if there's a fix, it would probably be a warning message saying something like "I don't recognize this markup because you created it with a newer version of gutenberg". The problem can also happen purely on web, if you install the latest version of the gutenberg plugin and then remove it for example).

We already repeated these tests on the upcoming editor release which will be included in 14.9 and couldn't detect such errors. Can you check again with the apk here: wordpress-mobile/WordPress-Android#11894 (comment) ?

[designsimply]

Tested and confirmed I can no longer see an error for button blocks with colors added via WordPress.com on 2020-05-11 in the block editor on WPAndroid using the .apk file from wordpress-mobile/WordPress-Android#11894 (comment). 🎉

^{Tested with WordPress-pr-11894-build-50728.apk on Pixel 3 Android 10 on a [post](https://made4testing0318.blog/2020/05/11/more-buttons-with-colors/) created with Calypso Gutenberg at WordPress.com on 2020-05-11 via Firefox 75.0 on macOS 10.14.6.}

[designsimply]

Closing as fixed in wordpress-mobile/WordPress-Android#11894. Props @mchowning. 🎉