block_editor 0.1.3 → 1.0.0

data/app/javascript/block_editor/blocks/be-contact-form/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { widget as icon } from '@wordpress/icons';
+
+const name = 'be/contact-form';
+
+export { name };
+
+export const settings = {
+	title: 'Contact Form',
+	description:  'Allow users to get in touch using a contact form.',
+  icon,
+  category: 'widgets',
+  edit({attributes, className, setAttributes, isSelected}) {
+    return ([
+      <div className={ className }>
+        <p>Contact Form</p>
+        <div className='be-contact-form-outline'>
+        </div>
+      </div>
+    ]);
+  }
+};

data/app/javascript/block_editor/blocks/be-cover/index.js

@@ -0,0 +1,135 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import {
+	InnerBlocks
+} from '@wordpress/block-editor';
+import { registerBlockStyle } from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
+import { rawHandler } from '@wordpress/blocks';
+
+import { TextControl, PanelBody, ToggleControl, Button } from '@wordpress/components';
+import { InspectorControls, RichText, MediaUpload, PlainText } from '@wordpress/block-editor'
+import { cover as icon } from '@wordpress/icons';
+
+const BLOCKS_TEMPLATE = [
+    [ 'core/heading', { content: 'Example Cover Title' } ],
+    [ 'core/paragraph', { content: 'Break up content and draw attention to something using a cover block' } ]
+];
+const ALLOWED_BLOCKS = [ 'core/buttons', 'core/heading', 'core/paragraph', 'core/list' ];
+const name = 'be/cover';
+
+export { name };
+
+export const settings = {
+	title: 'Cover',
+	description:  'Add an image with a text overlay - great for breaking up content.',
+  icon,
+  category: 'formatting',
+  example: {
+    innerBlocks: [
+      {
+        name: 'core/heading',
+        attributes: {
+          content: 'Example Cover Title'
+        }
+      },
+      {
+        name: 'core/paragraph',
+        attributes: {
+          content: 'Break up content and draw attention to something using a cover block'
+        }
+      },
+      {
+        name: 'core/button',
+        attributes: {
+          content: 'Example Call To Action'
+        }
+      }
+    ]
+  },
+  attributes: {
+    imageAlt: {
+      attribute: 'alt',
+      selector: '.wp-block-be-cover-image'
+    },
+    imageUrl: {
+      attribute: 'src',
+      selector: '.wp-block-be-cover-image'
+    }
+  },
+  edit({attributes, className, setAttributes, isSelected}) {
+    const getImageButton = (openEvent) => {
+      if(attributes.imageUrl) {
+        return (
+          <>
+            { isSelected &&
+              <Button
+                onClick={ openEvent }
+                className="button"
+                >
+                Edit image
+              </Button>
+            }
+            <img
+              src={ attributes.imageUrl }
+              className="wp-block-be-cover-image"
+            />
+          </>
+        );
+      }
+      else {
+        return (
+          <>
+          { isSelected &&
+            <Button
+              onClick={ openEvent }
+              className="button button-large"
+            >
+            Pick an image
+            </Button>
+          }
+          </>
+        );
+      }
+    };
+    return (
+      <div className={ className }>
+        <MediaUpload
+          onSelect={ media => { setAttributes({ imageAlt: media.alt, imageUrl: media.url }); } }
+          type="image"
+          value={ attributes.imageID }
+          render={ ({ open }) => getImageButton(open) }
+        />
+        <div className='wp-block-be-cover-content'>
+          <InnerBlocks
+            allowedBlocks={ ALLOWED_BLOCKS }
+            template={ BLOCKS_TEMPLATE }
+          />
+        </div>
+      </div>
+    );
+  },
+  save({ attributes }) {
+    const cardImage = (src, alt) => {
+      if(!src) return null;
+
+      return (
+        <img
+          className="wp-block-be-cover-image"
+          src={ src }
+          alt={ alt }
+        />
+      );
+    }
+
+    return (
+      <div>
+        { cardImage(attributes.imageUrl, attributes.imageAlt) }
+        <div className='wp-block-be-cover-content'>
+          <InnerBlocks.Content />
+        </div>
+      </div>
+    );
+  },
+};

data/app/javascript/block_editor/blocks/block/edit-panel/index.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useInstanceId, usePrevious } from '@wordpress/compose';
+import { useEffect, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+
+/**
+ * ReusableBlockEditPanel props.
+ *
+ * @typedef WPReusableBlockEditPanelProps
+ *
+ * @property {boolean}                 isEditDisabled Is editing the reusable
+ *                                                    block disabled.
+ * @property {boolean}                 isEditing      Is the reusable block
+ *                                                    being edited.
+ * @property {boolean}                 isSaving       Is the reusable block
+ *                                                    being saved.
+ * @property {()=>void}                onCancel       Callback to run when
+ *                                                    editing is canceled.
+ * @property {(newTitle:string)=>void} onChangeTitle  Callback to run when the
+ *                                                    title input value is
+ *                                                    changed.
+ * @property {()=>void}                onEdit         Callback to run when
+ *                                                    editing begins.
+ * @property {()=>void}                onSave         Callback to run when
+ *                                                    saving.
+ * @property {string}                  title          Title of the reusable
+ *                                                    block.
+ */
+
+/**
+ * Panel for enabling the editing and saving of a reusable block.
+ *
+ * @param {WPReusableBlockEditPanelProps} props Component props.
+ *
+ * @return {WPComponent} The panel.
+ */
+export default function ReusableBlockEditPanel( {
+	isEditDisabled,
+	isEditing,
+	isSaving,
+	onChangeTitle,
+	onEdit,
+	onSave,
+	title,
+} ) {
+	const instanceId = useInstanceId( ReusableBlockEditPanel );
+	const titleField = useRef();
+	const editButton = useRef();
+	const wasEditing = usePrevious( isEditing );
+	const wasSaving = usePrevious( isSaving );
+
+	// Select the title input when the form opens.
+	useEffect( () => {
+		if ( ! wasEditing && isEditing ) {
+			titleField.current.select();
+		}
+	}, [ isEditing ] );
+
+	// Move focus back to the Edit button after pressing the Escape key or Save.
+	useEffect( () => {
+		if ( ( wasEditing || wasSaving ) && ! isEditing && ! isSaving ) {
+			editButton.current.focus();
+		}
+	}, [ isEditing, isSaving ] );
+
+	function handleFormSubmit( event ) {
+		event.preventDefault();
+		onSave();
+	}
+
+	function handleTitleChange( event ) {
+		onChangeTitle( event.target.value );
+	}
+
+	return (
+		<>
+			{ ! isEditing && ! isSaving && (
+				<div className="reusable-block-edit-panel">
+					<b className="reusable-block-edit-panel__info">{ title }</b>
+					<Button
+						ref={ editButton }
+						isSecondary
+						className="reusable-block-edit-panel__button"
+						disabled={ isEditDisabled }
+						onClick={ onEdit }
+					>
+						{ __( 'Edit' ) }
+					</Button>
+				</div>
+			) }
+			{ ( isEditing || isSaving ) && (
+				<form
+					className="reusable-block-edit-panel"
+					onSubmit={ handleFormSubmit }
+				>
+					<label
+						htmlFor={ `reusable-block-edit-panel__title-${ instanceId }` }
+						className="reusable-block-edit-panel__label"
+					>
+						{ __( 'Name:' ) }
+					</label>
+					<input
+						ref={ titleField }
+						type="text"
+						disabled={ isSaving }
+						className="reusable-block-edit-panel__title"
+						value={ title }
+						onChange={ handleTitleChange }
+						id={ `reusable-block-edit-panel__title-${ instanceId }` }
+					/>
+					<Button
+						type="submit"
+						isSecondary
+						isBusy={ isSaving }
+						disabled={ ! title || isSaving }
+						className="reusable-block-edit-panel__button"
+					>
+						{ __( 'Save' ) }
+					</Button>
+				</form>
+			) }
+		</>
+	);
+}

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

@@ -0,0 +1,163 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEntityBlockEditor } from '@wordpress/core-data';
+import { useCallback } from '@wordpress/element';
+import {
+	Placeholder,
+	Spinner,
+	Disabled,
+	ToolbarGroup,
+	ToolbarButton,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import {
+	BlockEditorProvider,
+	WritingFlow,
+	BlockList,
+	BlockControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import ReusableBlockEditPanel from './edit-panel';
+
+export default function ReusableBlockEdit( {
+	attributes: { ref },
+	clientId,
+	isSelected,
+} ) {
+	const recordArgs = [ 'postType', 'wp_block', ref ];
+
+	const {
+		reusableBlock,
+		hasResolved,
+		isEditing,
+		isSaving,
+		canUserUpdate,
+		settings,
+	} = useSelect(
+		( select ) => ( {
+			reusableBlock: select( 'core' ).getEditedEntityRecord(
+				...recordArgs
+			),
+			hasResolved: select( 'core' ).hasFinishedResolution(
+				'getEditedEntityRecord',
+				recordArgs
+			),
+			isSaving: select( 'core' ).isSavingEntityRecord( ...recordArgs ),
+			canUserUpdate: select( 'core' ).canUser( 'update', 'blocks', ref ),
+			isEditing: select(
+				'core/reusable-blocks'
+			).__experimentalIsEditingReusableBlock( clientId ),
+			settings: select( 'core/block-editor' ).getSettings(),
+		} ),
+		[ ref, clientId ]
+	);
+
+	const { editEntityRecord, saveEditedEntityRecord } = useDispatch( 'core' );
+	const { __experimentalSetEditingReusableBlock } = useDispatch(
+		'core/reusable-blocks'
+	);
+	const setIsEditing = useCallback(
+		( value ) => {
+			__experimentalSetEditingReusableBlock( clientId, value );
+		},
+		[ clientId ]
+	);
+
+	const {
+		__experimentalConvertBlockToStatic: convertBlockToStatic,
+	} = useDispatch( 'core/reusable-blocks' );
+
+	const { createSuccessNotice, createErrorNotice } = useDispatch(
+		'core/notices'
+	);
+	const save = useCallback( async function () {
+		try {
+			await saveEditedEntityRecord( ...recordArgs );
+			createSuccessNotice( __( 'Block updated.' ), {
+				type: 'snackbar',
+			} );
+		} catch ( error ) {
+			createErrorNotice( error.message, {
+				type: 'snackbar',
+			} );
+		}
+	}, recordArgs );
+
+	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
+		'postType',
+		'wp_block',
+		{ id: ref }
+	);
+
+	const blockProps = useBlockProps();
+
+	if ( ! hasResolved ) {
+		return (
+			<div { ...blockProps }>
+				<Placeholder>
+					<Spinner />
+				</Placeholder>
+			</div>
+		);
+	}
+
+	if ( ! reusableBlock ) {
+		return (
+			<div { ...blockProps }>
+				<Placeholder>
+					{ __( 'Block has been deleted or is unavailable.' ) }
+				</Placeholder>
+			</div>
+		);
+	}
+
+	let element = (
+		<BlockEditorProvider
+			value={ blocks }
+			onInput={ onInput }
+			onChange={ onChange }
+			settings={ settings }
+		>
+			<WritingFlow>
+				<BlockList />
+			</WritingFlow>
+		</BlockEditorProvider>
+	);
+
+	if ( ! isEditing ) {
+		element = <Disabled>{ element }</Disabled>;
+	}
+
+	return (
+		<div { ...blockProps }>
+			<div className="block-library-block__reusable-block-container">
+				{ ( isSelected || isEditing ) && (
+					<ReusableBlockEditPanel
+						isEditing={ isEditing }
+						title={ reusableBlock.title }
+						isSaving={ isSaving }
+						isEditDisabled={ ! canUserUpdate }
+						onEdit={ () => setIsEditing( true ) }
+						onChangeTitle={ ( title ) =>
+							editEntityRecord( ...recordArgs, { title } )
+						}
+						onSave={ () => {
+							save();
+							setIsEditing( false );
+						} }
+					/>
+				) }
+				{ element }
+			</div>
+		</div>
+	);
+}