block_editor 0.1.3 → 1.0.0

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: block_editor
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 1.0.0
 platform: ruby
 authors:
 - Patrick Lindsay
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-03-17 00:00:00.000000000 Z
+date: 2021-06-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -38,9 +38,9 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '5.1'
-description: WYSIWYG editor but much better..
+description: A block editor for Ruby on Rails built from the Wordpress Gutenberg project
 email:
-- ptrick@yamasolutions.com
+- patrick@yamasolutions.com
 executables: []
 extensions: []
 extra_rdoc_files: []
@@ -49,17 +49,46 @@ files:
 - README.md
 - Rakefile
 - app/assets/config/block_editor_manifest.js
+- app/assets/images/block_editor/contact-form-block.svg
+- app/assets/stylesheets/block_editor/_utilities.scss
 - app/assets/stylesheets/block_editor/backend.scss
-- app/assets/stylesheets/block_editor/backend/blocks.scss
-- app/assets/stylesheets/block_editor/frontend.scss
-- app/assets/stylesheets/block_editor/frontend/blocks.scss
+- app/assets/stylesheets/block_editor/blocks/_backend.scss
+- app/assets/stylesheets/block_editor/blocks/_frontend.scss
+- app/assets/stylesheets/block_editor/blocks/be-accordion/_frontend.scss
+- app/assets/stylesheets/block_editor/blocks/be-alert/_frontend.scss
+- app/assets/stylesheets/block_editor/blocks/be-card/_backend.scss
+- app/assets/stylesheets/block_editor/blocks/be-card/_frontend.scss
+- app/assets/stylesheets/block_editor/blocks/be-contact-form/_backend.scss
+- app/assets/stylesheets/block_editor/blocks/be-cover/_backend.scss
+- app/assets/stylesheets/block_editor/blocks/be-cover/_frontend.scss
+- app/assets/stylesheets/block_editor/blocks/block/_backend.scss
+- app/assets/stylesheets/block_editor/blocks/button/_frontend.scss
+- app/assets/stylesheets/block_editor/blocks/buttons/_backend.scss
+- app/assets/stylesheets/block_editor/blocks/buttons/_frontend.scss
+- app/assets/stylesheets/block_editor/blocks/column/_frontend.scss
+- app/assets/stylesheets/block_editor/blocks/columns/_backend.scss
+- app/assets/stylesheets/block_editor/blocks/columns/_frontend.scss
+- app/assets/stylesheets/block_editor/blocks/image/_backend.scss
+- app/assets/stylesheets/block_editor/blocks/image/_frontend.scss
+- app/assets/stylesheets/block_editor/blocks/seperator/_frontend.scss
+- app/assets/stylesheets/block_editor/blocks/table/_frontend.scss
+- app/assets/stylesheets/block_editor/host_app/_variables.scss
+- app/assets/stylesheets/block_editor/host_app/blocks/_backend.scss
+- app/assets/stylesheets/block_editor/host_app/blocks/_frontend.scss
 - app/controllers/block_editor/application_controller.rb
 - app/helpers/block_editor/application_helper.rb
+- app/javascript/block_editor/blocks/be-accordion/index.js
+- app/javascript/block_editor/blocks/be-alert/index.js
+- app/javascript/block_editor/blocks/be-card/index.js
+- app/javascript/block_editor/blocks/be-contact-form/index.js
+- app/javascript/block_editor/blocks/be-cover/index.js
+- app/javascript/block_editor/blocks/block/edit-panel/index.js
+- app/javascript/block_editor/blocks/block/edit.js
 - app/javascript/block_editor/blocks/button/edit.js
 - app/javascript/block_editor/blocks/column/edit.js
-- app/javascript/block_editor/blocks/image/edit.js
 - app/javascript/block_editor/blocks/index.js
 - app/javascript/block_editor/components/block-editor/index.js
+- app/javascript/block_editor/components/block-editor/popover-wrapper.js
 - app/javascript/block_editor/components/block-editor/styles.scss
 - app/javascript/block_editor/components/header/index.js
 - app/javascript/block_editor/components/header/redo.js
