Only show the image sizes with names (#11481)

WordPress · Nov 7, 2018 · a61278d · a61278d
1 parent 7a20afe
commit a61278d
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 30 deletions.
diff --git a/lib/client-assets.php b/lib/client-assets.php
@@ -1332,8 +1332,6 @@ function gutenberg_load_locale_data() {
  * @return array
  */
 function gutenberg_get_available_image_sizes() {
-	$sizes      = get_intermediate_image_sizes();
-	$sizes[]    = 'full';
 	$size_names = apply_filters(
 		'image_size_names_choose',
 		array(
@@ -1345,10 +1343,10 @@ function gutenberg_get_available_image_sizes() {
 	);
 
 	$all_sizes = array();
-	foreach ( $sizes as $size_slug ) {
+	foreach ( $size_names as $size_slug => $size_name ) {
 		$all_sizes[] = array(
 			'slug' => $size_slug,
-			'name' => isset( $size_names[ $size_slug ] ) ? $size_names[ $size_slug ] : $size_slug,
+			'name' => $size_name,
 		);
 	}
 
@@ -1622,7 +1620,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(),
+		'imageSizes'             => gutenberg_get_available_image_sizes(),
 
 		// Ideally, we'd remove this and rely on a REST API endpoint.
 		'postLock'               => $lock_details,

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -7,8 +7,7 @@ import {
 	isEmpty,
 	map,
 	pick,
-	startCase,
-	keyBy,
+	compact,
 } from 'lodash';
 
 /**
@@ -255,10 +254,6 @@ class ImageEdit extends Component {
 		};
 	}
 
-	getImageSizes() {
-		return get( this.props.image, [ 'media_details', 'sizes' ], {} );
-	}
-
 	getLinkDestinationOptions() {
 		return [
 			{ value: LINK_DESTINATION_NONE, label: __( 'None' ) },
@@ -274,6 +269,20 @@ class ImageEdit extends Component {
 		} );
 	}
 
+	getImageSizeOptions() {
+		const { imageSizes, image } = this.props;
+		return compact( map( imageSizes, ( { name, slug } ) => {
+			const sizeUrl = get( image, [ 'media_details', 'sizes', slug, 'source_url' ] );
+			if ( ! sizeUrl ) {
+				return null;
+			}
+			return {
+				value: sizeUrl,
+				label: name,
+			};
+		} ) );
+	}
+
 	render() {
 		const { isEditing } = this.state;
 		const {
@@ -286,11 +295,10 @@ class ImageEdit extends Component {
 			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' );
+		const imageSizeOptions = this.getImageSizeOptions();
 
 		let toolbarEditButton;
 		if ( url ) {
@@ -362,7 +370,6 @@ class ImageEdit extends Component {
 			'is-focused': isSelected,
 		} );
 
-		const imageSizes = this.getImageSizes();
 		const isResizable = [ 'wide', 'full' ].indexOf( align ) === -1 && isLargeViewport;
 		const isLinkURLInputDisabled = linkDestination !== LINK_DESTINATION_CUSTOM;
 
@@ -375,14 +382,11 @@ 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( imageSizes ) && (
+					{ ! isEmpty( imageSizeOptions ) && (
 						<SelectControl
 							label={ __( 'Image Size' ) }
 							value={ url }
-							options={ map( imageSizes, ( size, slug ) => ( {
-								value: size.source_url,
-								label: availableImageSizesBySlug[ slug ] ? availableImageSizesBySlug[ slug ].name : startCase( slug ),
-							} ) ) }
+							options={ imageSizeOptions }
 							onChange={ this.updateImageURL }
 						/>
 					) }
@@ -596,13 +600,13 @@ export default compose( [
 		const { getMedia } = select( 'core' );
 		const { getEditorSettings } = select( 'core/editor' );
 		const { id } = props.attributes;
-		const { maxWidth, isRTL, availableImageSizes } = getEditorSettings();
+		const { maxWidth, isRTL, imageSizes } = getEditorSettings();
 
 		return {
 			image: id ? getMedia( id ) : null,
 			maxWidth,
 			isRTL,
-			availableImageSizes,
+			imageSizes,
 		};
 	} ),
 	withViewportMatch( { isLargeViewport: 'medium' } ),

diff --git a/packages/editor/src/store/defaults.js b/packages/editor/src/store/defaults.js
@@ -11,14 +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
- *  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
+ *  alignWide       boolean        Enable/Disable Wide/Full Alignments
+ *  colors          Array          Palette colors
+ *  fontSizes       Array          Available font sizes
+ *  imageSizes      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,
@@ -107,7 +107,7 @@ export const EDITOR_SETTINGS_DEFAULTS = {
 		},
 	],
 
-	availableImageSizes: [
+	imageSizes: [
 		{ slug: 'thumbnail', label: __( 'Thumbnail' ) },
 		{ slug: 'medium', label: __( 'Medium' ) },
 		{ slug: 'large', label: __( 'Large' ) },