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

Add gallery crop option in Inspector #1545

Merged
merged 7 commits into from
Jun 29, 2017
Merged

Add gallery crop option in Inspector #1545

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
389fc17
Crop gallery images by default
jasmussen Jun 28, 2017
3969523
Polish inspector controls generally.
jasmussen Jun 28, 2017
09b6c41
Make the crop actually work.
jasmussen Jun 28, 2017
3a60e05
Enable crop by default. Props @mtias.
jasmussen Jun 28, 2017
20ce5d8
Move to is-cropped classname.
jasmussen Jun 28, 2017
5ccb8ca
Fix for IE11.
jasmussen Jun 28, 2017
5ebb52f
Revert back to object-fit.
jasmussen Jun 29, 2017
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
13 changes: 12 additions & 1 deletion blocks/library/gallery/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { registerBlockType, query as hpq } from '../../api';
import MediaUploadButton from '../../media-upload-button';
import InspectorControls from '../../inspector-controls';
import RangeControl from '../../inspector-controls/range-control';
import ToggleControl from '../../inspector-controls/toggle-control';
import BlockControls from '../../block-controls';
import BlockAlignmentToolbar from '../../block-alignment-toolbar';
import GalleryImage from './gallery-image';
Expand Down Expand Up @@ -75,6 +76,8 @@ registerBlockType( 'core/gallery', {
const { images = [], columns = defaultColumnsNumber( attributes ), align = 'none' } = attributes;
const setColumnsNumber = ( event ) => setAttributes( { columns: event.target.value } );
const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
const { imageCrop = true } = attributes;
const toggleImageCrop = () => setAttributes( { imageCrop: ! imageCrop } );

const controls = (
focus && (
Expand Down Expand Up @@ -121,16 +124,24 @@ registerBlockType( 'core/gallery', {
controls,
focus && images.length > 1 && (
Copy link
Member

Choose a reason for hiding this comment

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

I think the description should be shown at all times, not just when there's more than 1 image. Of course, this check makes sense for the controls.

Copy link
Member

Choose a reason for hiding this comment

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

Wonder if we even need a description for this block.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Responded in core slack, I think this is a great place to show contextual help. We want to ensure to have best practices in place that suggest no more than 2 lines, but it feels like it's worth using this spot to show this.

<InspectorControls key="inspector">
<p className="editor-block-inspector__description">Image galleries are a great way to share groups of pictures on your site.</p>
Copy link
Member

Choose a reason for hiding this comment

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

just mind note: we should create a component for this <BlockDescription> to avoid copying and relying on classes.

Copy link
Member

Choose a reason for hiding this comment

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

I could create a PR for that if nobody is working on it yet. Sounds quite simple.

Copy link
Member

Choose a reason for hiding this comment

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

Go for it!

<hr />
Copy link
Member

Choose a reason for hiding this comment

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

Is this something we want after every description? Perhaps we should do it with a CSS border in that case.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I figured we'd keep it manual for now, per the idea that we might have blocks with no inspector options, or even use the description elsewhere.

By the way, I've used this pattern for the design:

screen shot 2017-06-28 at 13 02 11

The italics will come in when the Read More block is merged.

Copy link
Member

Choose a reason for hiding this comment

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

Sounds good.

<h3>{ __( 'Gallery Settings' ) }</h3>
<RangeControl
label={ __( 'Columns' ) }
value={ columns }
onChange={ setColumnsNumber }
min="1"
max={ Math.min( MAX_COLUMNS, images.length ) }
/>
<ToggleControl
label={ __( 'Crop Images' ) }
checked={ !! imageCrop }
onChange={ toggleImageCrop }
/>
</InspectorControls>
),
<div key="gallery" className={ `${ className } align${ align } columns-${ columns }` }>
<div key="gallery" className={ `${ className } align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` }>
{ images.map( ( img ) => (
<GalleryImage key={ img.url } img={ img } />
) ) }
Expand Down
15 changes: 15 additions & 0 deletions blocks/library/gallery/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,21 @@
}
}

// Cropped
&.is-cropped .blocks-gallery-image {
img {
width: 100%;
height: 100%;
object-fit: cover;
}

// Alas, IE11+ doesn't support object-fit
_:-ms-lang(x), img {
height: auto;
width: auto;
}
}

&.columns-1 figure {
width: calc(100% / 1 - 2 * 8px);
}
Expand Down
6 changes: 6 additions & 0 deletions editor/sidebar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,12 @@
font-size: $default-font-size;
}

hr {
border-top: none;
border-bottom: 1px solid $light-gray-500;
margin: 1.5em 0;
}

ul.components-toolbar {
box-shadow: none;
margin-bottom: $panel-padding;
Expand Down