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

Make sidebar container scroll internally #554

Merged
merged 23 commits into from
Jan 31, 2024
Merged

Make sidebar container scroll internally #554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
c79eae4
Make sidebar container scroll internally
adamwoodnz Jan 10, 2024
1fd41c1
Decouple sidebar container from ToC
adamwoodnz Jan 12, 2024
b05e933
Allow multiple sidebar containers
adamwoodnz Jan 12, 2024
769f18e
Remove debug color
adamwoodnz Jan 12, 2024
49d1fac
Make back to top link optional
adamwoodnz Jan 12, 2024
0eb7dea
Update docs
adamwoodnz Jan 16, 2024
08191e0
Fix postcss selector nesting
adamwoodnz Jan 24, 2024
c914570
Fix postcss selector nesting
adamwoodnz Jan 24, 2024
f1a29d9
Fix postcss selector nesting
adamwoodnz Jan 24, 2024
f291ec1
Remove ToC back to top padding if no content
adamwoodnz Jan 24, 2024
ebb5561
Make sidebar container control padding when fixed
adamwoodnz Jan 29, 2024
7c2c1a7
Move skip link target styles to local nav bar
adamwoodnz Jan 29, 2024
b24b6f2
Make the inline breakpoint configurable for each container
adamwoodnz Jan 29, 2024
740a0aa
Move logic to hide ToC heading if content is empty from JS to render
adamwoodnz Jan 30, 2024
0b9b873
Fix handling of zero css values in getCustomPropValue
adamwoodnz Jan 30, 2024
17d0add
Complete jsdoc
adamwoodnz Jan 30, 2024
abf6ac5
Fix scrolling height calc when logged out
adamwoodnz Jan 30, 2024
91fe052
Revert changing admin bar height detection
adamwoodnz Jan 30, 2024
061aab3
Improve scrollbar styles
adamwoodnz Jan 31, 2024
bcb5688
Only reduce the height when the footer is visible if the sidebar is f…
adamwoodnz Jan 31, 2024
07b512c
Revert "Move logic to hide ToC heading if content is empty from JS to…
adamwoodnz Jan 31, 2024
2aed927
Use snakecase for php vars
adamwoodnz Jan 31, 2024
40f8977
Add bottom padding all the time when floating
adamwoodnz Jan 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions mu-plugins/blocks/local-navigation-bar/postcss/style.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,13 @@
}
}

@media (min-width: 890px) {
/* stylelint-disable selector-id-pattern */
#wp--skip-link--target {
scroll-margin-top: var(--wp--custom--local-navigation-bar--spacing--height, 0);
}
}

Comment on lines +126 to +132
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Moved from the sidebar container styles, as it relates directly to the change in positioning of the local nav bar

