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

feat: add drawer menu pattern; reorganise overlays #244

Merged
merged 9 commits into from
Jul 17, 2024
Merged

feat: add drawer menu pattern; reorganise overlays #244

merged 9 commits into from
Jul 17, 2024

Conversation

thomasguillot
Copy link
Contributor

@thomasguillot thomasguillot commented Jul 9, 2024 •
edited
Loading

All Submissions:

Changes proposed in this Pull Request:

This PR does a few things:

  1. The SASS overlay files have been reorganised and they are in their own folder
  2. I added a generic --position--full-width class to the overlay-contents
  3. You can also control its width --width--x-small, --width--small, --width--large, --width--x-large
  4. I added the open class to the contents container so we can automatically trigger the opening animation without requiring other custom CSS
  5. There's a new pattern for a Drawer Menu. It comes with a new template part (Drawer Content) so users can add any content they want to this menu.

Screencast: (note: this is slightly outdated and doesn't use --position)
https://github.com/Automattic/newspack-block-theme/assets/177929/fa193950-3bc0-4c7b-805a-d889a6ec5f9e

How to test the changes in this Pull Request:

  1. Switch to this PR
  2. Add the Drawer Menu pattern to a page
  3. Test if it works
  4. In the editor, select the Drawer Content and change the overlay-contents style (left | right | full-width)
  5. Change also its width. (check UTILITY_CLASSES.md for documentation)
  6. Test the front-end
  7. Test all the other overlays (mobile menu, search, comments) if they still work as expected

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?

@thomasguillot thomasguillot self-assigned this Jul 9, 2024
@thomasguillot thomasguillot requested a review from a team as a code owner July 9, 2024 13:36
laurelfulford
laurelfulford requested changes Jul 17, 2024
View reviewed changes
Copy link
Contributor

@laurelfulford laurelfulford left a comment

Choose a reason for hiding this comment

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

Thank you for tidying this stuff up, @thomasguillot!

I just ran into one issue that I was able to recreate with the Drawer Menu, comments, and mobile menu:

  1. Open the menu/comments.
  2. Click the background overlay to close it. The overlay will go away, but the menu/comments won't close.
  3. Click the close button; the overlay will come back.
  4. If you click the overlay again, step 2 repeats and you can go back and forth between steps 2 and 3.
  5. Click the close button a second time (when the overlay is visible) and the menu/comments will close.

The close button works fine when you use it initially; it's just when you get into the weird no-overlay state that it doesn't work for a click.

I think this is because the function you trigger when clicking the overlay only removes the menu body CSS classes, but the close buttons remove both the CSS class from the body and the element its closing.

Just let me know if you have any questions about the above or if you can't recreate this!

@thomasguillot
Copy link
Contributor Author

Just let me know if you have any questions about the above or if you can't recreate this!

All good. I was able to recreate this. Should be fixed in ea1c3e7

laurelfulford
laurelfulford approved these changes Jul 17, 2024
View reviewed changes
Copy link
Contributor

@laurelfulford laurelfulford left a comment

Choose a reason for hiding this comment

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

That did it! 🙌 Thanks @thomasguillot!

@thomasguillot thomasguillot merged commit 4cdb255 into trunk Jul 17, 2024
6 checks passed
@thomasguillot thomasguillot deleted the add/drawer-pattern branch July 17, 2024 15:58
matticbot pushed a commit that referenced this pull request Jul 19, 2024
@semantic-release-bot @matticbot
chore(release): 1.12.0-alpha.1 [skip ci]
6b65630 
# [1.12.0-alpha.1](v1.11.0...v1.12.0-alpha.1) (2024-07-19)

### Bug Fixes

* **buttons:** outline variations missing style with wp 6.6 ([#270](#270)) ([dabae5b](dabae5b))
* **navigation:** correct gap between items when using responsive nav ([#243](#243)) ([b707642](b707642))
* **newspack-grid:** adjust large and extra large screens ([#256](#256)) ([47b748c](47b748c))
* **search-results:** no results apply alignwide to homepage articles ([#242](#242)) ([315bc59](315bc59))
* sticky element with admin bar on small screens ([#238](#238)) ([2f2b056](2f2b056))

### Features

* add 50/50 Image/Header single post template ([#268](#268)) ([a010920](a010920))
* add blank screenshot ([#252](#252)) ([8839ea5](8839ea5))
* add columns patterns ([#274](#274)) ([41290a7](41290a7))
* add drawer menu pattern; reorganise overlays ([#244](#244)) ([4cdb255](4cdb255))
* add footer patterns and update template part ([#177](#177)) ([615c2a2](615c2a2))
* add header desktop patterns ([#254](#254)) ([ff6d296](ff6d296))
* add header mobile patterns ([#255](#255)) ([e1f371d](e1f371d))
* add margin to alignleft and alignright elements ([#261](#261)) ([97140de](97140de))
* add optional mobile-only and desktop-only to fixed elements ([#246](#246)) ([2cdfc1b](2cdfc1b))
* add sidebar grid layout ([#258](#258)) ([cb29dc6](cb29dc6))
* add sidebar-contents template part and use it for single sidebar layout ([#276](#276)) ([488e43c](488e43c))
* add support for yoast blocks (faq, how-to) ([#241](#241)) ([d63260a](d63260a))
* add support for yoast breadcrumbs; move cap styles to subdirectory ([#239](#239)) ([463584e](463584e))
* **author-list:** add block styles ([#250](#250)) ([7acd4a3](7acd4a3))
* **breadcrumbs:** ensure text and link colors are supported ([#240](#240)) ([fb3e939](fb3e939))
* **button:** x-small size adjust min-height and border-radius for consistency with newspack-icon ([#271](#271)) ([5fa1f7c](5fa1f7c))
* **footer:** add new pattern and adjust style 4 ([#269](#269)) ([9e826e9](9e826e9))
* **footer:** update credits ([#278](#278)) ([cec87b1](cec87b1))
* **homepage-articles:** add transition to links ([#234](#234)) ([bdf924a](bdf924a))
* **navigation:** update hover style; remove underline and use color-mix instead ([#247](#247)) ([08994a3](08994a3))
* **overlay:** update close button to 64px tall/wide ([#233](#233)) ([39e9dad](39e9dad))
* **patterns:** add 1 new footer pattern ([#257](#257)) ([758e38c](758e38c))
* **patterns:** improve columns preview; add 25/25/25/25 ([#275](#275)) ([0f5427f](0f5427f))
* **post-carousel:** update style ([#249](#249)) ([d87ac30](d87ac30))
* **post-meta:** update hover state ([#251](#251)) ([b1ba1d5](b1ba1d5))
* reorganise header parts ([#253](#253)) ([14ee203](14ee203))
* **search:** update template part to match pagination with archive ([#279](#279)) ([6e3da20](6e3da20))
* simplify home and index templates to match page and archive; remove archive pattern ([#277](#277)) ([5d09c60](5d09c60))
* update comments elements names ([#235](#235)) ([27e963e](27e963e))
* update mobile menu elements names ([#237](#237)) ([a1f5070](a1f5070))
* update post header patterns; add wide option ([#267](#267)) ([1bd4d76](1bd4d76))
* update post header to use pattern; introduce sidebar post template ([#262](#262)) ([ff015a1](ff015a1))
* update post-content; adjust align left/right position ([#280](#280)) ([b1a5378](b1a5378))
* update search elements names ([#236](#236)) ([0f926d2](0f926d2))
@matticbot
Copy link

🎉 This PR is included in version 1.12.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

matticbot pushed a commit that referenced this pull request Jul 30, 2024
@semantic-release-bot @matticbot
chore(release): 1.12.0 [skip ci]
facd508 
# [1.12.0](v1.11.0...v1.12.0) (2024-07-30)

### Bug Fixes

* **buttons:** outline variations missing style with wp 6.6 ([#270](#270)) ([dabae5b](dabae5b))
* **navigation:** correct gap between items when using responsive nav ([#243](#243)) ([b707642](b707642))
* **newspack-grid:** adjust large and extra large screens ([#256](#256)) ([47b748c](47b748c))
* **search-results:** no results apply alignwide to homepage articles ([#242](#242)) ([315bc59](315bc59))
* sticky element with admin bar on small screens ([#238](#238)) ([2f2b056](2f2b056))

### Features

* add 50/50 Image/Header single post template ([#268](#268)) ([a010920](a010920))
* add blank screenshot ([#252](#252)) ([8839ea5](8839ea5))
* add columns patterns ([#274](#274)) ([41290a7](41290a7))
* add drawer menu pattern; reorganise overlays ([#244](#244)) ([4cdb255](4cdb255))
* add footer patterns and update template part ([#177](#177)) ([615c2a2](615c2a2))
* add header desktop patterns ([#254](#254)) ([ff6d296](ff6d296))
* add header mobile patterns ([#255](#255)) ([e1f371d](e1f371d))
* add margin to alignleft and alignright elements ([#261](#261)) ([97140de](97140de))
* add optional mobile-only and desktop-only to fixed elements ([#246](#246)) ([2cdfc1b](2cdfc1b))
* add sidebar grid layout ([#258](#258)) ([cb29dc6](cb29dc6))
* add sidebar-contents template part and use it for single sidebar layout ([#276](#276)) ([488e43c](488e43c))
* add support for yoast blocks (faq, how-to) ([#241](#241)) ([d63260a](d63260a))
* add support for yoast breadcrumbs; move cap styles to subdirectory ([#239](#239)) ([463584e](463584e))
* **author-list:** add block styles ([#250](#250)) ([7acd4a3](7acd4a3))
* **breadcrumbs:** ensure text and link colors are supported ([#240](#240)) ([fb3e939](fb3e939))
* **button:** x-small size adjust min-height and border-radius for consistency with newspack-icon ([#271](#271)) ([5fa1f7c](5fa1f7c))
* **footer:** add new pattern and adjust style 4 ([#269](#269)) ([9e826e9](9e826e9))
* **footer:** update credits ([#278](#278)) ([cec87b1](cec87b1))
* **homepage-articles:** add transition to links ([#234](#234)) ([bdf924a](bdf924a))
* **navigation:** update hover style; remove underline and use color-mix instead ([#247](#247)) ([08994a3](08994a3))
* **overlay:** update close button to 64px tall/wide ([#233](#233)) ([39e9dad](39e9dad))
* **patterns:** add 1 new footer pattern ([#257](#257)) ([758e38c](758e38c))
* **patterns:** improve columns preview; add 25/25/25/25 ([#275](#275)) ([0f5427f](0f5427f))
* **post-carousel:** update style ([#249](#249)) ([d87ac30](d87ac30))
* **post-meta:** update hover state ([#251](#251)) ([b1ba1d5](b1ba1d5))
* reorganise header parts ([#253](#253)) ([14ee203](14ee203))
* **search:** update template part to match pagination with archive ([#279](#279)) ([6e3da20](6e3da20))
* simplify home and index templates to match page and archive; remove archive pattern ([#277](#277)) ([5d09c60](5d09c60))
* update comments elements names ([#235](#235)) ([27e963e](27e963e))
* update mobile menu elements names ([#237](#237)) ([a1f5070](a1f5070))
* update post header patterns; add wide option ([#267](#267)) ([1bd4d76](1bd4d76))
* update post header to use pattern; introduce sidebar post template ([#262](#262)) ([ff015a1](ff015a1))
* update post-content; adjust align left/right position ([#280](#280)) ([b1a5378](b1a5378))
* update search elements names ([#236](#236)) ([0f926d2](0f926d2))
@matticbot
Copy link

🎉 This PR is included in version 1.12.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

@laurelfulford laurelfulford laurelfulford approved these changes

Assignees

@thomasguillot thomasguillot

Labels
released on @alpha released [Status] Approved [Status] Needs review
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@thomasguillot @matticbot @laurelfulford