Support » Alpha/Beta/RC » Image size presets of the block image disappears when upgrading wordpress to ver

  • Hi, I updated wordpress and the Image size presets option that I was using before disappeared. I have the default theme of wordpress and it disappears when I upgrade, if I go back to wordpress version 6.2.2, it reappears.

    This happens in the image gutenberg block.

    I show screenshot of before and now.



    Now it shows the aspect ratio option, but that option does not do the same as the percentages that were there before: 25%, 50%, 75%, 100% and I used it frequently.

    I have been looking in the core code and I have seen that it is still there, I don’t understand why it doesn’t appear.

    How could I reactivate it in the new version of wordpress?


     * Internal dependencies
    const IMAGE_SIZE_PRESETS = [25, 50, 75, 100];
    const image_size_control_noop = () => {};
    function ImageSizeControl({
      imageSizeOptions = [],
      isResizable = true,
      onChangeImage = image_size_control_noop
    }) {
      external_wp_deprecated_default()('wp.blockEditor.__experimentalImageSizeControl', {
        since: '6.3',
        alternative: 'wp.blockEditor.privateApis.DimensionsTool and wp.blockEditor.privateApis.ResolutionTool'
      const {
      } = useDimensionHandler(height, width, imageHeight, imageWidth, onChange);
      return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, imageSizeOptions && imageSizeOptions.length > 0 && (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.SelectControl, {
        __nextHasNoMarginBottom: true,
        label: (0,external_wp_i18n_namespaceObject.__)('Resolution'),
        value: slug,
        options: imageSizeOptions,
        onChange: onChangeImage,
        help: imageSizeHelp,
        size: "__unstable-large"
      }), isResizable && (0,external_wp_element_namespaceObject.createElement)("div", {
        className: "block-editor-image-size-control"
      }, (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.__experimentalHStack, {
        align: "baseline",
        spacing: "3"
      }, (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.__experimentalNumberControl, {
        className: "block-editor-image-size-control__width",
        label: (0,external_wp_i18n_namespaceObject.__)('Width'),
        value: currentWidth,
        min: 1,
        onChange: value => updateDimension('width', value),
        size: "__unstable-large"
      }), (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.__experimentalNumberControl, {
        className: "block-editor-image-size-control__height",
        label: (0,external_wp_i18n_namespaceObject.__)('Height'),
        value: currentHeight,
        min: 1,
        onChange: value => updateDimension('height', value),
        size: "__unstable-large"
      })), (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.__experimentalHStack, null, (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.ButtonGroup, {
        "aria-label": (0,external_wp_i18n_namespaceObject.__)('Image size presets')
      }, => {
        const scaledWidth = Math.round(imageWidth * (scale / 100));
        const scaledHeight = Math.round(imageHeight * (scale / 100));
        const isCurrent = currentWidth === scaledWidth && currentHeight === scaledHeight;
        return (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.Button, {
          key: scale,
          isSmall: true,
          variant: isCurrent ? 'primary' : undefined,
          isPressed: isCurrent,
          onClick: () => updateDimensions(scaledHeight, scaledWidth)
        }, scale, "%");
      })), (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.Button, {
        isSmall: true,
        onClick: () => updateDimensions()
      }, (0,external_wp_i18n_namespaceObject.__)('Reset')))));
    ;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/link-control/settings-drawer.js
Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Alvaro Gómez


    I have found this issue which seems to be related. Does it sound like the same problem, @seo90?

    Thread Starter seo90


    No, my problem is that what I mark with the red arrow disappears when I upgrade to the latest version of wordpress.

    I solved it by creating the option again by myself in the block image.

    I think the option has been removed completely, I guess few people use the option.

    • This reply was modified 3 weeks ago by seo90.
    Moderator jordesign


    Hi @seo90 – You’re correct that the percentage sizes were removed deliberately. With the increase of other controls for image size and aspect ratio, the percentage controls were causing an increasing number of display problems where images would break outside of blocks etc.

    @jordesign Do you happen to know where this was discussed in Git or places where Core changes are determined? I’ve two clients notify me about the need to have it back, so I want to be sure I understand the rationale.

    Ah! Finally found it:

    It seems like they were hidden as a patch for the column issue in the editor, but now clients and I are left figuring out how to adapt their workflows with a control gone without mention in the release notes.

    • This reply was modified 1 week, 2 days ago by maljones. Reason: Edited to fix a typo
    Moderator jordesign


    Hi @maljones – you’re correct – that is indeed the issue. In terms of further feedback on the change – that is likely the best place to offer it as it can be seen and considered by the designers and developers on the project.

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.