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

Jump to bottom

Theme: Add Pattern Grid Menu. #72

Merged
merged 20 commits into from Apr 9, 2021
Merged

Theme: Add Pattern Grid Menu. #72

merged 20 commits into from Apr 9, 2021

Conversation

StevenDufresne
Copy link
Collaborator

This PR replaces the experimental work done in #65.

Fixes #64, Implements UI in #50.

Screenshots

Mobile Desktop

How to test the changes in this Pull Request:

  1. Create a few blocks
  2. Add a few categories to the Block Pattern "Category" taxonomy
  3. Load localhost:8888

@StevenDufresne StevenDufresne added the [Component] Pattern Directory The backend of the pattern directory: submission, management, etc label Apr 6, 2021
@StevenDufresne StevenDufresne added this to In progress in Pattern Directory v1 [outdated] via automation Apr 6, 2021
This was referenced Apr 6, 2021
Closed
Closed
@StevenDufresne StevenDufresne added [Component] Theme The frontend of the pattern directory, pattern lists UI and removed [Component] Pattern Directory The backend of the pattern directory: submission, management, etc labels Apr 6, 2021
@StevenDufresne StevenDufresne changed the title Add Pattern Grid Menu. Theme: Add Pattern Grid Menu. Apr 6, 2021
ryelle
ryelle requested changes Apr 7, 2021
View reviewed changes
Copy link
Contributor

@ryelle ryelle left a comment

Choose a reason for hiding this comment

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

This is working well in my basic testing, but I have a few comments & questions about the framework.

public_html/wp-content/themes/pattern-directory/css/components/_category-menu.scss Outdated
Comment on lines 1 to 3
$grid-unit: 1.5rem;
$font-weight: 500;
$font-size: 14px;
Copy link
Contributor

Choose a reason for hiding this comment

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

Are these unique to this component, or can they be moved to settings?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I'll move the $grid-unit since it's very useful, but the other 2 are probably not useful.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

In _structure.scss there's a $gutter-default property. I used that instead. It was set to 16px so I updated it to 1.5rem which I got from the pattern grid and since it doesn't have many references yet in the theme its a safe-ish change.
I think we should update all gap/gutter references to use it moving forward.

Copy link
Contributor

Choose a reason for hiding this comment

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

I still don't think we need local variables in these files - you're only using border-radius once, and if we want to keep the assorted font-sizes reusable let's make a set in settings/_typography.scss. I'd rather not use any local variables because they aren't actually scoped to the file, if you use $font-size in another file, it will work, but you have no good way of knowing which font size it's using.

Copy link
Contributor

@ryelle ryelle Apr 8, 2021 •
edited

Choose a reason for hiding this comment

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

Good call about the $gutter property, we can also make $gutter-small etc, as we need. (no change requested here, just saying -- sass math works just as well)

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I still don't think we need local variables in these files - you're only using border-radius once, and if we want to keep the assorted font-sizes reusable let's make a set in settings/_typography.scss. I'd rather not use any local variables because they aren't actually scoped to the file, if you use $font-size in another file, it will work, but you have no good way of knowing which font size it's using.

Very fair. I'll pull them out.

public_html/wp-content/themes/pattern-directory/css/components/_category-menu.scss Outdated Show resolved Hide resolved
public_html/wp-content/themes/pattern-directory/css/components/_category-context-bar.scss Outdated Show resolved Hide resolved
public_html/wp-content/themes/pattern-directory/package.json Outdated Show resolved Hide resolved
public_html/wp-content/themes/pattern-directory/src/components/category-menu/default.js Show resolved Hide resolved
public_html/wp-content/themes/pattern-directory/src/components/pattern-grid-menu/index.js Outdated Show resolved Hide resolved
public_html/wp-content/themes/pattern-directory/src/components/pattern-grid/index.js Outdated Show resolved Hide resolved
public_html/wp-content/themes/pattern-directory/src/components/category-context-bar/index.js Outdated Show resolved Hide resolved
@StevenDufresne StevenDufresne mentioned this pull request Apr 8, 2021
Closed
@ryelle ryelle self-requested a review April 8, 2021 12:34
ryelle
ryelle approved these changes Apr 8, 2021
View reviewed changes
Copy link
Contributor

@ryelle ryelle left a comment

Choose a reason for hiding this comment

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

Left a comment about the CSS variables, but we can leave them in for now if you want to get this merged.

StevenDufresne and others added 18 commits April 9, 2021 11:42
@StevenDufresne
Squash merge StevenDufresne/add/category-filter-menu to simplify bran…
e5655ab 
…ch management.
@StevenDufresne
Update menu layout to match page.
be0c134
@StevenDufresne
Rename grid-menu -> pattern-grid-menu
59eca45
@StevenDufresne
Make the underline follow to new lines as well.
2c10188
@StevenDufresne
Remove margin on menu.
cadeb1d
@StevenDufresne
Remove the placeholder in index.php.
eb977fc
@StevenDufresne
Remove -unit and replace with -default.
2616eed
@StevenDufresne
Switch fonts to use rem units.
038721e
@StevenDufresne
Update gutter default to match what is happening elsewhere.
bef62d1
@StevenDufresne
Pin @wordpress/icons to specific version.
54e6cb0
@StevenDufresne
Remove extra divs by moving styles into the components.
3c3f2c7
@StevenDufresne
Change related categories to h2 from h3.
a2b911e
@StevenDufresne
Make pattern grid a nav element.
65b1eaf
@StevenDufresne
Update markup semantics in grid menu.
b662168
@StevenDufresne
Tear out using flex items to make the dom simpler.
5bcfaaf
@StevenDufresne
Add a message to explain that components will render based on viewpor…
1720613 
…t size.
@StevenDufresne
Add comment for internal dependencies.
20cd925
@ryelle @StevenDufresne
Pin dependencies
232b4cb
@StevenDufresne StevenDufresne merged commit 25955c4 into trunk Apr 9, 2021
Pattern Directory v1 [outdated] automation moved this from In progress to Done Apr 9, 2021
@StevenDufresne StevenDufresne deleted the add/section-filters branch April 9, 2021 03:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ryelle ryelle ryelle approved these changes

Assignees
No one assigned
Labels
[Component] Theme The frontend of the pattern directory, pattern lists UI
Projects
No open projects
Pattern Directory v1 [outdated]
Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Pattern Directory: Users should be able to view patterns based on categories.
2 participants
@StevenDufresne @ryelle