Skip to content

Commit

Permalink
fix: update Homepage Posts grid spacing and add control (#1245)
Browse files Browse the repository at this point in the history
  • Loading branch information
@laurelfulford
laurelfulford authored Aug 29, 2022
1 parent e838e61 commit 9fa6972
Show file tree
Hide file tree
Showing 4 changed files with 159 additions and 48 deletions.
4 changes: 4 additions & 0 deletions src/blocks/homepage-articles/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,10 @@
"type": "integer",
"default": 3
},
"colGap": {
"type": "integer",
"default": 3
},
"postsToShow": {
"type": "integer",
"default": 3
Expand Down
67 changes: 59 additions & 8 deletions src/blocks/homepage-articles/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,7 @@ class Edit extends Component {
postsToShow,
categories,
columns,
colGap,
postType,
showImage,
showCaption,
Expand Down Expand Up @@ -322,6 +323,24 @@ class Edit extends Component {
},
];

const colGapOptions = [
{
value: 1,
label: /* translators: label for small size option */ __( 'Small', 'newspack-blocks' ),
shortName: /* translators: abbreviation for small size */ __( 'S', 'newspack-blocks' ),
},
{
value: 2,
label: /* translators: label for medium size option */ __( 'Medium', 'newspack-blocks' ),
shortName: /* translators: abbreviation for medium size */ __( 'M', 'newspack-blocks' ),
},
{
value: 3,
label: /* translators: label for large size option */ __( 'Large', 'newspack-blocks' ),
shortName: /* translators: abbreviation for large size */ __( 'L', 'newspack-blocks' ),
},
];

return (
<Fragment>
<PanelBody title={ __( 'Display Settings', 'newspack-blocks' ) } initialOpen={ true }>
Expand Down Expand Up @@ -357,14 +376,44 @@ class Edit extends Component {
postType={ postType }
/>
{ postLayout === 'grid' && (
<RangeControl
label={ __( 'Columns', 'newspack-blocks' ) }
value={ columns }
onChange={ _columns => setAttributes( { columns: _columns } ) }
min={ 2 }
max={ 6 }
required
/>
<Fragment>
<RangeControl
label={ __( 'Columns', 'newspack-blocks' ) }
value={ columns }
onChange={ _columns => setAttributes( { columns: _columns } ) }
min={ 2 }
max={ 6 }
required
/>

<BaseControl
label={ __( 'Columns Gap', 'newspack-blocks' ) }
id="newspackcolumns-col-gap"
>
<PanelRow>
<ButtonGroup
id="newspackcolumns-col-gap"
aria-label={ __( 'Columns Gap', 'newspack-blocks' ) }
>
{ colGapOptions.map( option => {
const isCurrent = colGap === option.value;
return (
<Button
isLarge
isPrimary={ isCurrent }
aria-pressed={ isCurrent }
aria-label={ option.label }
key={ option.value }
onClick={ () => setAttributes( { colGap: option.value } ) }
>
{ option.shortName }
</Button>
);
} ) }
</ButtonGroup>
</PanelRow>
</BaseControl>
</Fragment>
) }
{ ! specificMode && isBlogPrivate() ? (
/*
Expand Down Expand Up @@ -603,6 +652,7 @@ class Edit extends Component {
moreButton,
moreButtonText,
columns,
colGap,
typeScale,
imageScale,
mobileStack,
Expand All @@ -617,6 +667,7 @@ class Edit extends Component {
'is-grid': postLayout === 'grid',
'show-image': showImage,
[ `columns-${ columns }` ]: postLayout === 'grid',
[ `colgap-${ colGap }` ]: postLayout === 'grid',
[ `ts-${ typeScale }` ]: typeScale !== '5',
[ `image-align${ mediaPosition }` ]: showImage,
[ `is-${ imageScale }` ]: imageScale !== '1' && showImage,
Expand Down
2 changes: 1 addition & 1 deletion src/blocks/homepage-articles/view.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ function newspack_blocks_render_block_homepage_articles( $attributes ) {
$classes .= ' is-grid';
}
if ( isset( $attributes['columns'] ) && 'grid' === $attributes['postLayout'] ) {
$classes .= ' columns-' . $attributes['columns'];
$classes .= ' columns-' . $attributes['columns'] . ' colgap-' . $attributes['colGap'];
}
if ( $attributes['showImage'] ) {
$classes .= ' show-image';
Expand Down
134 changes: 95 additions & 39 deletions src/blocks/homepage-articles/view.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,34 @@
@use '../../shared/sass/mixins';
@use '../../shared/sass/preview';

:root {
--wpnbha-col-gap: 1em;
}

@include mixins.media( mobile ) {
:root {
--wpnbha-col-gap: 16px;
}
}

@include mixins.media( tablet ) {
:root {
--wpnbha-col-gap: 32px;
}
}

.colgap-2 {
@include mixins.media( mobile ) {
--wpnbha-col-gap: 16px;
}
}

.colgap-1 {
@include mixins.media( mobile ) {
--wpnbha-col-gap: 8px;
}
}

.wpnbha {
margin-bottom: 1em;

Expand All @@ -25,49 +53,82 @@
}

/* Column styles */
&.is-grid > div {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
flex-direction: row;
gap: 16px;
padding: 0;
list-style: none;
}

&.is-grid {
> div {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
flex-direction: row;
gap: var( --wpnbha-col-gap );
padding: 0;
list-style: none;
}

article {
flex-basis: 100%;
margin-bottom: 0;
}

@include mixins.media( tablet ) {
margin-bottom: 1em;
}
.article-section-title {
margin-bottom: calc( 1em - var( --wpnbha-col-gap ) );
}
}

@include mixins.media( mobile ) {
// width of column - ( column gap / number of columns * number of gaps )
&.columns-3 article,
&.columns-6 article {
flex-basis: calc( 33.333% - 16px );
flex-basis: calc( 33.33% - ( var( --wpnbha-col-gap ) / 3 * 2 ) );
}

&.is-style-borders.columns-3 article,
&.is-style-borders.columns-6 article {
flex-basis: calc( 33.33% - ( 2 * var( --wpnbha-col-gap ) / 3 * 2 ) - 1px );
}

&.columns-2 article,
&.columns-4 article,
&.columns-5 article {
flex-basis: calc( 50% - 16px );
flex-basis: calc( 50% - ( var( --wpnbha-col-gap ) / 2 ) );
}

&.columns-5 article:last-of-type {
&.is-style-borders.columns-2 article,
&.is-style-borders.columns-4 article,
&.is-style-borders.columns-5 article {
flex-basis: calc( 50% - ( 2 * var( --wpnbha-col-gap ) / 2 ) - 1px );
}

&.columns-5 article:last-of-type,
&.is-style-borders.columns-5 article:last-of-type {
flex-basis: 100%;
}
}

@include mixins.media( tablet ) {
@for $i from 2 through 6 {
&.columns-#{ $i } article,
&.columns-#{ $i } article:last-of-type {
flex-basis: calc( ( 100% / #{$i} ) - 16px );
}
&.columns-4 article {
flex-basis: calc( 25% - ( var( --wpnbha-col-gap ) / 4 * 3 ) );
}

&.is-style-borders.columns-4 article {
flex-basis: calc( 25% - ( 2 * var( --wpnbha-col-gap ) / 4 * 3 ) - 1px );
}

&.columns-5 article,
&.columns-5 article:last-of-type {
flex-basis: calc( 20% - ( var( --wpnbha-col-gap ) / 5 * 4 ) );
}

&.is-style-borders.columns-5 article,
&.is-style-borders.columns-5 article:last-of-type {
flex-basis: calc( 20% - ( 2 * var( --wpnbha-col-gap ) / 5 * 4 ) - 1px );
}

&.columns-6 article {
flex-basis: calc( 16.66667% - ( var( --wpnbha-col-gap ) / 6 * 5 ) );
}

&.is-style-borders.columns-6 article {
flex-basis: calc( 16.66667% - ( 2 * var( --wpnbha-col-gap ) / 6 * 5 ) - 1px );
}
}

Expand Down Expand Up @@ -698,55 +759,49 @@ amp-script .wpnbha {
article {
border: solid rgba( 0, 0, 0, 0.2 );
border-width: 0 0 1px;
margin-bottom: 1em;
box-sizing: content-box;
padding-bottom: 1em;

&:last-of-type {
&:not( :first-of-type ) {
border-bottom: 0;
padding-right: 0;
}
}
}

@include mixins.media( mobile ) {
@for $i from 2 through 6 {
&.columns-#{ $i } article {
padding-right: calc( ( 16px * #{$i} ) / ( #{$i} - 1 ) );
}
&.is-grid article {
border-width: 0;
padding-right: 0;
}

&.columns-2,
&.columns-4,
&.columns-5 {
article {
border-width: 0;
&:nth-of-type( odd ) {
border-width: 0 1px 0 0;
}
article:nth-of-type( odd ):not( :last-of-type ) {
border-width: 0 1px 0 0;
padding-right: var( --wpnbha-col-gap );
}
}

&.columns-3,
&.columns-6 {
article {
border-width: 0;

&:nth-of-type( 3n + 1 ),
&:nth-of-type( 3n + 2 ) {
&:nth-of-type( 3n + 1 ):not( :last-of-type ),
&:nth-of-type( 3n + 2 ):not( :last-of-type ) {
border-width: 0 1px 0 0;
padding-right: var( --wpnbha-col-gap );
}
}
}

&.is-grid article:last-of-type {
border: 0;
}
}

@include mixins.media( tablet ) {
&.is-grid {
article {
border-width: 0 1px 0 0;
padding-right: var( --wpnbha-col-gap );
}
}

Expand All @@ -758,6 +813,7 @@ amp-script .wpnbha {
&.columns-5 article:nth-of-type( 5n ),
&.columns-6 article:nth-of-type( 6n ) {
border: 0;
padding-right: 0;
}
}
}
Expand Down

0 comments on commit 9fa6972

Please sign in to comment.