@@ -85,7 +114,9 @@ files:
 - app/mailers/block_editor/application_mailer.rb
 - app/models/block_editor/application_record.rb
 - app/models/block_editor/block_list.rb
+- app/models/block_editor/block_list_connection.rb
 - app/models/concerns/block_editor/listable.rb
+- app/views/block_editor/blocks/be/contact-form/_block.html
 - app/views/layouts/block_editor/application.html.erb
 - bin/rails
 - bin/webpack
@@ -98,9 +129,12 @@ files:
 - config/webpack/test.js
 - config/webpacker.yml
 - db/migrate/20210312032114_create_block_lists.rb
+- db/migrate/20210506220328_create_block_list_connections.rb
 - lib/block_editor.rb
 - lib/block_editor/block_list_renderer.rb
 - lib/block_editor/blocks/base.rb
+- lib/block_editor/blocks/contact_form.rb
+- lib/block_editor/blocks/reusable.rb
 - lib/block_editor/engine.rb
 - lib/block_editor/instance.rb
 - lib/block_editor/version.rb

data/app/assets/stylesheets/block_editor/frontend.scss

@@ -1 +0,0 @@
-@import "block_editor/frontend/blocks";

data/app/javascript/block_editor/blocks/image/edit.js

@@ -1,656 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { get, filter, map, last, omit, pick, includes } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
-import {
-	ExternalLink,
-	PanelBody,
-	ResizableBox,
-	Spinner,
-	TextareaControl,
-	TextControl,
-	ToolbarGroup,
-	withNotices,
-} from '@wordpress/components';
-import { useViewportMatch } from '@wordpress/compose';
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	BlockAlignmentToolbar,
-	BlockControls,
-	BlockIcon,
-	InspectorControls,
-	InspectorAdvancedControls,
-	MediaPlaceholder,
-	MediaReplaceFlow,
-	RichText,
-	__experimentalBlock as Block,
-	__experimentalImageSizeControl as ImageSizeControl,
-	__experimentalImageURLInputUI as ImageURLInputUI,
-} from '@wordpress/block-editor';
-import { useEffect, useState, useRef } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import { getPath } from '@wordpress/url';
-import { image as icon } from '@wordpress/icons';
-import { createBlock } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { calculatePreferedImageSize } from '@wordpress/block-library/src/image/utils';
-
-/**
- * Module constants
- */
-import {
-	MIN_SIZE,
-	LINK_DESTINATION_MEDIA,
-	LINK_DESTINATION_ATTACHMENT,
-	ALLOWED_MEDIA_TYPES,
-	DEFAULT_SIZE_SLUG,
-} from '@wordpress/block-library/src/image/constants';
-
-export const pickRelevantMediaFiles = ( image ) => {
-	const imageProps = pick( image, [ 'alt', 'id', 'link', 'caption' ] );
-	imageProps.url =
-		get( image, [ 'sizes', 'large', 'url' ] ) ||
-		get( image, [ 'media_details', 'sizes', 'large', 'source_url' ] ) ||
-		image.url;
-	return imageProps;
-};
-
-
-const useImageSize = ( ref, src, dependencies ) => {
-	const [ state, setState ] = useState( {
-		imageWidth: null,
-		imageHeight: null,
-		imageWidthWithinContainer: null,
-		imageHeightWithinContainer: null,
-	} );
-
-	useEffect( () => {
-		if ( ! src ) {
-			return;
-		}
-
-		const { defaultView } = ref.current.ownerDocument;
-		const image = new defaultView.Image();
-
-		function calculateSize() {
-			const { width, height } = calculatePreferedImageSize(
-				image,
-				ref.current
-			);
-
-			setState( {
-				imageWidth: image.width,
-				imageHeight: image.height,
-				imageWidthWithinContainer: width,
-				imageHeightWithinContainer: height,
-			} );
-		}
-
-		defaultView.addEventListener( 'resize', calculateSize );
-		image.addEventListener( 'load', calculateSize );
-		image.src = src;
-
-		return () => {
-			defaultView.removeEventListener( 'resize', calculateSize );
-			image.removeEventListener( 'load', calculateSize );
-		};
-	}, [ src, ...dependencies ] );
-
-	return state;
-}
-
-/**
- * Is the URL a temporary blob URL? A blob URL is one that is used temporarily
- * while the image is being uploaded and will not have an id yet allocated.
- *
- * @param {number=} id The id of the image.
- * @param {string=} url The url of the image.
- *
- * @return {boolean} Is the URL a Blob URL
- */
-const isTemporaryImage = ( id, url ) => ! id && isBlobURL( url );
-
-/**
- * Is the url for the image hosted externally. An externally hosted image has no
- * id and is not a blob url.
- *
- * @param {number=} id  The id of the image.
- * @param {string=} url The url of the image.
- *
- * @return {boolean} Is the url an externally hosted url?
- */
-const isExternalImage = ( id, url ) => url && ! id && ! isBlobURL( url );
-
-function getFilename( url ) {
-	const path = getPath( url );
-	if ( path ) {
-		return last( path.split( '/' ) );
-	}
-}
-
-export function ImageEdit( {
-	attributes: {
-		url = '',
-		alt,
-		caption,
-		align,
-		id,
-		href,
-		rel,
-		linkClass,
-		linkDestination,
-		title,
-		width,
-		height,
-		linkTarget,
-		sizeSlug,
-	},
-	setAttributes,
-	isSelected,
-	className,
-	noticeUI,
-	insertBlocksAfter,
-	noticeOperations,
-	onReplace,
-} ) {
-	const ref = useRef();
-	const { image, maxWidth, isRTL, imageSizes, mediaUpload } = useSelect(
-		( select ) => {
-			const { getMedia } = select( 'core' );
-			const { getSettings } = select( 'core/block-editor' );
-			return {
-				...pick( getSettings(), [
-					'mediaUpload',
-					'imageSizes',
-					'isRTL',
-					'maxWidth',
-				] ),
-				image: id && isSelected ? getMedia( id ) : null,
-			};
-		},
-		[ id, isSelected ]
-	);
-	const { toggleSelection } = useDispatch( 'core/block-editor' );
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const [ captionFocused, setCaptionFocused ] = useState( false );
-	const isWideAligned = includes( [ 'wide', 'full' ], align );
-
-	function onResizeStart() {
-		toggleSelection( false );
-	}
-
-	function onResizeStop() {
-		toggleSelection( true );
-	}
-
-	function onUploadError( message ) {
-		noticeOperations.removeAllNotices();
-		noticeOperations.createErrorNotice( message );
-	}
-
-	function onSelectImage( media ) {
-		if ( ! media || ! media.url ) {
-			setAttributes( {
-				url: undefined,
-				alt: undefined,
-				id: undefined,
-				title: undefined,
-				caption: undefined,
-			} );
-			return;
-		}
-
-		let mediaAttributes = pickRelevantMediaFiles( media );
-
-		// If the current image is temporary but an alt text was meanwhile
-		// written by the user, make sure the text is not overwritten.
-		if ( isTemporaryImage( id, url ) ) {
-			if ( alt ) {
-				mediaAttributes = omit( mediaAttributes, [ 'alt' ] );
-			}
-		}
-
-		// If a caption text was meanwhile written by the user,
-		// make sure the text is not overwritten by empty captions.
-		if ( caption && ! get( mediaAttributes, [ 'caption' ] ) ) {
-			mediaAttributes = omit( mediaAttributes, [ 'caption' ] );
-		}
-
-		let additionalAttributes;
-		// Reset the dimension attributes if changing to a different image.
-		if ( ! media.id || media.id !== id ) {
-			additionalAttributes = {
-				width: undefined,
-				height: undefined,
-				sizeSlug: DEFAULT_SIZE_SLUG,
-			};
-		} else {
-			// Keep the same url when selecting the same file, so "Image Size"
-			// option is not changed.
-			additionalAttributes = { url };
-		}
-
-		// Check if the image is linked to it's media.
-		if ( linkDestination === LINK_DESTINATION_MEDIA ) {
-			// Update the media link.
-			mediaAttributes.href = media.url;
-		}
-
-		// Check if the image is linked to the attachment page.
-		if ( linkDestination === LINK_DESTINATION_ATTACHMENT ) {
-			// Update the media link.
-			mediaAttributes.href = media.link;
-		}
-
-		setAttributes( {
-			...mediaAttributes,
-			...additionalAttributes,
-		} );
-	}
-
-	function onSelectURL( newURL ) {
-		if ( newURL !== url ) {
-			setAttributes( {
-				url: newURL,
-				id: undefined,
-				sizeSlug: DEFAULT_SIZE_SLUG,
-			} );
-		}
-	}
-
-	function onImageError() {
-    console.log('Block Editor - ImageBlock: An image error occurred.')
-		// // Check if there's an embed block that handles this URL.
-		// const embedBlock = createUpgradedEmbedBlock( { attributes: { url } } );
-		// if ( undefined !== embedBlock ) {
-		// 	onReplace( embedBlock );
-		// }
-	}
-
-	function onSetHref( props ) {
-		setAttributes( props );
-	}
-
-	function onSetTitle( value ) {
-		// This is the HTML title attribute, separate from the media object
-		// title.
-		setAttributes( { title: value } );
-	}
-
-	function onFocusCaption() {
-		if ( ! captionFocused ) {
-			setCaptionFocused( true );
-		}
-	}
-
-	function onImageClick() {
-		if ( captionFocused ) {
-			setCaptionFocused( false );
-		}
-	}
-
-	function updateAlt( newAlt ) {
-		setAttributes( { alt: newAlt } );
-	}
-
-	function updateAlignment( nextAlign ) {
-		const extraUpdatedAttributes = isWideAligned
-			? { width: undefined, height: undefined }
-			: {};
-		setAttributes( {
-			...extraUpdatedAttributes,
-			align: nextAlign,
-		} );
-	}
-
-	function updateImage( newSizeSlug ) {
-		const newUrl = get( image, [
-			'media_details',
-			'sizes',
-			newSizeSlug,
-			'source_url',
-		] );
-		if ( ! newUrl ) {
-			return null;
-		}
-
-		setAttributes( {
-			url,
-			width: undefined,
-			height: undefined,
-			sizeSlug: newSizeSlug,
-		} );
-	}
-
-	function getImageSizeOptions() {
-		return map(
-			filter( imageSizes, ( { slug } ) =>
-				get( image, [ 'media_details', 'sizes', slug, 'source_url' ] )
-			),
-			( { name, slug } ) => ( { value: slug, label: name } )
-		);
-	}
-
-	const isTemp = isTemporaryImage( id, url );
-
-	// Upload a temporary image on mount.
-	useEffect( () => {
-		if ( ! isTemp ) {
-			return;
-		}
-
-		const file = getBlobByURL( url );
-
-		if ( file ) {
-			mediaUpload( {
-				filesList: [ file ],
-				onFileChange: ( [ img ] ) => {
-					onSelectImage( img );
-				},
-				allowedTypes: ALLOWED_MEDIA_TYPES,
-				onError: ( message ) => {
-					noticeOperations.createErrorNotice( message );
-				},
-			} );
-		}
-	}, [] );
-
-	// If an image is temporary, revoke the Blob url when it is uploaded (and is
-	// no longer temporary).
-	useEffect( () => {
-		if ( ! isTemp ) {
-			return;
-		}
-
-		return () => {
-			revokeBlobURL( url );
-		};
-	}, [ isTemp ] );
-
-	useEffect( () => {
-		if ( ! isSelected ) {
-			setCaptionFocused( false );
-		}
-	}, [ isSelected ] );
-
-	const isExternal = isExternalImage( id, url );
-	const controls = (
-		<BlockControls>
-			<BlockAlignmentToolbar
-				value={ align }
-				onChange={ updateAlignment }
-			/>
-			{ url && (
-				<MediaReplaceFlow
-					mediaId={ id }
-					mediaURL={ url }
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					accept="image/*"
-					onSelect={ onSelectImage }
-					onSelectURL={ onSelectURL }
-					onError={ onUploadError }
-				/>
-			) }
-			{ url && (
-				<ToolbarGroup>
-					<ImageURLInputUI
-						url={ href || '' }
-						onChangeUrl={ onSetHref }
-						linkDestination={ linkDestination }
-						mediaUrl={ image && image.source_url }
-						mediaLink={ image && image.link }
-						linkTarget={ linkTarget }
-						linkClass={ linkClass }
-						rel={ rel }
-					/>
-				</ToolbarGroup>
-			) }
-		</BlockControls>
-	);
-	const src = isExternal ? url : undefined;
-	const mediaPreview = !! url && (
-		<img
-			alt={ __( 'Edit image' ) }
-			title={ __( 'Edit image' ) }
-			className={ 'edit-image-preview' }
-			src={ url }
-		/>
-	);
-
-	const mediaPlaceholder = (
-		<MediaPlaceholder
-			icon={ <BlockIcon icon={ icon } /> }
-			onSelect={ onSelectImage }
-			onSelectURL={ onSelectURL }
-			notices={ noticeUI }
-			onError={ onUploadError }
-			accept="image/*"
-			allowedTypes={ ALLOWED_MEDIA_TYPES }
-			value={ { id, src } }
-			mediaPreview={ mediaPreview }
-			disableMediaButtons={ url }
-		/>
-	);
-
-	const {
-		imageWidthWithinContainer,
-		imageHeightWithinContainer,
-		imageWidth,
-		imageHeight,
-	} = useImageSize( ref, url, [ align ] );
-
-	if ( ! url ) {
-		return (
-			<>
-				{ controls }
-				<Block.div>{ mediaPlaceholder }</Block.div>
-			</>
-		);
-	}
-
-	const classes = classnames( className, {
-		'is-transient': isBlobURL( url ),
-		'is-resized': !! width || !! height,
-		'is-focused': isSelected,
-		[ `size-${ sizeSlug }` ]: sizeSlug,
-	} );
-
-	const isResizable = false;
-	const imageSizeOptions = getImageSizeOptions();
-
-	const inspectorControls = (
-		<>
-			<InspectorControls>
-				<PanelBody title={ __( 'Image settings' ) }>
-					<TextareaControl
-						label={ __( 'Alt text (alternative text)' ) }
-						value={ alt }
-						onChange={ updateAlt }
-						help={
-							<>
-								<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
-									{ __(
-										'Describe the purpose of the image'
-									) }
-								</ExternalLink>
-								{ __(
-									'Leave empty if the image is purely decorative.'
-								) }
-							</>
-						}
-					/>
-				</PanelBody>
-			</InspectorControls>
-			<InspectorAdvancedControls>
-				<TextControl
-					label={ __( 'Title attribute' ) }
-					value={ title || '' }
-					onChange={ onSetTitle }
-					help={
-						<>
-							{ __(
-								'Describe the role of this image on the page.'
-							) }
-							<ExternalLink href="https://www.w3.org/TR/html52/dom.html#the-title-attribute">
-								{ __(
-									'(Note: many devices and browsers do not display this text.)'
-								) }
-							</ExternalLink>
-						</>
-					}
-				/>
-			</InspectorAdvancedControls>
-		</>
-	);
-
-	const filename = getFilename( url );
-	let defaultedAlt;
-
-	if ( alt ) {
-		defaultedAlt = alt;
-	} else if ( filename ) {
-		defaultedAlt = sprintf(
-			/* translators: %s: file name */
-			__( 'This image has an empty alt attribute; its file name is %s' ),
-			filename
-		);
-	} else {
-		defaultedAlt = __( 'This image has an empty alt attribute' );
-	}
-
-	let img = (
-		// Disable reason: Image itself is not meant to be interactive, but
-		// should direct focus to block.
-		/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
-		<>
-			{ inspectorControls }
-			<img
-				src={ url }
-				alt={ defaultedAlt }
-				onClick={ onImageClick }
-				onError={ () => onImageError() }
-			/>
-			{ isBlobURL( url ) && <Spinner /> }
-		</>
-		/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
-	);
-
-	if ( ! isResizable || ! imageWidthWithinContainer ) {
-		img = <div style={ { width, height } }>{ img }</div>;
-	} else {
-		const currentWidth = width || imageWidthWithinContainer;
-		const currentHeight = height || imageHeightWithinContainer;
-
-		const ratio = imageWidth / imageHeight;
-		const minWidth = imageWidth < imageHeight ? MIN_SIZE : MIN_SIZE * ratio;
-		const minHeight =
-			imageHeight < imageWidth ? MIN_SIZE : MIN_SIZE / ratio;
-
-		// With the current implementation of ResizableBox, an image needs an
-		// explicit pixel value for the max-width. In absence of being able to
-		// set the content-width, this max-width is currently dictated by the
-		// vanilla editor style. The following variable adds a buffer to this
-		// vanilla style, so 3rd party themes have some wiggleroom. This does,
-		// in most cases, allow you to scale the image beyond the width of the
-		// main column, though not infinitely.
-		// @todo It would be good to revisit this once a content-width variable
-		// becomes available.
-		const maxWidthBuffer = maxWidth * 2.5;
-
-		let showRightHandle = false;
-		let showLeftHandle = false;
-
-		/* eslint-disable no-lonely-if */
-		// See https://github.com/WordPress/gutenberg/issues/7584.
-		if ( align === 'center' ) {
-			// When the image is centered, show both handles.
-			showRightHandle = true;
-			showLeftHandle = true;
-		} else if ( isRTL ) {
-			// In RTL mode the image is on the right by default.
-			// Show the right handle and hide the left handle only when it is
-			// aligned left. Otherwise always show the left handle.
-			if ( align === 'left' ) {
-				showRightHandle = true;
-			} else {
-				showLeftHandle = true;
-			}
-		} else {
-			// Show the left handle and hide the right handle only when the
-			// image is aligned right. Otherwise always show the right handle.
-			if ( align === 'right' ) {
-				showLeftHandle = true;
-			} else {
-				showRightHandle = true;
-			}
-		}
-		/* eslint-enable no-lonely-if */
-
-		img = (
-			<ResizableBox
-				size={ { width, height } }
-				showHandle={ isSelected }
-				minWidth={ minWidth }
-				maxWidth={ maxWidthBuffer }
-				minHeight={ minHeight }
-				maxHeight={ maxWidthBuffer / ratio }
-				lockAspectRatio
-				enable={ {
-					top: false,
-					right: showRightHandle,
-					bottom: true,
-					left: showLeftHandle,
-				} }
-				onResizeStart={ onResizeStart }
-				onResizeStop={ ( event, direction, elt, delta ) => {
-					onResizeStop();
-					setAttributes( {
-						width: parseInt( currentWidth + delta.width, 10 ),
-						height: parseInt( currentHeight + delta.height, 10 ),
-					} );
-				} }
-			>
-				{ img }
-			</ResizableBox>
-		);
-	}
-
-	return (
-		<>
-			{ controls }
-			<Block.figure ref={ ref } className={ classes }>
-				{ img }
-				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
-					<RichText
-						tagName="figcaption"
-						placeholder={ __( 'Write caption…' ) }
-						value={ caption }
-						unstableOnFocus={ onFocusCaption }
-						onChange={ ( value ) =>
-							setAttributes( { caption: value } )
-						}
-						isSelected={ captionFocused }
-						inlineToolbar
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter( createBlock( 'core/paragraph' ) )
-						}
-					/>
-				) }
-				{ mediaPlaceholder }
-			</Block.figure>
-		</>
-	);
-}
-
-export default withNotices( ImageEdit );