• Resolved seo90

    (@seo90)


    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.

    Before

    After

    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?

    wp-includes/js/dist/block-editor.js

    /**
     * Internal dependencies
     */
    
    
    const IMAGE_SIZE_PRESETS = [25, 50, 75, 100];
    
    const image_size_control_noop = () => {};
    
    function ImageSizeControl({
      imageSizeHelp,
      imageWidth,
      imageHeight,
      imageSizeOptions = [],
      isResizable = true,
      slug,
      width,
      height,
      onChange,
      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 {
        currentHeight,
        currentWidth,
        updateDimension,
        updateDimensions
      } = 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')
      }, IMAGE_SIZE_PRESETS.map(scale => {
        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)
  • I have found this issue which seems to be related. Does it sound like the same problem, @seo90?

    Thread Starter seo90

    (@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 1 year, 1 month ago by seo90.
    Moderator jordesign

    (@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: https://github.com/WordPress/gutenberg/issues/12168

    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 year, 1 month ago by maljones. Reason: Edited to fix a typo
    Moderator jordesign

    (@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)
  • The topic ‘Image size presets of the block image disappears when upgrading wordpress to ver’ is closed to new replies.