web-stories-wp: Broken story markup for users without `unfiltered_html` capabilities

I was able to reproduce this issue! 🎉

It’s not really about <strong> tags, but about markup in general.

Prerequisites for testing

1. Create a new user with the role Author (or editor on Multisite)
2. Install and activate the User Switching plugin

Why Author role? Well, that role does not have the unfiltered_html capability, which means our story data and generated markup will be passed through wp_filter_post_kses in WordPress…and breaks.

To reproduce:

1. Log in as user with role Author
2. Create a new story
3. Add a new text element
4. Make the text bold
5. In the background, this will result in some markup like <span style="font-weight: 700">Fill in some text</span>
6. Preview story
7. Notice how story is broken

Meanwhile, the database will look like this:

post_content:

body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
              amp-story-grid-layer {
                overflow: visible;
              }

              .page-fullbleed-area {
                position: absolute;
                overflow: hidden;
                width: 100%;
                left: 0;
                height: calc(1.1851851851851851 * 100%);
                top: calc((1 - 1.1851851851851851) * 100% / 2);
              }

              .page-safe-area {
                overflow: visible;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                width: 100%;
                height: calc(0.84375 * 100%);
                margin: auto 0;
              }

              .wrapper {
                position: absolute;
                overflow: hidden;
              }

              .fill {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: 0;
              }
              <amp-story standalone="standalone" publisher="Web Stories" publisher-logo-src="https://web-stories.local/wp-content/plugins/web-stories-wp/assets/images/fallback-wordpress-publisher-logo.png" title="Author Test" poster-portrait-src="https://web-stories.local/wp-content/plugins/web-stories-wp/assets/images/fallback-poster.jpg"><amp-story-page id="4bc5a275-f372-4770-baaa-534820bfb5c2" auto-advance-after="7s"><amp-story-grid-layer template="vertical"><div class="page-fullbleed-area" style="background-color:#fff"><div class="page-safe-area"><div style="width:100%;height:118.51852%" id="el-c9cf75ea-f702-46a2-9bb1-df9ccdf5efeb" class="wrapper"><div class="fill"></div></div></div></div></amp-story-grid-layer><amp-story-grid-layer template="vertical"><div class="page-fullbleed-area"><div class="page-safe-area"><div style="width:36.36364%;height:2.72727%" id="el-4942e49e-c28d-4437-a7fd-4572e48dac54" class="wrapper"><p class="fill" style="margin:0;,sans-serif;font-size:0.212121em;line-height:1.3;text-align:initial;padding:0% 0%;color:#000000"><span style="font-weight: 700">Fill in some text</span></p></div></div></div></amp-story-grid-layer></amp-story-page></amp-story>

post_content_filtered:

{"version":21,"pages":[{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"type":"shape","id":"c9cf75ea-f702-46a2-9bb1-df9ccdf5efeb"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto","weights":[100,300,400,500,700,900],"styles":["italic","regular"],"variants":[[0,100],[1,100],[0,300],[1,300],[0,400],[1,400],[0,500],[1,500],[0,700],[1,700],[0,900],[1,900]],"fallbacks":["Helvetica Neue","Helvetica","sans-serif"],"service":"fonts.google.com"},"fontSize":14,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.3,"textAlign":"initial","padding":{"vertical":0,"horizontal":0,"locked":true},"type":"text","id":"4942e49e-c28d-4437-a7fd-4572e48dac54","content":"<span style="font-weight: 700">Fill in some text","x":93,"y":130,"width":160,"height":18,"scale":100,"focalX":50,"focalY":50}],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"type":"page","id":"4bc5a275-f372-4770-baaa-534820bfb5c2"}],"autoAdvance":true,"defaultPageDuration":7}

@miina This might ring a bell for you, since we had to deal with this in the old editor as well: https://github.com/ampproject/amp-wp/pull/2691

I reproduced this on a new test account on stories-lab.dev. Adding a text element was not necessary for me – a completely blank story will be broken. So this might be a separate bug unless I’m missing something.

My guess for the missing </strong> tag issue is that it was due to a missing migration path for stories created on an older release.