Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Fix: Make Related Posts styles more consistent between formats #761

Merged
merged 2 commits into from
Mar 26, 2020
Merged

Fix: Make Related Posts styles more consistent between formats #761

merged 2 commits into from
Mar 26, 2020

Conversation

laurelfulford
Copy link
Contributor

All Submissions:

Changes proposed in this Pull Request:

This PR improves visual consistency across the different Related Posts options (shortcode, block, and the one that appears in the theme), and the AMP and non-AMP versions (since the markup changes slightly between them).

As an added bonus, this update also consolidates the Related Posts block and not-block styles.

Closes #759 .

How to test the changes in this Pull Request:

  1. Start with a test site where you can enable Related Posts, and make sure they're displaying at the bottom of posts.
  2. Apply the PR and run npm run build.
  3. Select the default Newspack theme, with the default style pack.
  4. Switch AMP to 'Transitional' mode, so it can be toggled on and off easier.
  5. Edit a post and add a shortcode block with [jetpack-related-posts] in it, and a Related Posts block, then publish.
  6. Open three tabs: one with the editor for the above post, one for the front-end of the above post, and one for a second post that has the Related Posts at the bottom (I found in my testing when I added a Related Posts block/shortcode to a post's content, the one at the bottom of the content sometimes went away).
  7. Review each related post area with and without AMP enabled, and in the editor, for each of the child themes -- they should look roughly the same, and similar to the following screenshots:

Newspack theme:

Block:

image

Shortcode:

image

Footer:

image

Newspack Scott:

Block:

image

Shortcode:

image

Footer:

image

Newspack Nelson:

Block:

image

Shortcode:

image

Footer:

image

Newspack Katharine:

Block:

image

Shortcode:

image

Footer:

image

Newspack Sacha:

Block:

image

Shortcode:

image

Footer:

image

Newspack Joseph:

Block:

image

Shortcode:

image

Footer:

image

  1. Try changing the Header Font in the customizer; confirm that all the text in the related posts uses your new font:

image

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you successfully ran tests with your changes locally?

@laurelfulford
Fix: Make Related Posts style more consistent between formats (in the…
7f5609c 
…me, shortcode, block), and with AMP and non-AMP versions.
@laurelfulford laurelfulford added the [Status] Needs Review The issue or pull request needs to be reviewed label Feb 6, 2020
@laurelfulford laurelfulford mentioned this pull request Feb 18, 2020
Closed
thomasguillot
thomasguillot approved these changes Mar 26, 2020
View reviewed changes
Copy link
Contributor

@thomasguillot thomasguillot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks better and more consistent 🚢

@thomasguillot thomasguillot added [Status] Approved The pull request has been reviewed and is ready to merge and removed [Status] Needs Review The issue or pull request needs to be reviewed labels Mar 26, 2020
@laurelfulford
Copy link
Contributor Author

Thanks Thomas!

@laurelfulford laurelfulford merged commit b55746d into master Mar 26, 2020
@laurelfulford laurelfulford deleted the improves/related-posts-appearance branch March 26, 2020 16:22
matticbot pushed a commit that referenced this pull request Apr 1, 2020
@semantic-release-bot
chore(release): 1.4.0 [skip ci]
7eed8f6 
# [1.4.0](v1.3.0...v1.4.0) (2020-04-01)

### Bug Fixes

* correct menu name when checking for it in header ([#859](#859)) ([b560b28](b560b28))
* CSS changed by release process ([abb4bf0](abb4bf0))
* editor color palettes and secondary color by adding full, 6-digits, hex codes ([#857](#857)) ([0c800a1](0c800a1))
* make related posts styles more consistent between formats ([#761](#761)) ([b55746d](b55746d))
* make sure social links block doesn't inherit link color ([#846](#846)) ([66c927c](66c927c))
* only apply RSS icon to /feed ([#851](#851)) ([ce884ac](ce884ac))

### Features

* add a desktop slideout widget area ([#816](#816)) ([3ed6c77](3ed6c77))
* add option to collapse comments ([#820](#820)) ([f67ab51](f67ab51))
* add telephone icon to social menu ([#849](#849)) ([9812b28](9812b28))
@matticbot
Copy link
Contributor

🎉 This PR is included in version 1.4.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@thomasguillot thomasguillot thomasguillot approved these changes

Assignees
No one assigned
Labels
released [Status] Approved The pull request has been reviewed and is ready to merge
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Related Posts: Improve appearance of block
3 participants
@laurelfulford @matticbot @thomasguillot