Skip to content

Commit

Permalink
Use the image sizes names filter (#11356)
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad committed Nov 2, 2018
1 parent cbbf22e commit 8322628
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 14 deletions.
30 changes: 30 additions & 0 deletions lib/client-assets.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1325,6 +1325,35 @@ function gutenberg_load_locale_data() {
);
}

/**
* Retrieve The available image sizes for a post
*
* @return array
*/
function gutenberg_get_available_image_sizes() {
$sizes = get_intermediate_image_sizes();
$sizes[] = 'full';
$size_names = apply_filters(
'image_size_names_choose',
array(
'thumbnail' => __( 'Thumbnail', 'gutenberg' ),
'medium' => __( 'Medium', 'gutenberg' ),
'large' => __( 'Large', 'gutenberg' ),
'full' => __( 'Full Size', 'gutenberg' ),
)
);

$all_sizes = array();
foreach ( $sizes as $size_slug ) {
$all_sizes[] = array(
'slug' => $size_slug,
'name' => isset( $size_names[ $size_slug ] ) ? $size_names[ $size_slug ] : $size_slug,

This comment has been minimized.

Sign in to view

Copy link
@azaozz

azaozz Nov 6, 2018 •
edited
Loading

Contributor

If I understand the issue, we want "labels" for selected sizes only, not for all sizes. Then we "filter" all available image sizes (from the image meta) in the client, and display only sizes that have a label.

So why do we output the slug when there is no label? The fact that a (translatable) label is missing means that the image size is "non-displayable". Adding the slug instead of a label stops this from working well?
);
}

return $all_sizes;
}

/**
* Scripts & Styles.
*
Expand Down Expand Up @@ -1602,6 +1631,7 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
'maxUploadFileSize' => $max_upload_size,
'allowedMimeTypes' => get_allowed_mime_types(),
'styles' => $styles,
'availableImageSizes' => gutenberg_get_available_image_sizes(),

This comment has been minimized.

Sign in to view

Copy link
@azaozz

azaozz Nov 6, 2018 •
edited
Loading

Contributor

Uh, would it be possible to name this a bit better? :)

This has nothing to do with what image sizes are "available". These are individual for each image (and can be very different, even for images with identical original size). This only adds "translatable image size labels" for some of the image sizes.

Perhaps something like displayableImageSizes or imageSizeLabels? :)

// Ideally, we'd remove this and rely on a REST API endpoint.
'postLock' => $lock_details,
Expand Down
29 changes: 22 additions & 7 deletions packages/block-library/src/image/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
map,
pick,
startCase,
keyBy,
} from 'lodash';

/**
Expand Down Expand Up @@ -245,7 +246,7 @@ class ImageEdit extends Component {
};
}

getAvailableSizes() {
getImageSizes() {
return get( this.props.image, [ 'media_details', 'sizes' ], {} );
}

Expand All @@ -266,9 +267,22 @@ class ImageEdit extends Component {

render() {
const { isEditing } = this.state;
const { attributes, setAttributes, isLargeViewport, isSelected, className, maxWidth, noticeOperations, noticeUI, toggleSelection, isRTL } = this.props;
const {
attributes,
setAttributes,
isLargeViewport,
isSelected,
className,
maxWidth,
noticeOperations,
noticeUI,
toggleSelection,
isRTL,
availableImageSizes,
} = this.props;
const { url, alt, caption, align, id, href, linkDestination, width, height, linkTarget } = attributes;
const isExternal = isExternalImage( id, url );
const availableImageSizesBySlug = keyBy( availableImageSizes, 'slug' );

let toolbarEditButton;
if ( url ) {
Expand Down Expand Up @@ -340,7 +354,7 @@ class ImageEdit extends Component {
'is-focused': isSelected,
} );

const availableSizes = this.getAvailableSizes();
const imageSizes = this.getImageSizes();
const isResizable = [ 'wide', 'full' ].indexOf( align ) === -1 && isLargeViewport;
const isLinkURLInputDisabled = linkDestination !== LINK_DESTINATION_CUSTOM;

Expand All @@ -353,13 +367,13 @@ class ImageEdit extends Component {
onChange={ this.updateAlt }
help={ __( 'Alternative text describes your image to people who can’t see it. Add a short description with its key details.' ) }
/>
{ ! isEmpty( availableSizes ) && (
{ ! isEmpty( imageSizes ) && (
<SelectControl
label={ __( 'Image Size' ) }
value={ url }
options={ map( availableSizes, ( size, name ) => ( {
options={ map( imageSizes, ( size, slug ) => ( {
value: size.source_url,
label: startCase( name ),
label: availableImageSizesBySlug[ slug ] ? availableImageSizesBySlug[ slug ].name : startCase( slug ),
} ) ) }
onChange={ this.updateImageURL }
/>
Expand Down Expand Up @@ -574,12 +588,13 @@ export default compose( [
const { getMedia } = select( 'core' );
const { getEditorSettings } = select( 'core/editor' );
const { id } = props.attributes;
const { maxWidth, isRTL } = getEditorSettings();
const { maxWidth, isRTL, availableImageSizes } = getEditorSettings();

return {
image: id ? getMedia( id ) : null,
maxWidth,
isRTL,
availableImageSizes,
};
} ),
withViewportMatch( { isLargeViewport: 'medium' } ),
Expand Down
22 changes: 15 additions & 7 deletions packages/editor/src/store/defaults.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,14 @@ export const PREFERENCES_DEFAULTS = {
/**
* The default editor settings
*
* alignWide boolean Enable/Disable Wide/Full Alignments
* colors Array Palette colors
* fontSizes Array Available font sizes
* maxWidth number Max width to constraint resizing
* blockTypes boolean|Array Allowed block types
* hasFixedToolbar boolean Whether or not the editor toolbar is fixed
* focusMode boolean Whether the focus mode is enabled or not
* alignWide boolean Enable/Disable Wide/Full Alignments
* colors Array Palette colors
* fontSizes Array Available font sizes
* availableImageSizes Array Available image sizes
* maxWidth number Max width to constraint resizing
* blockTypes boolean|Array Allowed block types
* hasFixedToolbar boolean Whether or not the editor toolbar is fixed
* focusMode boolean Whether the focus mode is enabled or not
*/
export const EDITOR_SETTINGS_DEFAULTS = {
alignWide: false,
Expand Down Expand Up @@ -106,6 +107,13 @@ export const EDITOR_SETTINGS_DEFAULTS = {
},
],

availableImageSizes: [
{ slug: 'thumbnail', label: __( 'Thumbnail' ) },
{ slug: 'medium', label: __( 'Medium' ) },
{ slug: 'large', label: __( 'Large' ) },
{ slug: 'full', label: __( 'Full Size' ) },
],

// This is current max width of the block inner area
// It's used to constraint image resizing and this value could be overridden later by themes
maxWidth: 580,
Expand Down

0 comments on commit 8322628

Please sign in to comment.