Ideas for Arc XP

Themes blocks are very flexible, but we also see that they are designed to be used i specific positions in the standard layouts from themes. We have a situation where we have designed our sites to use the standard blocks (especiallty XL and LG ) in the fullwidh column instead of the main column , which is narrower. Doing this has lead to pixalated images, since the images are optimized for the main column width.
We suggest making the sizes configurable for developers.

We have found that the file https://github.com/WPMedia/fusion-news-theme-blocks/blob/stable/blocks/resizer-image-block/ratiosFor.js contains the hardcoded sizes. These sizes are also listed blocks.json, but changing these settings there does not seem to changes the size.
We suggest to externalize these sizer, as well as the defaultratios and and possible aspectRatios into blocks.json or similar place.

This idea was also discussed with Neal Malkani.

const sizes = {

  XL: {

    options: [

      { kind: 'small', width: 400 },

      { kind: 'medium', width: 600 },

      { kind: 'large', width: 800 },

    ],

    defaultRatio: '4:3',

  },

  LG: {

    options: [

      { kind: 'small', width: 274 },

      { kind: 'medium', width: 274 },

      { kind: 'large', width: 377 },

    ],

    defaultRatio: '4:3',

  },

  MD: {

    options: [

      { kind: 'small', width: 274 },

      { kind: 'medium', width: 274 },

      { kind: 'large', width: 400 },

    ],

    defaultRatio: '16:9',

  },

  SM: {

    options: [

      { kind: 'small', width: 274 },

      { kind: 'medium', width: 274 },

      { kind: 'large', width: 400 },

    ],

    defaultRatio: '3:2',

  },

};

const ratios = {

  '4:3': 0.75,

  '3:2': 0.6668,

  '16:9': 0.5625,

};