infinum / eightshift-docs

A documentation website for Eightshift open source projects
https://eightshift.com
MIT License
84 stars 27 forks source link

Add With Select details #126

Open iruzevic opened 4 years ago

iruzevic commented 4 years ago

Explain how to use withSelect

import { withSelect } from '@wordpress/data';

const ImageInfiniteEditorWithSelect = (props) => {
  const {
    attributes: {
      blockClass,
      media,
    },
  } = props;

  return (
    <div className={blockClass}>
      {
        media.map((item) => {
          return (<ImageEditor
            blockClass={blockClass}
            url={item}
          />)
        })
      }
    </div>
  );
};

export const ImageInfiniteEditor = withSelect( (select, props) => {
  const {
    attributes: {
      media,
    },
  } = props;

  const images = media.map((item) => {
    const image = wp.data.select('core').getMedia(item);

    if (typeof image !== 'undefined') {
      return image.source_url;
    }
  });

  return {
    attributes: {
      media: images,
    },
  }

})(ImageInfiniteEditorWithSelect);
dingo-d commented 3 years ago

I'd add this to es docs plus a separate how-to article.