block_editor 0.1.3 → 1.0.0

data/app/assets/stylesheets/block_editor/blocks/columns/_frontend.scss

@@ -0,0 +1,14 @@
+.wp-block-columns {
+  --#{$variable-prefix}gutter-x: #{$grid-gutter-width};
+  --#{$variable-prefix}gutter-y: 0;
+  display: flex;
+  margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
+  margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
+  margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
+
+  &:not(.is-style-no-stack) {
+    @include media-breakpoint-down(lg) {
+      display: block;
+    }
+  }
+}

data/app/assets/stylesheets/block_editor/blocks/image/_backend.scss

@@ -0,0 +1,10 @@
+.block-editor-block-list__block[data-type="core/image"] {
+  .block-editor-media-placeholder__url-input-container,
+  .components-form-file-upload {
+    display: none;
+  }
+}
+.components-dropdown-menu__toggle[aria-label="Change alignment"] {
+  display: none !important;
+}
+

data/app/assets/stylesheets/block_editor/blocks/image/_frontend.scss

@@ -0,0 +1,21 @@
+.wp-block-image {
+  margin-bottom: $paragraph-margin-bottom;
+
+  img {
+    max-width: 100%;
+  }
+  figcaption {
+    margin-top: 5px;
+    font-size: 0.9rem;
+  }
+  &.is-style-padded {
+    max-width: 75%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  &.is-style-rounded {
+    img {
+      border-radius: $border-radius;
+    }
+  }
+}

data/app/assets/stylesheets/block_editor/blocks/seperator/_frontend.scss

@@ -0,0 +1,19 @@
+.wp-block-separator {
+  &.is-style-dots {
+    background: none !important;
+    border: none;
+    text-align: center;
+    max-width: none;
+    line-height: 1;
+    height: 1.2*$spacer !important;
+    opacity: 1;
+    &:before{
+      content: "\00b7 \00b7 \00b7";
+      font-size: 1.2*$spacer;
+      letter-spacing: 2em;
+      padding-left: 2em;
+      font-family: serif;
+      color: $black;
+    }
+  }
+}

data/app/assets/stylesheets/block_editor/blocks/table/_frontend.scss

@@ -0,0 +1,67 @@
+.wp-block-table{
+  margin-bottom: $paragraph-margin-bottom;
+  overflow-x: auto;
+  table {
+    --#{$variable-prefix}table-bg: #{$table-bg};
+    --#{$variable-prefix}table-striped-color: #{$table-striped-color};
+    --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
+    --#{$variable-prefix}table-active-color: #{$table-active-color};
+    --#{$variable-prefix}table-active-bg: #{$table-active-bg};
+    --#{$variable-prefix}table-hover-color: #{$table-hover-color};
+    --#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
+
+    width: 100%;
+    color: $table-color;
+    vertical-align: $table-cell-vertical-align;
+    border-color: $table-border-color;
+    overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    > :not(caption) > * > * {
+      padding: $table-cell-padding-y $table-cell-padding-x;
+      background-color: var(--#{$variable-prefix}table-bg);
+      border-bottom-width: $table-border-width;
+      box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg);
+    }
+
+    > tbody {
+      vertical-align: inherit;
+    }
+    > tbody > tr > th {
+      text-align: center;
+    }
+
+    > thead {
+      vertical-align: bottom;
+      background: $secondary;
+      color: $white;
+    }
+    > thead > tr > th:first-child{
+      text-align: center;
+    }
+
+    // Highlight border color between thead, tbody and tfoot.
+    > :not(:last-child) > :last-child > * {
+      border-bottom-color: $table-group-separator-color;
+    }
+    //border
+    > :not(caption) > * {
+      border-width: $table-border-width 0;
+
+      // stylelint-disable-next-line selector-max-universal
+      > * {
+        border-width: 0 $table-border-width;
+      }
+    }
+  }
+
+  > figcaption {
+    margin-top: $paragraph-margin-bottom / 4;
+  }
+
+  &.is-style-striped {
+   table > tbody > tr:nth-of-type(#{$table-striped-order}) {
+      --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
+      color: var(--#{$variable-prefix}table-striped-color);
+    }
+  }
+}

data/app/assets/stylesheets/block_editor/host_app/_variables.scss

@@ -0,0 +1 @@
+// Override this file if you want to include any styling before default Block Editor styles are loaded. This would be a good place to add variables to customise Bootstrap

data/app/assets/stylesheets/block_editor/host_app/blocks/_backend.scss

@@ -0,0 +1 @@
+// Override this file if you want to include backend block styles to the Block Editor and not have to worry about losing any base styles

data/app/assets/stylesheets/block_editor/host_app/blocks/_frontend.scss

@@ -0,0 +1 @@
+// Override this file if you want to include frontend block styles to the Block Editor and not have to worry about losing any base styles

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

@@ -0,0 +1,108 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import classnames from 'classnames';
+
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { InnerBlocks, InspectorControls, PlainText } from '@wordpress/block-editor'
+import { box as icon } from '@wordpress/icons';
+
+const name = 'be/accordion';
+
+export { name };
+
+export const settings = {
+	title: 'Accordion',
+	description:  'Accordions are elements that help you organize and navigate multiple documents in a single container.',
+  icon,
+  category: 'layout',
+  attributes: {
+    blockId: {
+      type: 'string'
+    },
+    title: {
+      source: 'text',
+      selector: '.accordion-button'
+    },
+    isOpenByDefault: {
+      type: 'boolean',
+      default: true
+    }
+  },
+  example: {
+    attributes: {
+      title: 'Open by default accordion'
+    },
+    innerBlocks: [
+      {
+        name: 'core/paragraph',
+        attributes: {
+          content: 'Use an accordion to structure and optionally collapse content'
+        }
+      }
+    ]
+  },
+  edit({clientId, attributes, className, setAttributes, isSelected}) {
+    const { blockId } = attributes;
+    if ( ! blockId ) {
+      setAttributes( { blockId: `id-${clientId}` } );
+    } else if ( blockId != clientId ) {
+      setAttributes( { blockId: `id-${clientId}` } );
+    }
+
+    // TODO: Update this to check if this OR any of the innerblocks are selected
+    // let inlineStyle = (isSelected || attributes.isOpenByDefault) ? { display: 'block' } : {};
+    let inlineStyle = { display: 'block' };
+
+    return [
+			<InspectorControls>
+				<PanelBody title={ 'Accordion settings' }>
+					<ToggleControl
+						label={ 'Open by default' }
+            onChange={ content => setAttributes({ isOpenByDefault: content }) }
+            checked={ attributes.isOpenByDefault }
+					/>
+
+				</PanelBody>
+			</InspectorControls>,
+
+      <div className="wp-block-be-accordion accordion">
+        <div className="accordion-item">
+          <h2 className="accordion-header">
+            <PlainText
+              onChange={ content => setAttributes({ title: content }) }
+              value={ attributes.title }
+              placeholder="Your accordion title"
+              className="accordion-button"
+            />
+          </h2>
+          <div className="accordion-collapse collapse show">
+            <div className="accordion-body" style={ inlineStyle }>
+              <InnerBlocks/>
+            </div>
+          </div>
+        </div>
+      </div>
+    ];
+  },
+  save({ attributes }) {
+    let buttonVisibilityClass = attributes.isOpenByDefault ? "collapsed" : "";
+    let accordionVisibilityClass = attributes.isOpenByDefault ? "show" : "";
+
+    return (
+      <div className="wp-block-be-accordion accordion">
+        <div className="accordion-item">
+          <h2 className="accordion-header">
+            <button className={ "accordion-button " + buttonVisibilityClass } type="button" data-bs-toggle="collapse" data-bs-target={ "#" + attributes.blockId }>
+              { attributes.title }
+            </button>
+          </h2>
+          <div id={attributes.blockId} className={ "accordion-collapse collapse " + accordionVisibilityClass }>
+            <div className="accordion-body">
+                 <InnerBlocks.Content />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+};

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

@@ -0,0 +1,51 @@
+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 { box as icon } from '@wordpress/icons';
+
+const name = 'be/alert';
+
+export { name };
+
+export const settings = {
+	title: 'Callout (Alert)',
+	description:  'Container to help draw attention to content.',
+  icon,
+  category: 'formatting',
+	styles: [
+		{ name: 'primary', label: 'Primary', isDefault: true },
+		{ name: 'secondary', label: 'Secondary' },
+		{ name: 'success', label: 'Success' },
+		{ name: 'danger', label: 'Danger' },
+		{ name: 'warning', label: 'Warning' },
+		{ name: 'info', label: 'Info' },
+		{ name: 'light', label: 'Light' },
+		{ name: 'dark', label: 'Dark' }
+	],
+  example: {
+    innerBlocks: [
+      {
+        name: 'core/paragraph',
+        attributes: {
+          content: 'Use a callout to grab the users attention.'
+        }
+      }
+    ]
+  },
+  edit(props) {
+    return (
+      <div role="alert" className={ 'alert ' + props.className }>
+        <InnerBlocks/>
+      </div>
+    );
+  },
+  save() {
+    return <div role="alert" className='alert'><InnerBlocks.Content /></div>;
+  }
+};

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

@@ -0,0 +1,205 @@
+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 { box as icon } from '@wordpress/icons';
+
+const name = 'be/card';
+
+export { name };
+
+export const settings = {
+	title: 'Card',
+	description:  'Group a piece of content in an eye catching container.',
+  icon,
+  category: 'formatting',
+  example: {
+    attributes: {
+      title: 'Container example',
+      imageUrl: 'https://s.w.org/images/core/5.3/MtBlanc1.jpg',
+    }
+  },
+  attributes: {
+    title: {
+      source: 'text',
+      selector: '.card-title'
+    },
+    body: {
+      type: 'array',
+      source: 'children',
+      selector: '.card-content'
+    },
+    imageAlt: {
+      attribute: 'alt',
+      selector: '.card-img-top'
+    },
+    imageUrl: {
+      attribute: 'src',
+      selector: '.card-img-top'
+    },
+    hasCallToAction: {
+      type: 'boolean'
+    },
+    callToAction: {
+      type: 'text'
+    },
+    url: {
+      type: 'text'
+    },
+    openInNewTab: {
+      type: 'boolean'
+    }
+  },
+  edit({attributes, className, setAttributes, isSelected}) {
+    const getImageButton = (openEvent) => {
+      if(attributes.imageUrl) {
+        return (
+          <>
+            { isSelected &&
+              <Button
+                onClick={ openEvent }
+                className="button"
+                >
+                Edit
+              </Button>
+            }
+            <img
+              src={ attributes.imageUrl }
+              className="card-img-top"
+            />
+          </>
+        );
+      }
+      else {
+        return (
+          <div className="block-editor-image-placeholder">
+            <Button
+              onClick={ openEvent }
+              className="button button-large"
+            >
+            Pick an image
+            </Button>
+          </div>
+        );
+      }
+    };
+    return ([
+      <InspectorControls>
+				<PanelBody title='Card settings'>
+          <TextControl
+            label="URL"
+            value={ attributes.url }
+            onChange={ content => setAttributes({ url: content }) }
+          />
+          { attributes.url && (
+            <ToggleControl
+              label="Display Call To Action"
+              checked={ attributes.hasCallToAction }
+              onChange={ content => setAttributes({ hasCallToAction: content }) }
+            />
+          )}
+          { attributes.url && (
+            <ToggleControl
+              label="Open in new Tab?"
+              checked={ attributes.openInNewTab }
+              onChange={ content => setAttributes({ openInNewTab: content }) }
+            />
+          )}
+				</PanelBody>
+      </InspectorControls>,
+      <div className={ 'card ' + className }>
+        <MediaUpload
+          onSelect={ media => { setAttributes({ imageAlt: media.alt, imageUrl: media.url }); } }
+          type="image"
+          value={ attributes.imageID }
+          render={ ({ open }) => getImageButton(open) }
+        />
+        <div className='card-body'>
+          <PlainText
+            onChange={ content => setAttributes({ title: content }) }
+            value={ attributes.title }
+            placeholder="Your card title"
+            className="card-title h2"
+          />
+          <RichText
+            onChange={ content => setAttributes({ body: content }) }
+            value={ attributes.body }
+            multiline="p"
+            placeholder="Your card text"
+          />
+        </div>
+      { attributes.hasCallToAction && attributes.url &&
+        <PlainText
+          onChange={ content => setAttributes({ callToAction: content }) }
+          value={ attributes.callToAction }
+          placeholder="Your Call To Action"
+          className="card-link"
+        />
+      }
+      </div>
+    ]);
+  },
+  save({ attributes }) {
+    const linkTarget = (attributes.openInNewTab) ? '_blank' : '_self';
+    const cardImage = (src, alt) => {
+      if(!src) return null;
+
+      return (
+        <img
+          className="card-img-top"
+          src={ src }
+          alt={ alt }
+        />
+      );
+    }
+
+    return (
+      <div className="card">
+        { attributes.url ? (
+          <a
+            href={ attributes.url }
+            target= { linkTarget }
+          >
+            { cardImage(attributes.imageUrl, attributes.imageAlt) }
+          </a>
+        ) : (
+          cardImage(attributes.imageUrl, attributes.imageAlt)
+        )}
+        <div className="card-body">
+          <h3 className="card-title">
+            { attributes.url ? (
+              <a
+                href={ attributes.url }
+                target= { linkTarget }
+              >
+                { attributes.title }
+              </a>
+            ) : (
+              attributes.title
+            )}
+          </h3>
+          <div className='card-content'>
+            { attributes.body }
+          </div>
+        </div>
+      { attributes.hasCallToAction && attributes.url &&
+        <RichText.Content
+          tagName="a"
+          className='card-link'
+          href={ attributes.url }
+          target= { linkTarget }
+          value={ attributes.callToAction }
+        />
+      }
+      </div>
+    );
+  }
+};