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.

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

Pattern Previews: Use less-opinionated base theme #266

Merged
merged 2 commits into from
Jul 6, 2021

Conversation

ryelle
Copy link
Contributor

@ryelle ryelle commented Jul 5, 2021

Fixes #143 - Switch the pattern preview theme styles to use Twenty Twenty-One with a white background as the base CSS. This also removes some other CSS dependencies that are not necessary in this context (non-editable). This brings the number of files loaded per each iframe down to two - wp-block-library and the theme styles (see #255).

Screenshots

patterns
pattern-2
pattern-1

How to test the changes in this Pull Request:

  1. Check out branch and build with yarn workspaces run build, or just look at the screenshots ^
  2. View the pattern previews in grid mode
  3. They should look as expected - headings are plain sans-serif, no top border. Body text is also sans-serif. Background should be white (unless the pattern uses a background).
  4. View single pattern previews
  5. They should look as expected, see above

@ryelle ryelle added the [Component] Theme The frontend of the pattern directory, pattern lists UI label Jul 5, 2021
@ryelle ryelle added this to the Initial Launch milestone Jul 5, 2021
@ryelle ryelle requested review from kjellr and StevenDufresne July 5, 2021 15:10
@ryelle ryelle self-assigned this Jul 5, 2021
Copy link
Collaborator

@StevenDufresne StevenDufresne left a comment

Choose a reason for hiding this comment

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

Speed looks better on load! Good call.

Are we going to assume that some CSS styles will not work or conflict?

The button is background-color: #fff on color: #fff:

/pattern/introduction-with-image-on-the-left/

@ryelle
Copy link
Contributor Author

ryelle commented Jul 6, 2021

Are we going to assume that some CSS styles will not work or conflict?

I'm pretty sure that's a gutenberg bug with custom link colors, but haven't tracked it down yet. It's an issue with the current (Twenty Nineteen) display too, so it's unrelated. It was reported here: #235

@ryelle ryelle merged commit 0c3c35f into trunk Jul 6, 2021
@ryelle ryelle deleted the update/pattern-preview-themestyle branch July 6, 2021 21:32
@kjellr
Copy link
Collaborator

kjellr commented Jul 7, 2021

Thank you for this change! It looks great.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Component] Theme The frontend of the pattern directory, pattern lists UI
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Tidy up display of patterns in the front end.
3 participants