Skip to content

Commit

Permalink
Update ToC styles to match Developer designs
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamwoodnz
adamwoodnz committed Nov 14, 2023
1 parent bfa544e commit 9a1fae9
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 45 deletions.
3 changes: 3 additions & 0 deletions images/chevron-small.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions mu-plugins/blocks/sidebar-container/postcss/style.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,16 @@
&.is-fixed-sidebar .is-link-to-top,
&.is-bottom-sidebar .is-link-to-top {
display: block;
margin-top: 0;

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

& > .wp-block-group:has(.wp-block-wporg-table-of-contents) + .is-link-to-top {
border-top: 1px solid var(--wp--preset--color--light-grey-1);
padding-top: var(--wp--preset--spacing--20);
}
}
}
Expand Down
10 changes: 2 additions & 8 deletions mu-plugins/blocks/sidebar-container/src/view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,19 +89,13 @@ function init() {
const list = container?.querySelector( '.wporg-table-of-contents__list' );

if ( toggleButton && list ) {
// If the page is at least two columns, expand the toggle by default.
if ( window.matchMedia( '(min-width: 1200px)' ).matches ) {
toggleButton.setAttribute( 'aria-expanded', true );
list.removeAttribute( 'style' );
}

toggleButton.addEventListener( 'click', function () {
if ( toggleButton.getAttribute( 'aria-expanded' ) === 'true' ) {
toggleButton.setAttribute( 'aria-expanded', false );
list.setAttribute( 'style', 'display:none;' );
list.removeAttribute( 'style' );
} else {
toggleButton.setAttribute( 'aria-expanded', true );
list.removeAttribute( 'style' );
list.setAttribute( 'style', 'display:block;' );
}

// Use the same media query that determines whether it's 2 columns,
Expand Down
9 changes: 6 additions & 3 deletions mu-plugins/blocks/table-of-contents/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,14 +56,17 @@ function render( $attributes, $content, $block ) {
$title = apply_filters( 'wporg_table_of_contents_heading', __( 'In this article', 'wporg' ), $post->ID );

$content = '<div class="wporg-table-of-contents__header">';
$content .= '<h2>' . esc_html( $title ) . '</h2>';
$content .= do_blocks(
'<!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"fontSize":"normal","fontFamily":"inter"} -->
<h2 class="wp-block-heading has-inter-font-family has-normal-font-size" style="font-style:normal;font-weight:400">' . esc_html( $title ) . '</h2>
<!-- /wp:heading -->'
);
$content .= '<button type="button" class="wporg-table-of-contents__toggle" aria-expanded="false">';
$content .= '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.005 10.555 12 16.014l-6.004-5.459 1.009-1.11L12 13.986l4.996-4.541 1.009 1.11Z" fill="#3858E9"/></svg>';
$content .= '<span class="screen-reader-text">' . esc_html__( 'Table of Contents', 'wporg' ) . '</span>';
$content .= '</button>';
$content .= '</div>';

$content .= '<ul style="display:none;" class="wporg-table-of-contents__list">';
$content .= '<ul class="wporg-table-of-contents__list">';

$last_item = false;

Expand Down
88 changes: 54 additions & 34 deletions mu-plugins/blocks/table-of-contents/postcss/style.pcss
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,85 @@
:where(.wp-block-wporg-table-of-contents) {
padding-top: 15px;
padding-right: var(--wp--preset--spacing--20);
padding-bottom: 15px;
padding-left: var(--wp--preset--spacing--20);
background: var(--wp--preset--color--blueberry-4);
color: var(--wp--preset--color--blueberry-1);
--local--line-height: var(--wp--custom--body--small--typography--line-height);
--local--icon-size: calc(var(--local--line-height) * 1em);

font-size: var(--wp--preset--font-size--small);

@media (max-width: 1199px) {
border: 1px solid var(--wp--preset--color--light-grey-1);
padding: 15px var(--wp--preset--spacing--20);

.wporg-table-of-contents__list {
display: none;
}
}

@media (min-width: 1200px) {
.wporg-table-of-contents__toggle {
display: none;
}
}
}

.wporg-table-of-contents__header {
display: grid;
grid-template-columns: 1fr auto;
display: flex;
justify-content: space-between;
align-items: center;

& h2 {
margin: 0 !important;
color: var(--wp--preset--color--charcoal-1);
font-family: var(--wp--preset--font-family--inter);
font-size: var(--wp--preset--font-size--small);
line-height: 1.6;
.wp-block-heading {
margin-bottom: 0;
}

& button {
padding: 0;
width: 2rem;
height: 2rem;
background: transparent;
.wporg-table-of-contents__toggle {
font-size: inherit;
background-color: transparent;
border: none;
color: var(--wp--preset--color--blueberry-1);
padding: 0;
cursor: pointer;
height: var(--local--icon-size);

&::before {
content: "";
display: inline-block;
height: var(--local--icon-size);
width: var(--local--icon-size);
mask-image: url(../../../../images/chevron-small.svg);
mask-repeat: no-repeat;
mask-position: center;
transform: rotate(-90deg);
background-color: var(--wp--preset--color--charcoal-4);
}

&[aria-expanded="true"]::before {
transform: revert;
}

&:focus-visible {
outline: 1.5px solid var(--wp--preset--color--blueberry-1);
outline-offset: -0.5px;
box-shadow: none;
border-radius: 2px;
outline: 1px dashed var(--wp--preset--color--blueberry-1);
}
}
}

.wporg-table-of-contents__list {
margin-bottom: 0;
padding-left: 1em;
margin-top: var(--wp--preset--spacing--20);
margin-bottom: var(--wp--preset--spacing--20);
padding-left: 0;
font-size: var(--wp--preset--font-size--small);
line-height: 1.6;
list-style: none;

& li {
margin-bottom: 3px;
margin-block: calc(var(--wp--preset--spacing--20) / 4);
color: var(--wp--preset--color--charcoal-4);

& ul {
margin-top: 3px;
padding-left: 1.5em;
list-style-type: disc;
}

&:last-child {
margin-bottom: 0;
padding-left: 14px;
list-style: none;
}
}

& a {
text-decoration-line: none;
color: inherit;

&:hover {
text-decoration-line: underline;
Expand Down

0 comments on commit 9a1fae9

Please sign in to comment.