/* Set up the custom properties. These can be overridden by settings in theme.json. */
:where(body) {
--wp--custom--local-navigation-bar--spacing--height: 60px;
Expand Down
16 changes: 10 additions & 6 deletions mu-plugins/blocks/sidebar-container/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,19 @@ function init() {
* @return string Returns the block markup.
*/
function render( $attributes, $content, $block ) {
$back_to_top = sprintf(
'<p class="has-small-font-size is-link-to-top"><a href="#wp--skip-link--target">%s</a></p>',
esc_html__( '↑ Back to top', 'wporg' )
);

$wrapper_attributes = get_block_wrapper_attributes();
$inline_breakpoint = $attributes['inlineBreakpoint'];
$back_to_top = $attributes['hasBackToTop']
? sprintf(
'<p class="has-small-font-size is-link-to-top"><a href="#wp--skip-link--target">%s</a></p>',
esc_html__( '↑ Back to top', 'wporg' )
)
: '';

return sprintf(
'<div %1$s>%2$s%3$s</div>',
'<div %1$s data-breakpoint="%2$s">%3$s%4$s</div>',
$wrapper_attributes,
esc_attr( $inline_breakpoint ),
$content,
$back_to_top
);
Expand Down
115 changes: 78 additions & 37 deletions mu-plugins/blocks/sidebar-container/postcss/style.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,103 @@
.wp-block-wporg-sidebar-container .is-link-to-top {
display: none;
.wp-block-wporg-sidebar-container {
/* stylelint-disable-next-line length-zero-no-unit */
--local--offset-top: var(--wp-admin--admin-bar--height, 0px);

& a {
text-decoration-line: none;
/* These vars are used in JS calcs */
--local--nav--offset: var(--wp--custom--local-navigation-bar--spacing--height, 60px);
--local--padding: var(--wp--preset--spacing--20);

&:hover {
text-decoration-line: underline;
}
/* Account for local nav height on larger screens where it becomes fixed. */
@media (min-width: 890px) {
--local--nav--offset: 0;
--local--offset-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--local-navigation-bar--spacing--height, 60px));
}
}

/* Slot the search & table of contents into a floating sidebar on large screens. */
@media (min-width: 1200px) {
.wp-block-wporg-sidebar-container {
--local--block-end-sidebar--width: 340px;
& .is-link-to-top {
display: none;

position: absolute;
top: calc(var(--wp-global-header-offset, 90px) + var(--wp--custom--local-navigation-bar--spacing--height, 60px));
& a {
text-decoration-line: none;

&:hover {
text-decoration-line: underline;
}
}
}

/* Slot the search & table of contents into a floating sidebar on large screens. */
&.is-floating-sidebar {
--local--block-end-sidebar--width: 356px;

/* Right offset should be "edge spacing" at minimum, otherwise calculate it to be centered. */
right: max(var(--wp--preset--spacing--edge-space), calc((100% - var(--wp--style--global--wide-size)) / 2));
width: var(--local--block-end-sidebar--width);
margin-top: var(--wp--custom--wporg-sidebar-container--spacing--margin--top);
margin-bottom: 0 !important;
padding-bottom: var(--local--padding);
overflow-y: scroll;
overscroll-behavior: contain;
scrollbar-color: var(--wp--preset--color--charcoal-5) transparent;

&.is-fixed-sidebar {
position: fixed;
top: 0;
/* Custom scrollbar so that it can be made visible on hover */
&::-webkit-scrollbar,
&::-webkit-scrollbar-track {
background-color: transparent;
}

&::-webkit-scrollbar-thumb {
&:active,
&:hover {
background-color: var(--wp--preset--color--charcoal-4) !important;
}
}

/* Make the space above the sidebar the same as the height of the local nav. */
margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--local-navigation-bar--spacing--height, 60px) * 2);
&:active,
&:focus-within,
&:focus,
&:hover {
&::-webkit-scrollbar-thumb {
background-color: var(--wp--preset--color--charcoal-5);
border: 4px solid transparent;
background-clip: content-box;
border-radius: 10px;
}
}

&.is-bottom-sidebar {
position: absolute;
& > * {
padding-right: 16px;
}

&.is-fixed-sidebar .is-link-to-top,
&.is-bottom-sidebar .is-link-to-top {
display: block;
margin-top: 0;
&.is-fixed-sidebar {
position: fixed;
top: 0;
height: calc(100vh - var(--local--offset-top));
margin-top: var(--local--offset-top) !important;
padding: var(--local--padding) 0;

& .is-link-to-top {
display: block;

& a {
color: var(--wp--preset--color--charcoal-4);
& a {
color: var(--wp--preset--color--charcoal-4);
}
}
}

.wp-block-wporg-table-of-contents + .is-link-to-top {
border-top: 1px solid var(--wp--preset--color--light-grey-1);
& * + .is-link-to-top {
padding-top: var(--wp--preset--spacing--20);
border-top: 1px solid var(--wp--preset--color--light-grey-1);
}
}
}

@media (min-width: 890px) {
/* stylelint-disable selector-id-pattern */
#wp--skip-link--target {
scroll-margin-top: var(--wp--custom--local-navigation-bar--spacing--height, 0);
main .wp-block-wporg-sidebar-container {

/* Hide the main sidebar until layout classes have been applied, to avoid FOUC */
display: none;

&.is-floating-sidebar {
position: absolute;
top: calc(var(--wp-global-header-offset, 90px) + var(--wp--custom--local-navigation-bar--spacing--height, 60px));
margin-top: var(--wp--custom--wporg-sidebar-container--spacing--margin--top);

/* Right offset should be "edge spacing" at minimum, otherwise calculate it to be centered. */
right: max(var(--wp--preset--spacing--edge-space), calc((100% - var(--wp--style--global--wide-size)) / 2));
}
}

Expand Down
11 changes: 10 additions & 1 deletion mu-plugins/blocks/sidebar-container/src/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,16 @@
"category": "layout",
"description": "A sticky container to be used in 2-column layouts.",
"textdomain": "wporg",
"attributes": {},
"attributes": {
"hasBackToTop": {
"type": "boolean",
"default": true
},
"inlineBreakpoint": {
"type": "string",
"default": "1200px"
}
},
"supports": {
"inserter": false,
"__experimentalLayout": true,
Expand Down
Loading
Loading