-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5e89534
commit 5ffcd15
Showing
19 changed files
with
545 additions
and
124 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| <!-- wp:buttons {"lock":{"move":true,"remove":true},"metadata":{"name":"Close"},"layout":{"type":"flex","justifyContent":"right"}} --> | ||
| <div class="wp-block-buttons"><!-- wp:button {"textColor":"contrast","style":{"spacing":{"padding":{"left":"0","right":"0","top":"0","bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"className":"comments-menu-toggle newspack-icon-close"} --> | ||
| <div class="wp-block-button comments-menu-toggle newspack-icon-close"><a class="wp-block-button__link has-contrast-color has-text-color has-link-color wp-element-button" href="#" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><span>Close</span></a></div> | ||
| <!-- /wp:button --></div> | ||
| <!-- /wp:buttons --> | ||
|
|
||
| <!-- wp:comments {"lock":{"move":true,"remove":true},"className":"wp-block-comments-query-loop"} --> | ||
| <div class="wp-block-comments wp-block-comments-query-loop"><!-- wp:post-comments-form {"lock":{"move":false,"remove":true}} /--> | ||
|
|
||
| <!-- wp:comments-title {"showPostTitle":false,"level":3,"lock":{"move":false,"remove":true}} /--> | ||
|
|
||
| <!-- wp:comment-template {"lock":{"move":false,"remove":true}} --> | ||
| <!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical"}} --> | ||
| <div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"wrap"}} --> | ||
| <div class="wp-block-group"><!-- wp:avatar {"size":24} /--> | ||
|
|
||
| <!-- wp:comment-author-name /--> | ||
|
|
||
| <!-- wp:comment-date {"format":"M j, Y g:i A","isLink":false} /--> | ||
|
|
||
| <!-- wp:comment-edit-link /--></div> | ||
| <!-- /wp:group --> | ||
|
|
||
| <!-- wp:comment-content /--> | ||
|
|
||
| <!-- wp:comment-reply-link /--></div> | ||
| <!-- /wp:group --> | ||
| <!-- /wp:comment-template --> | ||
|
|
||
| <!-- wp:comments-pagination {"lock":{"move":false,"remove":true},"layout":{"type":"flex","justifyContent":"center"}} --> | ||
| <!-- wp:comments-pagination-previous /--> | ||
|
|
||
| <!-- wp:comments-pagination-numbers /--> | ||
|
|
||
| <!-- wp:comments-pagination-next /--> | ||
| <!-- /wp:comments-pagination --></div> | ||
| <!-- /wp:comments --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <!-- wp:group {"templateLock":"all","lock":{"move":true,"remove":true},"layout":{"type":"default"}} --> | ||
| <div class="wp-block-group"><!-- wp:buttons {"lock":{"move":false,"remove":false}} --> | ||
| <div class="wp-block-buttons"><!-- wp:button {"width":100,"className":"is-style-outline, comments-menu-toggle"} --> | ||
| <div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline comments-menu-toggle"><a class="wp-block-button__link wp-element-button">Comments</a></div> | ||
| <!-- /wp:button --></div> | ||
| <!-- /wp:buttons --> | ||
|
|
||
| <!-- wp:template-part {"slug":"comments-contents","theme":"newspack-block-theme","tagName":"div","className":"comments-contents"} /--></div> | ||
| <!-- /wp:group --> |
This file was deleted.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| import './menus/comments-menu'; | ||
| import './menus/mobile-menu'; | ||
| import './menus/search-menu'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| /** | ||
| * Internal dependencies. | ||
| */ | ||
| import { domReady } from '../utils'; // Global utils. | ||
| import { MENU_OPEN_CLASS_NAME } from './consts'; // Menu constants. | ||
| import { createOverlay, removeOverlay } from './utils'; // Menu utils. | ||
|
|
||
| // A class name to append to the body element when the comments menu is open. | ||
| const openClassName = MENU_OPEN_CLASS_NAME + 'comments-menu'; | ||
|
|
||
| domReady( function () { | ||
| /** | ||
| * Comments Menu toggle and overlay JavaScript. | ||
| */ | ||
| const body = document.body, | ||
| headerContain = document.querySelector( '.comments-menu' ), | ||
| commentsToggle = document.querySelectorAll( '.comments-menu-toggle' ), | ||
| commentsContents = document.querySelector( '.comments-contents' ); | ||
|
|
||
| if ( ! headerContain || ! commentsToggle.length || ! commentsContents ) { | ||
| return; | ||
| } | ||
|
|
||
| const commentsOpenButton = headerContain.querySelector( '.comments-menu-toggle a' ), | ||
| commentsCloseButton = commentsContents.querySelector( '.comments-menu-toggle a' ); | ||
|
|
||
| /** | ||
| * @description Fires either the opening or closing functions for a menu. | ||
| * @param {event} event Click event. | ||
| */ | ||
| const menuToggle = event => { | ||
| event.preventDefault(); | ||
|
|
||
| if ( body.classList.contains( openClassName ) ) { | ||
| closeMenu(); | ||
| } else { | ||
| openMenu(); | ||
| } | ||
| }; | ||
|
|
||
| /** | ||
| * @description Opens specifed slide-out menu. | ||
| */ | ||
| const openMenu = () => { | ||
| body.classList.add( openClassName ); | ||
| commentsCloseButton.focus(); | ||
| createOverlay(); | ||
| }; | ||
|
|
||
| /** | ||
| * @description Closes specifed slide-out menu. | ||
| */ | ||
| const closeMenu = () => { | ||
| body.classList.remove( openClassName ); | ||
| commentsOpenButton.focus(); | ||
| removeOverlay(); | ||
| }; | ||
|
|
||
| // Find each comments toggle and attaches an event listener. | ||
| for ( let i = 0; i < commentsToggle.length; i++ ) { | ||
| commentsToggle[ i ].addEventListener( 'click', menuToggle, false ); | ||
| } | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| @use 'sass-utils'; | ||
| @use 'mixins'; | ||
|
|
||
| /** | ||
| * Comments menu styles | ||
| */ | ||
| .comments-contents { | ||
| background: var(--wp--preset--color--base); | ||
| inset: 0 -100% 0 auto; | ||
| margin: 0; | ||
| max-width: var(--wp--custom--width--medium); | ||
| opacity: 0; | ||
| overflow: auto; | ||
| padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--30); | ||
| position: fixed; | ||
| right: -100%; | ||
| transition: opacity 125ms ease-in-out, right 250ms ease-in-out; | ||
| width: 100%; | ||
| z-index: sass-utils.$zindex-overlay-menu; | ||
|
|
||
| @include sass-utils.media( medium ) { | ||
| padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); | ||
| } | ||
|
|
||
| .admin-bar & { | ||
| @include sass-utils.media( small ) { | ||
| padding-top: 46px; | ||
| } | ||
|
|
||
| @include sass-utils.media( medium ) { | ||
| padding-top: 32px; | ||
| } | ||
| } | ||
|
|
||
| > * { | ||
| visibility: hidden; | ||
| } | ||
| } | ||
|
|
||
| .comments-menu-toggle { | ||
| &.newspack-icon-close { | ||
| display: grid; | ||
| height: 48px; | ||
| margin-right: calc( -1 * var(--wp--preset--spacing--30) ); | ||
| place-items: center; | ||
| width: 48px; | ||
|
|
||
| @include sass-utils.media( medium ) { | ||
| height: 64px; | ||
| margin-right: calc( -1 * var(--wp--preset--spacing--40) ); | ||
| width: 64px; | ||
| } | ||
| } | ||
|
|
||
| &:not( .newspack-icon-close ) { | ||
| .wp-block-button__link { | ||
| align-items: center; | ||
| display: inline-flex; | ||
| gap: var(--wp--preset--spacing--20); | ||
| justify-content: center; | ||
|
|
||
| &::before { | ||
| background: currentcolor; | ||
| content: ""; | ||
| height: 24px; | ||
| mask: url('../../src/images/icon-comments.svg') 0 0 no-repeat; | ||
| width: 24px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .menu-open--comments-menu { | ||
| .comments-contents { | ||
| opacity: 1; | ||
| right: 0; | ||
|
|
||
| @include mixins.elevation( 3 ); | ||
|
|
||
| > * { | ||
| visibility: visible; | ||
| } | ||
| } | ||
|
|
||
| .overlay-mask { | ||
| display: block; | ||
| opacity: 1; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| @use 'mixins'; | ||
|
|
||
| /* | ||
| * Form Styles | ||
| * https://github.com/WordPress/gutenberg/issues/34198 | ||
| */ | ||
| label { | ||
| color: var(--wp--preset--color--contrast); | ||
| display: inline-block; | ||
| font-family: var( --wp--preset--font-family--system-font ); | ||
| font-size: var(--wp--preset--font-size--small); | ||
| font-weight: 600; | ||
| line-height: var(--wp--custom--line-height--small); | ||
| margin-bottom: var(--wp--preset--spacing--20); | ||
| } | ||
|
|
||
| input[type='text'], | ||
| input[type='email'], | ||
| input[type='url'], | ||
| input[type='password'], | ||
| input[type='search'], | ||
| input[type='number'], | ||
| input[type='tel'], | ||
| input[type='range'], | ||
| input[type='date'], | ||
| input[type='month'], | ||
| input[type='week'], | ||
| input[type='time'], | ||
| input[type='datetime'], | ||
| input[type='datetime-local'], | ||
| input[type='zip'], | ||
| input[type='color'], | ||
| textarea { | ||
| @include mixins.input; | ||
| } | ||
|
|
||
| input[type='checkbox'], | ||
| input[type='radio'] { | ||
| @include mixins.checkbox-radio; | ||
| } | ||
|
|
||
| input[type='checkbox'] { | ||
| @include mixins.checkbox; | ||
| } | ||
|
|
||
| input[type='radio'] { | ||
| @include mixins.radio; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.