-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Styling broken when previewing Home page of new WP.com site #18024
Comments
This may be due to a discrepancy in the URLs used:
|
Thanks @tiagomar - I think it's theme-independent as well. Interestingly, today both are landing on the same URL and have matching output. Yesterday this wasn't the case (as evident by my "App Preview" screenshot) - the browser would stay on the App Preview URL, e.g. wordpress.com. Running
which on load returns another location header of:
My guess is that the server didn't send the redirect yesterday but today it did. If this is all on the web side, Android may be affected as well. |
As far as I checked, this issue looks related to the changes introduced in WordPress/gutenberg#33541 related to the Cover block. I checked the HTML of some of the starter page templates used when creating a site and noticed that the HTML is updated adding a class Here is an example (note that I'm only showing the affected HTML parts): Raw HTML content from the <!-- wp:cover {"url":"https://alvesstarter.files.wordpress.com/2020/06/jenn-evelyn-ann-uydoe_ayjqs-unsplash.jpg","id":62,"dimRatio":70,"overlayColor":"foreground-dark","focalPoint":{"x":0.5,"y":0.5},"align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim-70 has-foreground-dark-background-color has-background-dim"
style="background-image:url('https://alvesstarter.files.wordpress.com/2020/06/jenn-evelyn-ann-uydoe_ayjqs-unsplash.jpg');background-position:50% 50%;">
<div class="wp-block-cover__inner-container">
<!-- [HERE GOES THE COVER CONTENT] -->
</div>
</div>
<!-- /wp:cover -->
<!-- [HERE GOES THE REST OF THE BLOCKS] --> HTML after being parsed and updated by the editor: <!-- wp:cover {"url":"https://alvesstarter.files.wordpress.com/2020/06/jenn-evelyn-ann-uydoe_ayjqs-unsplash.jpg","id":62,"dimRatio":70,"overlayColor":"foreground-dark","focalPoint":{"x":0.5,"y":0.5},"align":"full"} -->
<div class="wp-block-cover alignfull is-light">
<span aria-hidden="true"
class="wp-block-cover__background has-foreground-dark-background-color has-background-dim-70 has-background-dim">
</span>
<img
class="wp-block-cover__image-background wp-image-62"
src="https://alvesstarter.files.wordpress.com/2020/06/jenn-evelyn-ann-uydoe_ayjqs-unsplash.jpg"
style="object-position:50% 50%" data-object-fit="cover" data-object-position="50% 50%" />
<div class="wp-block-cover__inner-container">
<!-- [HERE GOES THE COVER CONTENT] -->
</div>
</div>
<!-- /wp:cover -->
<!-- [HERE GOES THE REST OF THE BLOCKS] --> You can see that the main With the introduction of Native version doesn't provide different styles for
|
When previewing the Home page of a newly created site running the Alves theme, some styling is broken.
Expected behavior
Styling is consistent with block editor and web browser previews.
Actual behavior
Some styling is broken when previewing the page within the app.
Steps to reproduce the behavior
RPReplay_Final1645721687.MP4
Other context
This only seems to affect the Home page. When creating a new page on the site with the same design, the previews look correct.
Tested on iPhone 12, iOS 15.3.1, WPiOS 19.3.0.1
The text was updated successfully, but these errors were encountered: