first commit

2023-11-30 13:20:54 -05:00
commit e9e5c0546c
5833 changed files with 1801865 additions and 0 deletions
@@ -0,0 +1,233 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * WordPress dependencies
+ */
+const {
+	jQuery: $,
+	canvasLayouts,
+} = window;
+
+const {
+	__,
+} = wp.i18n;
+
+const {
+	registerBlockType,
+	createBlock,
+	parse,
+} = wp.blocks;
+
+const {
+	Component,
+} = wp.element;
+
+const {
+	Modal,
+	SelectControl,
+} = wp.components;
+
+const {
+	compose,
+} = wp.compose;
+
+const {
+	withDispatch,
+} = wp.data;
+
+/**
+ * Add layouts button to Gutenberg toolbar
+ */
+$(document).on('DOMContentLoaded', () => {
+
+	 wp.data.subscribe(function () {
+		setTimeout(function () {
+			if (!document.getElementById('canvas-toolbar-import-layout')) {
+				const $toolbar = $('.edit-post-header-toolbar');
+
+				if (Object.keys(canvasLayouts.layouts).length && $toolbar.length) {
+					$toolbar.append(`
+						<div>
+							<div id="canvas-toolbar-import-layout" class="canvas-toolbar-import-layout">
+								<button class="components-button components-icon-button" aria-label="${__('Import Layout', 'canvas')}">
+									<svg aria-hidden="true" role="img" focusable="false" class="dashicon dashicons-insert" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M10 1c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 16c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zm1-11H9v3H6v2h3v3h2v-3h3V9h-3V6z"></path></svg>
+									${__('Import Layout', 'canvas')}
+								</button>
+							</div>
+						</div>
+					` );
+				}
+			}
+		}, 1)
+	});
+
+	// Insert `canvas/layout` block.
+	$(document).on('click', '.canvas-toolbar-import-layout button', (e) => {
+		e.preventDefault();
+
+		const {
+			insertBlocks,
+		} = wp.data.dispatch('core/block-editor');
+
+		insertBlocks(createBlock('canvas/layouts'));
+	});
+});
+
+/**
+ * Component
+ */
+class LayoutsBlockEdit extends Component {
+	constructor() {
+		super(...arguments);
+
+		this.state = {
+			category: '',
+		};
+
+		this.getLayouts = this.getLayouts.bind(this);
+	}
+
+	getLayouts() {
+		const {
+			category,
+		} = this.state;
+
+		const result = {};
+
+		Object.keys(canvasLayouts.layouts).forEach((k) => {
+			const layout = canvasLayouts.layouts[k];
+
+			if (category) {
+				if (layout.category && layout.category.indexOf(category) > -1) {
+					result[k] = layout;
+				}
+			} else {
+				result[k] = layout;
+			}
+		})
+
+		return result;
+	}
+
+	render() {
+		const {
+			insertLayout,
+			closeModal,
+		} = this.props;
+
+		const categories = [
+			{
+				label: __('--- Select Category ---', 'canvas'),
+				value: '',
+			},
+			...Object.keys(canvasLayouts.categories).map((name) => {
+				return {
+					label: canvasLayouts.categories[name],
+					value: name,
+				};
+			}),
+		];
+
+		const layouts = this.getLayouts();
+
+		return (
+			<Modal
+				position="top"
+				title={__('Layouts', 'canvas')}
+				onRequestClose={() => {
+					closeModal();
+				}}
+				shouldCloseOnClickOutside={false}
+				className="cnvs-extension-layouts-modal"
+			>
+				<div className="cnvs-extension-layouts-content">
+					{categories.length > 1 ? (
+						<div className="cnvs-extension-layouts-categories">
+							<SelectControl
+								options={categories}
+								onChange={(val) => {
+									this.setState({
+										category: val,
+									});
+								}}
+							/>
+						</div>
+					) : ''}
+					{Object.keys(layouts).length ? (
+						<div className="cnvs-extension-layouts-count">
+							{ __('Layouts:', 'canvas')}
+							&nbsp;
+							<strong>{Object.keys(layouts).length}</strong>
+						</div>
+					) : ''}
+					{Object.keys(layouts).length ? (
+						<div className="cnvs-extension-layouts-list">
+							{ Object.keys(layouts).map((k) => {
+								return (
+									<button
+										key={k}
+										onClick={() => {
+											insertLayout(layouts[k].content);
+
+											closeModal();
+										}}
+									>
+										{ layouts[k].thumbnail ? (
+											<img src={layouts[k].thumbnail} />
+										) : ''}
+										<label>{layouts[k].title}</label>
+									</button>
+								);
+							})}
+						</div>
+					) : (
+							<p>{__('No layouts found.', 'canvas')}</p>
+						)}
+				</div>
+			</Modal>
+		);
+	}
+}
+
+const LayoutsBlockEditWithSelect = compose(
+	withDispatch((dispatch, ownProps) => {
+		const { clientId } = ownProps;
+		const {
+			replaceBlocks,
+			removeBlock,
+		} = dispatch('core/block-editor');
+
+		return {
+			closeModal() {
+				removeBlock(clientId);
+			},
+			insertLayout(content) {
+				const parsedBlocks = parse(content);
+				replaceBlocks(clientId, parsedBlocks);
+			},
+		};
+	}),
+)(LayoutsBlockEdit);
+
+/**
+ * Register block.
+ */
+registerBlockType('canvas/layouts', {
+	title: __('Canvas Layouts', 'canvas'),
+	description: __('Add a pre-configured layouts.', 'canvas'),
+	category: 'common',
+	supports: {
+		customClassName: false,
+		html: false,
+		inserter: false,
+		multiple: false,
+		reusable: false,
+	},
+	edit: LayoutsBlockEditWithSelect,
+	save: function () {
+		return null
+	}
+});