block_editor 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 1fda7547fb328d71e8b9f4e43468bd68e2ca8acdc75056560bc8715cf7933a65
+  data.tar.gz: 0c9fd03776fd0db0e25d9270f52657331301597bbc4a1556ccf03ab7e6a656cd
+SHA512:
+  metadata.gz: 4c9429b1a4fc27208fdd543a96973268650986cfd3a15a867b8917152e0f25bfa21aecd6755932c86c21a8ecd432920f6e9778fdd06f97fa550f9cdce8edfcdd
+  data.tar.gz: 63a53bf700739464fc6d00e5b75a1cee393199e0d7ae8a5c215719acf50d42f65b2df201db551d2c0dcee21bdcdd05c208f1c58154dee18e761af413dc8f8f61

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2021 Patrick Lindsay
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,147 @@
+# Block Editor for Ruby on Rails
+This editor uses packages from the [Wordpress Gutenberg project](https://github.com/WordPress/gutenberg) to build a standalone block editor for Rails. This editor has been extracted from [Integral CMS](https://github.com/yamasolutions/integral) where it was built following the [Wordpress custom block editor tutorial](https://developer.wordpress.org/block-editor/how-to-guides/platform/custom-block-editor/).
+
+More information;
+
+* [Gutenberg Demo](https://wordpress.org/gutenberg/)
+* [Gutenberg Block Editor Developer Documentation](https://developer.wordpress.org/block-editor/)
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'block_editor'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install block_editor
+```
+
+## Usage
+
+* Grab the required migrations and migrate;
+```
+rails block_editor:install:migrations
+rails db:migrate
+```
+* Add `include BlockEditor::Listable` to any model you wish to associate the block editor with, i.e.
+
+```
+class Post < ApplicationRecord
+  include BlockEditor::Listable
+end
+```
+* Add the block editor to your model form;
+```
+  <%= form.fields_for :active_block_list do |block_list| %>
+    <%= BlockEditor::Instance.render(block_list) %>
+  <% end %>
+```
+* Add the block editor Javascript and styles within your `HEAD` tag
+```
+  <%= javascript_pack_tag 'block_editor/application', 'data-turbolinks-track': 'reload', webpacker: 'BlockEditor' %>
+  <%= stylesheet_pack_tag 'block_editor/application', 'data-turbolinks-track': 'reload', webpacker: 'BlockEditor' %>
+```
+* Boom! You have a Block Editor linked to your model
+
+### Strong Parameters
+Remember to permit the block list attributes if you're using Strong Parameters (you should be), i.e;
+```
+  # Only allow a list of trusted parameters through.
+  def post_params
+    params.require(:post).permit(:title, active_block_list_attributes: [ :id, :content ])
+  end
+```
+
+Note: You may also need to specifically set the listable attribute within your controller before saving, i.e. -
+```
+@post.active_block_list.listable = @post
+```
+
+### Styling
+
+Add the frontend stylesheet where you are displaying the user created block lists;
+```
+<%= stylesheet_link_tag 'block_editor/backend', media: 'all', 'data-turbolinks-track': 'reload' %>
+```
+
+Add the backend stylesheet where you are rendering the block editor, for example admin dashboard;
+```
+<%= stylesheet_link_tag 'block_editor/backend', media: 'all', 'data-turbolinks-track': 'reload' %>
+```
+
+The below files should be overridden within your application in order to style your blocks;
+* `app/assets/stylesheets/block_editor/frontend/blocks.scss` - Any styles that should be displayed within the frontend and backend
+* `app/assets/stylesheets/block_editor/backend/blocks.scss` - Any styles that should _only_ be displayed within the block editor itself, i.e when creating or editing the blocks
+
+
+### Turbolinks
+Currently Block Editor is not compatible with Turbolinks as history is only being reset on full page loads. To disable Turbolinks per page add the following in your layout view file within your `<HEAD>`;;
+```
+<meta name="turbolinks-visit-control" content="reload">
+```
+
+### Adding/Removing blocks
+*Currently there isn't a way of adding or removing blocks without forking the gem.*
+
+* Fork the gem
+* Edit `app/javascript/block_editor/blocks/index.js` where all blocks are registered
+
+
+### Dynamic blocks
+Dynamic blocks are useful for non-static content such as a recent posts block or more complex blocks like a contact form block.
+
+*Currently the gem needs to be forked in order to create a dynamic block*
+
+A dynamic block is made up of 4 components;
+* Ruby class to handle frontend rendering
+* Partial to be rendered on the frontend
+* Frontend and backend styling
+* JS file to manage how the block behaves within the block editor itself (This part currently is not possible without forking the gem) [Read More](https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/writing-your-first-block-type)
+
+1. Create block class which can be as simple as;
+```
+class ContactForm < BlockEditor::Base
+  def self.name
+    'block-editor/contact-form'
+  end
+end
+```
+2. Add block class to ```BlockEditor.dynamic_blocks``` config;
+```
+// application.rb
+
+BlockEditor.dynamic_blocks = [ContactForm]
+```
+3. Create the view partial you want to be rendered as the block;
+```
+// app/views/block_editor/blocks/block-editor/contact-form/_block.html.erb
+
+My Recent Posts
+<%= @posts %>
+```
+4. Add any required styling to the frontend and backend stylesheets;
+
+```
+app/assets/stylesheets/block_editor/backend/blocks.scss
+```
+
+```
+app/assets/stylesheets/block_editor/frontend/blocks.scss
+```
+5. Add the block to the block editor
+* Fork the gem
+* Create the block JS file i.e. `app/javascript/block_editor/blocks/contact_form/index.js`
+* Edit `app/javascript/block_editor/blocks/index.js` to register the block
+
+## Contributing
+Contribution are very welcome! Currently the biggest issue that needs to be solved is extensibility. There is no way to modify and configure the editor behaviour (such as blocks to display, block output etc) without forking the engine.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,18 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"
+
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test

data/app/assets/config/block_editor_manifest.js

@@ -0,0 +1 @@
+//= link_directory ../stylesheets/block_editor .css

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

@@ -0,0 +1,4 @@
+.editor-styles-wrapper {
+  @import "block_editor/frontend/blocks";
+  @import "block_editor/backend/blocks";
+}

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

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

data/app/controllers/block_editor/application_controller.rb

@@ -0,0 +1,4 @@
+module BlockEditor
+  class ApplicationController < ActionController::Base
+  end
+end

data/app/helpers/block_editor/application_helper.rb

@@ -0,0 +1,11 @@
+require "webpacker/helper"
+
+module BlockEditor
+  module ApplicationHelper
+    include ::Webpacker::Helper
+
+    def current_webpacker_instance
+      BlockEditor.webpacker
+    end
+  end
+end

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

@@ -0,0 +1,240 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useCallback, useState } from '@wordpress/element';
+import {
+	KeyboardShortcuts,
+	PanelBody,
+	RangeControl,
+	TextControl,
+	ToggleControl,
+	ToolbarButton,
+	ToolbarGroup,
+	Popover,
+} from '@wordpress/components';
+import {
+	BlockControls,
+	InspectorControls,
+	RichText,
+	__experimentalBlock as Block,
+	__experimentalLinkControl as LinkControl,
+} from '@wordpress/block-editor';
+import { rawShortcut, displayShortcut } from '@wordpress/keycodes';
+import { link } from '@wordpress/icons';
+import { createBlock } from '@wordpress/blocks';
+
+// #<{(|*
+//  * Internal dependencies
+//  |)}>#
+// import ColorEdit from './color-edit';
+// import getColorAndStyleProps from './color-props';
+
+const NEW_TAB_REL = 'noreferrer noopener';
+const MIN_BORDER_RADIUS_VALUE = 0;
+const MAX_BORDER_RADIUS_VALUE = 50;
+const INITIAL_BORDER_RADIUS_POSITION = 5;
+
+function BorderPanel( { borderRadius = '', setAttributes } ) {
+	const setBorderRadius = useCallback(
+		( newBorderRadius ) => {
+			setAttributes( { borderRadius: newBorderRadius } );
+		},
+		[ setAttributes ]
+	);
+	return (
+		<PanelBody title={ __( 'Border settings' ) }>
+			<RangeControl
+				value={ borderRadius }
+				label={ __( 'Border radius' ) }
+				min={ MIN_BORDER_RADIUS_VALUE }
+				max={ MAX_BORDER_RADIUS_VALUE }
+				initialPosition={ INITIAL_BORDER_RADIUS_POSITION }
+				allowReset
+				onChange={ setBorderRadius }
+			/>
+		</PanelBody>
+	);
+}
+
+function URLPicker( {
+	isSelected,
+	url,
+	setAttributes,
+	opensInNewTab,
+	onToggleOpenInNewTab,
+} ) {
+	const [ isURLPickerOpen, setIsURLPickerOpen ] = useState( false );
+	const openLinkControl = () => {
+		setIsURLPickerOpen( true );
+
+		// prevents default behaviour for event
+		return false;
+	};
+	const linkControl = isURLPickerOpen && (
+		<Popover
+			position="bottom center"
+			onClose={ () => setIsURLPickerOpen( false ) }
+		>
+			<LinkControl
+				className="wp-block-navigation-link__inline-link-input"
+				value={ { url, opensInNewTab } }
+				onChange={ ( {
+					url: newURL = '',
+					opensInNewTab: newOpensInNewTab,
+				} ) => {
+					setAttributes( { url: newURL } );
+
+					if ( opensInNewTab !== newOpensInNewTab ) {
+						onToggleOpenInNewTab( newOpensInNewTab );
+					}
+				} }
+			/>
+		</Popover>
+	);
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarButton
+						name="link"
+						icon={ link }
+						title={ __( 'Link' ) }
+						shortcut={ displayShortcut.primary( 'k' ) }
+						onClick={ openLinkControl }
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+			{ isSelected && (
+				<KeyboardShortcuts
+					bindGlobal
+					shortcuts={ {
+						[ rawShortcut.primary( 'k' ) ]: openLinkControl,
+					} }
+				/>
+			) }
+			{ linkControl }
+		</>
+	);
+}
+
+function ButtonEdit( props ) {
+	const {
+		attributes,
+		setAttributes,
+		className,
+		isSelected,
+		onReplace,
+		mergeBlocks,
+	} = props;
+	const {
+		borderRadius,
+		linkTarget,
+		placeholder,
+		rel,
+		text,
+		url,
+	} = attributes;
+	const onSetLinkRel = useCallback(
+		( value ) => {
+			setAttributes( { rel: value } );
+		},
+		[ setAttributes ]
+	);
+
+	const onToggleOpenInNewTab = useCallback(
+		( value ) => {
+			const newLinkTarget = value ? '_blank' : undefined;
+
+			let updatedRel = rel;
+			if ( newLinkTarget && ! rel ) {
+				updatedRel = NEW_TAB_REL;
+			} else if ( ! newLinkTarget && rel === NEW_TAB_REL ) {
+				updatedRel = undefined;
+			}
+
+			setAttributes( {
+				linkTarget: newLinkTarget,
+				rel: updatedRel,
+			} );
+		},
+		[ rel, setAttributes ]
+	);
+
+  // const colorProps = getColorAndStyleProps( attributes );
+
+	return (
+		<>
+			<Block.div>
+				<RichText
+					placeholder={ placeholder || __( 'Add text…' ) }
+					value={ text }
+					onChange={ ( value ) => setAttributes( { text: value } ) }
+					withoutInteractiveFormatting
+					className={ classnames(
+						className,
+						'wp-block-button__link',
+						// colorProps.className,
+						// {
+						// 	'no-border-radius': borderRadius === 0,
+						// }
+					) }
+					onSplit={ ( value ) =>
+						createBlock( 'core/button', {
+							...attributes,
+							text: value,
+						} )
+					}
+					onReplace={ onReplace }
+					onMerge={ mergeBlocks }
+					identifier="text"
+				/>
+			</Block.div>
+			<URLPicker
+				url={ url }
+				setAttributes={ setAttributes }
+				isSelected={ isSelected }
+				opensInNewTab={ linkTarget === '_blank' }
+				onToggleOpenInNewTab={ onToggleOpenInNewTab }
+			/>
+			<InspectorControls>
+				<PanelBody title={ 'Additional styles' }>
+					<ToggleControl
+						label={ 'Hollow' }
+            onChange={ content => setAttributes({ hasHollowStyle: content }) }
+            checked={ attributes.hasHollowStyle }
+					/>
+					<ToggleControl
+						label={ 'Large' }
+            onChange={ content => setAttributes({ hasLargeStyle: content }) }
+            checked={ attributes.hasLargeStyle }
+					/>
+				</PanelBody>
+
+				<PanelBody title={ __( 'Link settings' ) }>
+					<ToggleControl
+						label={ __( 'Open in new tab' ) }
+						onChange={ onToggleOpenInNewTab }
+						checked={ linkTarget === '_blank' }
+					/>
+					<TextControl
+						label={ __( 'Link rel' ) }
+						value={ rel || '' }
+						onChange={ onSetLinkRel }
+					/>
+				</PanelBody>
+			</InspectorControls>
+		</>
+	);
+}
+
+export default ButtonEdit;