How to use @wordpress/editor - 10 common examples

*
		 * @see https://github.com/WordPress/gutenberg/blob/3f1324b53cc8bb45d08d12d5321d6f88510bed09/packages/blocks/src/api/serializer.js#L78-L96
		 * @see https://github.com/WordPress/gutenberg/blob/c5f9bd88125282a0c35f887cc8d835f065893112/packages/editor/src/hooks/generated-class-name.js#L42
		 * @see https://github.com/Automattic/wp-calypso/pull/30546#issuecomment-463637946
		 */
		return CoreVideoSave( props );
	}

	const url = `https://videopress.com/v/${ guid }`;

	return (
		<figure>
			<div>
				{ `\n${ url }\n` /* URL needs to be on its own line. */ }
			</div>
			{ ! RichText.isEmpty( caption ) &amp;&amp; (
				
			) }
		</figure>
	);
};

const onChooseOrCreate = useCallback( async () => {
		const nextAttributes = { slug, theme };
		if ( postId !== undefined && postId !== null ) {
			// Existing template part found.
			nextAttributes.postId = postId;
		} else {
			// Create a new template part.
			try {
				const cleanSlug = cleanForSlug( slug );
				const templatePart = await saveEntityRecord(
					'postType',
					'wp_template_part',
					{
						title: cleanSlug,
						status: 'publish',
						slug: cleanSlug,
						meta: { theme },
					}
				);
				nextAttributes.postId = templatePart.id;
			} catch ( err ) {
				setHelp( __( 'Error adding template.' ) );
			}
		}
		setAttributes( nextAttributes );

const Renderer = (props) => {
  const {
    className,
    attributes: {
      columns,
      backgroundColor,
      textColor,
    },
  } = props

  const classes = classnames(
    className,
    'gridlex',
    `has-${columns.length}-columns`,
    getColorClassName('background', backgroundColor),
    getColorClassName('text', textColor),
  )

  // UI
  return (
    <div>
      
    </div>
  )
}

const Renderer = (props) => {
  const {
    className,
    attributes: {
      columns,
      backgroundColor,
      textColor,
    },
  } = props

  const classes = classnames(
    className,
    'gridlex',
    `has-${columns.length}-columns`,
    getColorClassName('background', backgroundColor),
    getColorClassName('text', textColor),
  )

  // UI
  return (
    <div>
      
    </div>
  )
}

save ({ attributes }) {
    const {
      align,
      backgroundType,
      contentAlign,
      customOverlayColor,
      dimRatio,
      hasParallax,
      overlayColor,
      title,
      url,
      // GUTENBERG JS
      data,
    } = attributes;
    const overlayColorClass = getColorClassName('background-color', overlayColor);
    const style = backgroundType === IMAGE_BACKGROUND_TYPE ?
      backgroundImageStyles(url) :
      {};
    if (! overlayColorClass) {
      style.backgroundColor = customOverlayColor;
    }

    const classes = classnames(
      dimRatioToClass(dimRatio),
      overlayColorClass,
      {
        'has-background-dim': dimRatio !== 0,
        'has-parallax': hasParallax,
        [ `has-${contentAlign}-content` ]: contentAlign !== 'center',
      },
      align ? `align${align}` : null,

customBackgroundColor,
      isStackedOnMobile,
      mediaAlt,
      mediaPosition,
      mediaType,
      mediaUrl,
      mediaWidth,
      // Gutenberg JS
      mediaData,
    } = attributes;
    const mediaTypeRenders = {
      image: () =&gt; <img alt="{" src="{">,
      video: () =&gt; <video src="{" controls="">,
    };

    const backgroundClass = getColorClassName('background-color', backgroundColor);
    const className = classnames({
      'has-media-on-the-right': 'right' === mediaPosition,
      [ backgroundClass ]: backgroundClass,
      'is-stacked-on-mobile': isStackedOnMobile,
    });

    let gridTemplateColumns;
    if (mediaWidth !== DEFAULT_MEDIA_WIDTH) {
      gridTemplateColumns = 'right' === mediaPosition ? `auto ${mediaWidth}%` : `${mediaWidth}% auto`;
    }
    const style = {
      backgroundColor: backgroundClass ? undefined : customBackgroundColor,
      gridTemplateColumns,
    };
    return (
      <div style="{"></div></video>

const Editor = withColors('backgroundColor', 'textColor')((props) => {
  // Variables
  const {
    attributes: {
      columns,
      backgroundColor,
      textColor,
    },
    className,
  } = props

  const classes = classnames(
    className,
    `has-${columns.length}-columns`,
    getColorClassName('background', backgroundColor),
    getColorClassName('text', textColor),
  )

  // UI for columns without any columns
  if (columns.length === 0 && sum(columns) < 1) {
    return (
      
        
        
      
    )

const Editor = withColors('backgroundColor', 'textColor')((props) => {
  // Variables
  const {
    attributes: {
      columns,
      backgroundColor,
      textColor,
    },
    className,
  } = props

  const classes = classnames(
    className,
    `has-${columns.length}-columns`,
    getColorClassName('background', backgroundColor),
    getColorClassName('text', textColor),
  )

  // UI for columns without any columns
  if (columns.length === 0 && sum(columns) < 1) {
    return (
      
        
        
      
    )
  }

withColors,
  getColorClassName,
} from '@wordpress/editor'
import { Fragment } from '@wordpress/element'

/**
 * Internal Dependencies
 */
import Inspector from './inspector'

const ALLOWED_BLOCKS = ['tomodomo/column']

/**
 * Block edit component
 */
const Editor = withColors('backgroundColor', 'textColor')((props) => {
  // Variables
  const {
    attributes: {
      columns,
      backgroundColor,
      textColor,
    },
    className,
  } = props

  const classes = classnames(
    className,
    `has-${columns.length}-columns`,
    getColorClassName('background', backgroundColor),
    getColorClassName('text', textColor),
  )

if (attributes.id && attributes.id !== '') {
          res.post = getEntityRecord('postType', 'post', attributes.id);

          if (res.post) {
            attributes.imageId = res.post.featured_media;
          }
        }
        break;
    } */

    return {
      ...res,
      ...withSelectMedia(select, props),
    };
  }),
  withColors({ textColor: 'color' }),
  withFallbackStyles((node, ownProps) => {
    const { fontSize, customFontSize } = ownProps.attributes;
    const editableNode = node.querySelector('[contenteditable="true"]');
    // verify if editableNode is available, before using getComputedStyle.
    const computedStyles = editableNode ? getComputedStyle(editableNode) : null;
    return {
      fallbackFontSize: fontSize || customFontSize || ! computedStyles ? undefined : parseInt(computedStyles.fontSize) || undefined,
    };
  }),
  /* withAPIData(props => {
    if (props.attributes.type === 'auto') {
      const postQuery = stringify(pickBy({
        category_id: props.attributes.categoryId,
        order: 'desc',
        orderby: 'date',
        per_page: 1,