From 2de8f41d4cee28bf01ad283df58f492121853559 Mon Sep 17 00:00:00 2001 From: spelkey-ucd Date: Thu, 22 Feb 2024 16:31:10 -0500 Subject: [PATCH] #286 --- .../blocks/ucd-theme-brand-textbox/edit.js | 33 +++- .../blocks/ucd-theme-brand-textbox/index.js | 7 +- .../blocks/ucd-theme-brand-textbox/save.js | 8 - .../lib/blocks/ucd-theme-careers/index.js | 5 +- .../lib/blocks/ucd-theme-careers/save.js | 8 - .../lib/blocks/ucd-theme-faq-item/edit.js | 60 ++---- .../lib/blocks/ucd-theme-faq-item/index.js | 8 +- .../lib/blocks/ucd-theme-faq-item/save.js | 8 - .../ucd-theme-faq-item/ucd-wp-faq-item.js | 38 ---- .../ucd-theme-faq-item/ucd-wp-faq-item.tpl.js | 38 ---- src/editor/lib/blocks/ucd-theme-faq/index.js | 5 +- src/editor/lib/blocks/ucd-theme-faq/save.js | 8 - .../lib/blocks/ucd-theme-focal-link/edit.js | 74 +++----- .../ucd-theme-focal-link/ucd-wp-focal-link.js | 54 ------ .../ucd-wp-focal-link.tpl.js | 54 ------ .../lib/blocks/ucd-theme-hero-banner/edit.js | 144 ++++++++------- .../ucd-wp-hero-banner.js | 75 -------- .../ucd-wp-hero-banner.tpl.js | 82 --------- .../blocks/ucd-theme-layout-basic/index.js | 5 +- .../lib/blocks/ucd-theme-layout-basic/save.js | 8 - .../blocks/ucd-theme-layout-column/index.js | 11 +- .../blocks/ucd-theme-layout-column/save.js | 8 - .../blocks/ucd-theme-layout-columns/index.js | 5 +- .../blocks/ucd-theme-layout-columns/save.js | 8 - .../ucd-theme-layout-container/index.js | 5 +- .../blocks/ucd-theme-layout-container/save.js | 8 - .../lib/blocks/ucd-theme-layout-quad/index.js | 5 +- .../lib/blocks/ucd-theme-layout-quad/save.js | 8 - .../blocks/ucd-theme-layout-shrink/index.js | 5 +- .../blocks/ucd-theme-layout-shrink/save.js | 8 - .../edit.js | 93 +++++----- ...cd-theme-marketing-highlight-horizontal.js | 52 ------ ...heme-marketing-highlight-horizontal.tpl.js | 57 ------ .../ucd-theme-marketing-highlight/edit.js | 171 ++++++++++-------- .../ucd-wp-marketing-highlight.js | 88 --------- .../ucd-wp-marketing-highlight.tpl.js | 102 ----------- .../lib/blocks/ucd-theme-media-link/edit.js | 124 ++++++------- .../ucd-theme-media-link/ucd-wp-media-link.js | 51 ------ .../ucd-wp-media-link.tpl.js | 69 ------- .../lib/blocks/ucd-theme-media-links/index.js | 5 +- .../lib/blocks/ucd-theme-media-links/save.js | 8 - .../lib/blocks/ucd-theme-object-box/index.js | 3 +- .../lib/blocks/ucd-theme-object-box/save.js | 8 - .../lib/blocks/ucd-theme-poster-list/index.js | 5 +- .../lib/blocks/ucd-theme-poster-list/save.js | 8 - .../lib/blocks/ucd-theme-poster/edit.js | 131 +++++++------- src/editor/lib/blocks/ucd-theme-query/edit.js | 61 ++++--- src/public/scss/temp.scss | 6 +- 48 files changed, 483 insertions(+), 1352 deletions(-) delete mode 100644 src/editor/lib/blocks/ucd-theme-brand-textbox/save.js delete mode 100644 src/editor/lib/blocks/ucd-theme-careers/save.js delete mode 100644 src/editor/lib/blocks/ucd-theme-faq-item/save.js delete mode 100644 src/editor/lib/blocks/ucd-theme-faq-item/ucd-wp-faq-item.js delete mode 100644 src/editor/lib/blocks/ucd-theme-faq-item/ucd-wp-faq-item.tpl.js delete mode 100644 src/editor/lib/blocks/ucd-theme-faq/save.js delete mode 100644 src/editor/lib/blocks/ucd-theme-focal-link/ucd-wp-focal-link.js delete mode 100644 src/editor/lib/blocks/ucd-theme-focal-link/ucd-wp-focal-link.tpl.js delete mode 100644 src/editor/lib/blocks/ucd-theme-hero-banner/ucd-wp-hero-banner.js delete mode 100644 src/editor/lib/blocks/ucd-theme-hero-banner/ucd-wp-hero-banner.tpl.js delete mode 100644 src/editor/lib/blocks/ucd-theme-layout-basic/save.js delete mode 100644 src/editor/lib/blocks/ucd-theme-layout-column/save.js delete mode 100644 src/editor/lib/blocks/ucd-theme-layout-columns/save.js delete mode 100644 src/editor/lib/blocks/ucd-theme-layout-container/save.js delete mode 100644 src/editor/lib/blocks/ucd-theme-layout-quad/save.js delete mode 100644 src/editor/lib/blocks/ucd-theme-layout-shrink/save.js delete mode 100644 src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/ucd-theme-marketing-highlight-horizontal.js delete mode 100644 src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/ucd-theme-marketing-highlight-horizontal.tpl.js delete mode 100644 src/editor/lib/blocks/ucd-theme-marketing-highlight/ucd-wp-marketing-highlight.js delete mode 100644 src/editor/lib/blocks/ucd-theme-marketing-highlight/ucd-wp-marketing-highlight.tpl.js delete mode 100644 src/editor/lib/blocks/ucd-theme-media-link/ucd-wp-media-link.js delete mode 100644 src/editor/lib/blocks/ucd-theme-media-link/ucd-wp-media-link.tpl.js delete mode 100644 src/editor/lib/blocks/ucd-theme-media-links/save.js delete mode 100644 src/editor/lib/blocks/ucd-theme-object-box/save.js delete mode 100644 src/editor/lib/blocks/ucd-theme-poster-list/save.js diff --git a/src/editor/lib/blocks/ucd-theme-brand-textbox/edit.js b/src/editor/lib/blocks/ucd-theme-brand-textbox/edit.js index 7557f18..80d021f 100644 --- a/src/editor/lib/blocks/ucd-theme-brand-textbox/edit.js +++ b/src/editor/lib/blocks/ucd-theme-brand-textbox/edit.js @@ -3,6 +3,8 @@ import { useBlockProps, BlockControls, InnerBlocks } from '@wordpress/block-edit import { ToolbarColorPicker, ToolbarFloat } from "../../block-components"; import { ToolbarButton } from '@wordpress/components'; +import classnames from 'classnames'; + export default ( props ) => { const { attributes, setAttributes } = props; @@ -15,6 +17,12 @@ export default ( props ) => { return p; } + const classes = classnames({ + "brand-textbox": true, + "category-brand__background": true, + [`category-brand--${attributes.brandColor}`]: attributes.brandColor + }); + // set up color picker const onColorChange = (value) => { setAttributes( {brandColor: value ? value.slug : "" } ); @@ -23,24 +31,31 @@ export default ( props ) => { return html`
<${BlockControls} group="block"> - <${ToolbarColorPicker} + <${ToolbarColorPicker} onChange=${onColorChange} value=${attributes.brandColor} ucdBlock="brand-textbox" /> - <${ToolbarButton} - icon=${html`X`} - onClick=${ () => {setAttributes({'collapsible': !attributes.collapsible})}} + <${ToolbarButton} + icon=${html`X`} + onClick=${ () => {setAttributes({'collapsible': !attributes.collapsible})}} isPressed=${attributes.collapsible} label="Make textbox collapsible"/> - <${ToolbarFloat} + <${ToolbarFloat} value=${attributes.float} onChange=${(v) => setAttributes({float: v.slug})} /> - - <${InnerBlocks} /> - + ${attributes.collapsible ? html` + + <${InnerBlocks} /> + ` : + html` +
+ <${InnerBlocks} /> +
+ `} +
` -} \ No newline at end of file +} diff --git a/src/editor/lib/blocks/ucd-theme-brand-textbox/index.js b/src/editor/lib/blocks/ucd-theme-brand-textbox/index.js index e9dd4fa..a43f8c1 100644 --- a/src/editor/lib/blocks/ucd-theme-brand-textbox/index.js +++ b/src/editor/lib/blocks/ucd-theme-brand-textbox/index.js @@ -1,6 +1,5 @@ -import { UCDIcons } from "../../utils"; +import { UCDIcons, Save } from "../../utils"; import Edit from './edit'; -import Save from "./save"; const name = 'ucd-theme/brand-textbox'; const settings = { @@ -27,10 +26,10 @@ const settings = { type: "string", default: "" } - + }, edit: Edit, save: Save }; -export default { name, settings }; \ No newline at end of file +export default { name, settings }; diff --git a/src/editor/lib/blocks/ucd-theme-brand-textbox/save.js b/src/editor/lib/blocks/ucd-theme-brand-textbox/save.js deleted file mode 100644 index 67fd8fc..0000000 --- a/src/editor/lib/blocks/ucd-theme-brand-textbox/save.js +++ /dev/null @@ -1,8 +0,0 @@ -import { html } from "../../utils"; -import { InnerBlocks } from '@wordpress/block-editor'; - -export default ( props ) => { - return html` - <${InnerBlocks.Content} /> - `; - } \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-careers/index.js b/src/editor/lib/blocks/ucd-theme-careers/index.js index 7f43020..785af9a 100644 --- a/src/editor/lib/blocks/ucd-theme-careers/index.js +++ b/src/editor/lib/blocks/ucd-theme-careers/index.js @@ -1,7 +1,6 @@ -import { html } from "../../utils"; +import { html, Save } from "../../utils"; import { people } from '@wordpress/icons'; import Edit from './edit'; -import Save from "./save"; const name = 'ucd-theme/careers'; const settings = { @@ -33,4 +32,4 @@ const settings = { save: Save, }; -export default { name, settings }; \ No newline at end of file +export default { name, settings }; diff --git a/src/editor/lib/blocks/ucd-theme-careers/save.js b/src/editor/lib/blocks/ucd-theme-careers/save.js deleted file mode 100644 index 67fd8fc..0000000 --- a/src/editor/lib/blocks/ucd-theme-careers/save.js +++ /dev/null @@ -1,8 +0,0 @@ -import { html } from "../../utils"; -import { InnerBlocks } from '@wordpress/block-editor'; - -export default ( props ) => { - return html` - <${InnerBlocks.Content} /> - `; - } \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-faq-item/edit.js b/src/editor/lib/blocks/ucd-theme-faq-item/edit.js index 516770f..26de359 100644 --- a/src/editor/lib/blocks/ucd-theme-faq-item/edit.js +++ b/src/editor/lib/blocks/ucd-theme-faq-item/edit.js @@ -1,52 +1,32 @@ import { html } from "../../utils"; -import "./ucd-wp-faq-item"; -import { useBlockProps, BlockControls, InnerBlocks } from '@wordpress/block-editor'; -import { useRef, useEffect } from "@wordpress/element"; - +import { useBlockProps, InnerBlocks, RichText } from '@wordpress/block-editor'; +import classnames from 'classnames'; export default ( props ) => { const { attributes, setAttributes } = props; const blockProps = useBlockProps(); - const mainEleRef = useRef(); - - // Wire up the main component - const onMainEleUpdated = (e) => { - const propName = e.detail.propName; - const propValue = e.detail.propValue; - const newAttrs = {}; - newAttrs[propName] = propValue; - setAttributes(newAttrs); - } - useEffect(() => { - let mainEle = null; - if ( mainEleRef.current ) { - mainEleRef.current.addEventListener('updated', onMainEleUpdated); - mainEle = mainEleRef.current; - } - return () => { - if ( mainEle ) { - mainEle.removeEventListener('updated', onMainEleUpdated); - } - }; + const classes = classnames({ + [`list--${attributes.listStyle}`]: true, }); - const mainEleProps = () => { - let p = {ref: mainEleRef}; - if ( attributes.question ) p.question = attributes.question; - p['list-style'] = attributes.listStyle; - return p; - } - return html`
- -
-
- <${InnerBlocks} /> -
- - +
` -} \ No newline at end of file +} diff --git a/src/editor/lib/blocks/ucd-theme-faq-item/index.js b/src/editor/lib/blocks/ucd-theme-faq-item/index.js index 945ca9e..13a68da 100644 --- a/src/editor/lib/blocks/ucd-theme-faq-item/index.js +++ b/src/editor/lib/blocks/ucd-theme-faq-item/index.js @@ -1,13 +1,11 @@ -import { UCDIcons } from "../../utils"; +import { UCDIcons, Save } from "../../utils"; import Edit from './edit'; -import Save from './save'; const name = 'ucd-theme/faq-item'; const settings = { api_version: 2, title: "FAQ Item", - parent: [ - "ucd-theme/faq"], + parent: ["ucd-theme/faq"], description: "Add a question and answer to a faq section", icon: UCDIcons.renderBlockIcon('faq-individual'), category: 'text', @@ -30,4 +28,4 @@ const settings = { save: Save }; -export default { name, settings }; \ No newline at end of file +export default { name, settings }; diff --git a/src/editor/lib/blocks/ucd-theme-faq-item/save.js b/src/editor/lib/blocks/ucd-theme-faq-item/save.js deleted file mode 100644 index 67fd8fc..0000000 --- a/src/editor/lib/blocks/ucd-theme-faq-item/save.js +++ /dev/null @@ -1,8 +0,0 @@ -import { html } from "../../utils"; -import { InnerBlocks } from '@wordpress/block-editor'; - -export default ( props ) => { - return html` - <${InnerBlocks.Content} /> - `; - } \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-faq-item/ucd-wp-faq-item.js b/src/editor/lib/blocks/ucd-theme-faq-item/ucd-wp-faq-item.js deleted file mode 100644 index b734e45..0000000 --- a/src/editor/lib/blocks/ucd-theme-faq-item/ucd-wp-faq-item.js +++ /dev/null @@ -1,38 +0,0 @@ -import { LitElement } from 'lit'; -import {render, styles} from "./ucd-wp-faq-item.tpl.js"; - -import { MainComponentElement, Mixin } from '../../utils'; - -export default class UcdWpFaqItem extends Mixin(LitElement) -.with(MainComponentElement) { - - static get properties() { - return { - question: {type: String}, - listStyle: {type: String, attribute: 'list-style'} - } - } - - static get styles() { - return styles(); - } - - constructor() { - super(); - this.render = render.bind(this); - this.question = ""; - this.listStyle = 'accordion'; - } - - updated(props){ - this.updateSlotContent(props, 'question', 'question-slot'); - } - - _onQuestionInput(e){ - this.question = e.target.textContent || ""; - this.dispatchUpdate('question'); - } - -} - -customElements.define('ucd-wp-faq-item', UcdWpFaqItem); \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-faq-item/ucd-wp-faq-item.tpl.js b/src/editor/lib/blocks/ucd-theme-faq-item/ucd-wp-faq-item.tpl.js deleted file mode 100644 index 79b7a2e..0000000 --- a/src/editor/lib/blocks/ucd-theme-faq-item/ucd-wp-faq-item.tpl.js +++ /dev/null @@ -1,38 +0,0 @@ -import { html, css } from 'lit'; -import listCss from "@ucd-lib/theme-sass/2_base_class/_lists.css.js"; - -export function styles() { - const elementStyles = css` - :host { - display: block; - } - .show-placeholder:before { - content: attr(placeholder); - position: absolute; - pointer-events: none; - opacity: .6; - } - `; - - return [ - listCss, - elementStyles - ]; -} - -export function render() { -return html` - - - -`;} \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-faq/index.js b/src/editor/lib/blocks/ucd-theme-faq/index.js index 65328bd..39bae51 100644 --- a/src/editor/lib/blocks/ucd-theme-faq/index.js +++ b/src/editor/lib/blocks/ucd-theme-faq/index.js @@ -1,6 +1,5 @@ -import { UCDIcons } from "../../utils"; +import { UCDIcons, Save } from "../../utils"; import Edit from './edit'; -import Save from './save'; const name = 'ucd-theme/faq'; const settings = { @@ -24,4 +23,4 @@ const settings = { save: Save }; -export default { name, settings }; \ No newline at end of file +export default { name, settings }; diff --git a/src/editor/lib/blocks/ucd-theme-faq/save.js b/src/editor/lib/blocks/ucd-theme-faq/save.js deleted file mode 100644 index 67fd8fc..0000000 --- a/src/editor/lib/blocks/ucd-theme-faq/save.js +++ /dev/null @@ -1,8 +0,0 @@ -import { html } from "../../utils"; -import { InnerBlocks } from '@wordpress/block-editor'; - -export default ( props ) => { - return html` - <${InnerBlocks.Content} /> - `; - } \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-focal-link/edit.js b/src/editor/lib/blocks/ucd-theme-focal-link/edit.js index 18e1396..85ba4df 100644 --- a/src/editor/lib/blocks/ucd-theme-focal-link/edit.js +++ b/src/editor/lib/blocks/ucd-theme-focal-link/edit.js @@ -1,55 +1,27 @@ import { html } from "../../utils"; -import "./ucd-wp-focal-link"; import { ToolbarColorPicker, ToolbarLinkPicker, IconPicker } from "../../block-components"; -import { useBlockProps, BlockControls } from '@wordpress/block-editor'; +import { useBlockProps, BlockControls, RichText } from '@wordpress/block-editor'; import { useRef, useEffect, createRef } from "@wordpress/element"; +import classnames from 'classnames'; + export default ( props ) => { const { attributes, setAttributes } = props; const blockProps = useBlockProps(); - const mainEleRef = useRef(); const iconPickerRef = createRef(); + const classes = classnames({ + "focal-link": true, + [`category-brand--${attributes.brandColor}`]: attributes.brandColor + }); - // Wire up the main component - const onMainEleUpdated = (e) => { - const propName = e.detail.propName; - const propValue = e.detail.propValue; - const newAttrs = {}; - newAttrs[propName] = propValue; - setAttributes(newAttrs); - } - const onIconChangeRequest = () => { + const onIconClick = () => { if ( iconPickerRef.current ){ iconPickerRef.current.openModal(); } } - useEffect(() => { - let mainEle = null; - if ( mainEleRef.current ) { - mainEleRef.current.addEventListener('updated', onMainEleUpdated); - mainEleRef.current.addEventListener('icon-change', onIconChangeRequest); - mainEle = mainEleRef.current; - } - return () => { - if ( mainEle ) { - mainEle.removeEventListener('updated', onMainEleUpdated); - mainEle.removeEventListener('icon-change', onIconChangeRequest); - } - }; - }); - - const mainEleProps = () => { - let p = {ref: mainEleRef}; - if ( attributes.brandColor ) p.color = attributes.brandColor; - if ( attributes.icon ) p.icon = attributes.icon; - if ( attributes.text ) p.text = attributes.text; - - return p; - } - // set up icon picker const onIconSelect = (icon) => { setAttributes({icon: `${icon.iconSet}:${icon.icon}`}) @@ -65,7 +37,7 @@ export default ( props ) => { if ( value.kind == 'post-type' ){ attrs.postId = value.id; } else if ( value.kind == 'taxonomy' ) { - attrs.taxId = value.id + attrs.taxId = value.id } setAttributes(attrs); } @@ -73,7 +45,7 @@ export default ( props ) => { let value = {opensInNewTab: attributes.newTab, url: ""}; if ( attributes.href ) { value.url = attributes.href; - } + } return value; })(); @@ -86,20 +58,34 @@ export default ( props ) => {
<${BlockControls} group="block"> <${ToolbarLinkPicker} onChange=${onHrefChange} value=${hrefContent} /> - <${ToolbarColorPicker} + <${ToolbarColorPicker} onChange=${onColorChange} value=${attributes.brandColor} ucdBlock="focal-link" /> - <${IconPicker} + <${IconPicker} ref=${iconPickerRef} onChange=${onIconSelect} selectedIcon=${attributes.icon} > - -
- + +
+ +
+
+ + <${RichText} + tagName="span" + value=${attributes.text} + onChange=${(v) => setAttributes({text: v})} + withoutInteractiveFormatting + allowedFormats=${[]} + placeholder="Enter link text..." + /> + +
+
` -} \ No newline at end of file +} diff --git a/src/editor/lib/blocks/ucd-theme-focal-link/ucd-wp-focal-link.js b/src/editor/lib/blocks/ucd-theme-focal-link/ucd-wp-focal-link.js deleted file mode 100644 index 208adf0..0000000 --- a/src/editor/lib/blocks/ucd-theme-focal-link/ucd-wp-focal-link.js +++ /dev/null @@ -1,54 +0,0 @@ -import { LitElement } from 'lit'; -import {render, styles} from "./ucd-wp-focal-link.tpl.js"; - -import { MainComponentElement, Mixin } from '../../utils'; - -export default class UcdWpFocalLink extends Mixin(LitElement) -.with(MainComponentElement) { - - static get properties() { - return { - color: {type: String}, - icon: {type: String}, - text: {type: String}, - } - } - - static get styles() { - return styles(); - } - - constructor() { - super(); - this.color = ""; - this.icon = ""; - this.text = ""; - this.render = render.bind(this); - - } - - updated(props){ - this.updateSlotContent(props, 'text', 'text-slot'); - } - - _getBaseClasses(){ - let classes = { - "focal-link": true - }; - classes[`category-brand--${this.color}`] = this.color ? true : false; - - return classes; - } - - dispatchIconChangeRequest(){ - this.dispatchEvent(new CustomEvent('icon-change')); - } - - _onTextInput(e){ - this.text = e.target.textContent || ""; - this.dispatchUpdate('text'); - } - -} - -customElements.define('ucd-wp-focal-link', UcdWpFocalLink); \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-focal-link/ucd-wp-focal-link.tpl.js b/src/editor/lib/blocks/ucd-theme-focal-link/ucd-wp-focal-link.tpl.js deleted file mode 100644 index 3537c76..0000000 --- a/src/editor/lib/blocks/ucd-theme-focal-link/ucd-wp-focal-link.tpl.js +++ /dev/null @@ -1,54 +0,0 @@ -import { html, css } from 'lit'; -import { classMap } from 'lit/directives/class-map.js'; -import brandStyles from "@ucd-lib/theme-sass/4_component/_category-brand.css.js"; -import linkStyles from "@ucd-lib/theme-sass/4_component/_focal-link.css.js"; - -export function styles() { - const elementStyles = css` - :host { - display: block; - } - .show-placeholder:before { - content: attr(placeholder); - position: absolute; - pointer-events: none; - opacity: .6; - } - .focal-link__icon ucdlib-icon { - width: 35px; - min-width: 35px; - height: 35px; - min-height: 35px; - } - `; - - return [ - brandStyles, - linkStyles, - elementStyles - ]; -} - -export function render() { -return html` - -
- ${this.icon ? html` - - ` : html` - Add Icon - `} -
-
- - ${this.text} - -
- - -`;} \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-hero-banner/edit.js b/src/editor/lib/blocks/ucd-theme-hero-banner/edit.js index f7348d9..6802182 100644 --- a/src/editor/lib/blocks/ucd-theme-hero-banner/edit.js +++ b/src/editor/lib/blocks/ucd-theme-hero-banner/edit.js @@ -1,21 +1,17 @@ import { html, SelectUtils} from "../../utils"; import { ImagePicker, ToolbarColorPicker, ToolbarPostReset, ToolbarLinkPicker } from "../../block-components"; -import "./ucd-wp-hero-banner"; -import { useBlockProps, BlockControls, InspectorControls, AlignmentControl } from '@wordpress/block-editor'; -import { useRef, useEffect } from "@wordpress/element"; +import { useBlockProps, BlockControls, InspectorControls, AlignmentControl, RichText } from '@wordpress/block-editor'; + +import classnames from 'classnames'; export default ( props ) => { const { attributes, setAttributes } = props; const blockProps = useBlockProps(); - const mainEleRef = useRef(); // retrieve needed wp data const {customImage, post, postTitle, postExcerpt, postImage} = SelectUtils.card(attributes); - // Listen to changes in component body - const onMainEleUpdated = (e) => { - const propName = e.detail.propName; - const propValue = e.detail.propValue; + const onTextUpdate = (propName, propValue) => { let reset = false; if ( propName === 'title'){ if (postTitle && !propValue ) return; @@ -24,24 +20,11 @@ export default ( props ) => { if (postExcerpt && !propValue ) return; if ( propValue === postExcerpt ) reset = true; } - + const newAttrs = {}; newAttrs[propName] = reset ? "" : propValue; setAttributes(newAttrs); - } - useEffect(() => { - let mainEle = null; - if ( mainEleRef.current ) { - mainEleRef.current.addEventListener('updated', onMainEleUpdated); - mainEle = mainEleRef.current; - } - return () => { - if ( mainEle ) { - mainEle.removeEventListener('updated', onMainEleUpdated); - } - }; - }); // set up image picker const onSelectImage = (image) => { @@ -64,7 +47,7 @@ export default ( props ) => { const postParts = (() => { return [ {slug: "thumbnail", isDisabled: !attributes.imageId || !postImage}, - {slug: 'title', isDisabled: !attributes.title}, + {slug: 'title', isDisabled: !attributes.title}, {slug: 'excerpt', isDisabled: !attributes.excerpt}] })(); @@ -93,45 +76,37 @@ export default ( props ) => { setAttributes( {brandColor: value ? value.slug : "" } ); } - const mainEleProps = () => { - let p = {ref: mainEleRef, "button-text": attributes.buttonText}; - - if ( attributes.featured ) p.featured = "true"; - if ( attributes.brandColor ) p.color = attributes.brandColor; - if ( attributes.href || post ) p.href = attributes.href ? attributes.href : post.link; - - if ( attributes.title ){ - p.title = attributes.title; - } else if ( postTitle ){ - p.title = postTitle; - } else {p.title = ""} - - if ( attributes.alignment != 'left' ){ - p.alignment = attributes.alignment; - } - - if ( attributes.excerpt ){ - p.excerpt = attributes.excerpt; - } else if ( postExcerpt ){ - p.excerpt = postExcerpt; - } else {p.excerpt = ""} - - if ( customImage ) { - p['img-src'] = customImage.source_url; - } else if ( postImage ){ - p['img-src'] = postImage.source_url; - } else { - //p['img-src'] = BlockSettings.getImage('marketing-highlight'); - } - - return p + let title = ''; + if ( attributes.title ){ + title = attributes.title; + } else if ( postTitle ){ + title = postTitle; + } + let excerpt = ''; + if ( attributes.excerpt ){ + excerpt = attributes.excerpt; + } else if ( postExcerpt ){ + excerpt = postExcerpt; } + let imgSrc = ''; + if ( customImage ) { + imgSrc = customImage.source_url; + } else if ( postImage ){ + imgSrc = postImage.source_url; + } + + const classes = classnames({ + 'hero-banner': true, + [`hero-banner--align-${attributes.alignment}`]: attributes.alignment, + [`category-brand--${attributes.brandColor}`]: attributes.brandColor, + 'no-image': !imgSrc + }); return html`
<${BlockControls} group="block"> <${ToolbarLinkPicker} onChange=${onHrefChange} value=${hrefContent} /> - <${ToolbarColorPicker} + <${ToolbarColorPicker} onChange=${onColorChange} value=${attributes.brandColor} ucdBlock="hero-banner" @@ -148,7 +123,7 @@ export default ( props ) => { `} <${InspectorControls}> - <${ImagePicker} + <${ImagePicker} imageId=${attributes.imageId} image=${customImage} onSelect=${onSelectImage} @@ -159,12 +134,55 @@ export default ( props ) => { panelAttributes=${{title: 'Custom Card Image'}} /> - -
-
-
- + +
+
+ ${attributes.color ? true : false && html` +
+ `} +
+
+ <${RichText} + tagName="span" + value=${title} + onChange=${(value) => onTextUpdate('title', value)} + withoutInteractiveFormatting + allowedFormats=${[]} + placeholder="Write a title..." + /> +
+
+

+ <${RichText} + tagName="span" + value=${excerpt} + onChange=${(value) => onTextUpdate('excerpt', value)} + withoutInteractiveFormatting + allowedFormats=${[]} + placeholder="Write text..." + /> +

+
+
+ + <${RichText} + tagName="span" + value=${attributes.buttonText} + onChange=${(value) => setAttributes({buttonText: value})} + withoutInteractiveFormatting + allowedFormats=${[]} + placeholder="Write text..." + /> + +
+
+ +
`; -}; \ No newline at end of file +}; diff --git a/src/editor/lib/blocks/ucd-theme-hero-banner/ucd-wp-hero-banner.js b/src/editor/lib/blocks/ucd-theme-hero-banner/ucd-wp-hero-banner.js deleted file mode 100644 index d030981..0000000 --- a/src/editor/lib/blocks/ucd-theme-hero-banner/ucd-wp-hero-banner.js +++ /dev/null @@ -1,75 +0,0 @@ -import { LitElement } from 'lit'; -import {render, styles} from "./ucd-wp-hero-banner.tpl.js"; -import { MainComponentElement, Mixin } from '../../utils'; - -export default class UcdWpHeroBanner extends Mixin(LitElement) -.with(MainComponentElement) { - - static get properties() { - return { - href: {type: String}, - imgSrc: {type: String, attribute: "img-src"}, - imgAlt: {type: String, attribute: "img-alt"}, - color: {type: String}, - alignment: {type: String}, - title: {type: String}, - excerpt: {type: String}, - buttonText: {type: String, attribute: "button-text"} - } - } - - static get styles() { - return styles(); - } - - constructor() { - super(); - this.render = render.bind(this); - - - this._prefix = "hero-banner"; - - this.href = ""; - this.imgSrc = ""; - this.imgAlt = ""; - this.alignment = ""; - this.color = ""; - this.title = ""; - this.excerpt = ""; - this.buttonText = "More info"; - } - - updated(props){ - this.updateSlotContent(props, 'buttonText', 'button-slot'); - this.updateSlotContent(props, 'title', 'title-slot'); - this.updateSlotContent(props, 'excerpt', 'excerpt-slot'); - } - - _getBaseClasses(){ - let classes = {}; - classes[this._prefix] = true; - classes[`${this._prefix}--align-${this.alignment}`] = this.alignment ? true : false; - classes[`category-brand--${this.color}`] = this.color ? true : false; - classes['no-image'] = !this.imgSrc; - - return classes; - } - - _onButtonTextInput(e){ - this.buttonText = e.target.textContent || ""; - this.dispatchUpdate('buttonText'); - } - - _onTitleInput(e){ - this.title = e.target.textContent || ""; - this.dispatchUpdate('title'); - } - - _onExcerptInput(e){ - this.excerpt = e.target.textContent || ""; - this.dispatchUpdate('excerpt'); - } - -} - -customElements.define('ucd-wp-hero-banner', UcdWpHeroBanner); \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-hero-banner/ucd-wp-hero-banner.tpl.js b/src/editor/lib/blocks/ucd-theme-hero-banner/ucd-wp-hero-banner.tpl.js deleted file mode 100644 index 2518421..0000000 --- a/src/editor/lib/blocks/ucd-theme-hero-banner/ucd-wp-hero-banner.tpl.js +++ /dev/null @@ -1,82 +0,0 @@ -import { html, css } from 'lit'; -import brandStyles from "@ucd-lib/theme-sass/4_component/_category-brand.css.js" -import { classMap } from 'lit/directives/class-map.js'; -import heroBannerStyles from "@ucd-lib/theme-sass/4_component/_hero-banner.css.js"; - -export function styles() { - const elementStyles = css` - :host { - display: block; - } - .show-placeholder:before { - content: attr(placeholder); - position: absolute; - pointer-events: none; - opacity: .6; - } - .u-background-image { - background-size: cover; - background-position: center; - background-repeat: no-repeat; - } - .no-image { - background-color: #73abdd; - } - .hero-banner__film { - background: var(--category-brand, #fff); - height: 100%; - grid-area: hero; - opacity: 60%; - } - .hero-banner__body { - width: auto; - } - `; - - return [ - brandStyles, - heroBannerStyles, - elementStyles - ]; -} - -export function render() { -return html` -
-
- ${this.color ? html` -
- ` : html``} -
-
- ${this.title} -
-
-

- ${this.excerpt} -

-
-
- - ${this.buttonText} - -
-
-
- -`;} \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-layout-basic/index.js b/src/editor/lib/blocks/ucd-theme-layout-basic/index.js index 37d10c3..0fdc2d2 100644 --- a/src/editor/lib/blocks/ucd-theme-layout-basic/index.js +++ b/src/editor/lib/blocks/ucd-theme-layout-basic/index.js @@ -1,6 +1,5 @@ -import { UCDIcons } from "../../utils"; +import { UCDIcons, Save } from "../../utils"; import Edit from './edit'; -import Save from "./save"; const name = 'ucd-theme/layout-basic'; const settings = { @@ -37,4 +36,4 @@ const settings = { save: Save }; -export default { name, settings }; \ No newline at end of file +export default { name, settings }; diff --git a/src/editor/lib/blocks/ucd-theme-layout-basic/save.js b/src/editor/lib/blocks/ucd-theme-layout-basic/save.js deleted file mode 100644 index 67fd8fc..0000000 --- a/src/editor/lib/blocks/ucd-theme-layout-basic/save.js +++ /dev/null @@ -1,8 +0,0 @@ -import { html } from "../../utils"; -import { InnerBlocks } from '@wordpress/block-editor'; - -export default ( props ) => { - return html` - <${InnerBlocks.Content} /> - `; - } \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-layout-column/index.js b/src/editor/lib/blocks/ucd-theme-layout-column/index.js index a07c9b5..250e3be 100644 --- a/src/editor/lib/blocks/ucd-theme-layout-column/index.js +++ b/src/editor/lib/blocks/ucd-theme-layout-column/index.js @@ -1,15 +1,14 @@ -import { UCDIcons } from "../../utils"; +import { UCDIcons, Save } from "../../utils"; import Edit from './edit'; -import Save from "./save"; const name = 'ucd-theme/column'; const settings = { api_version: 2, title: "Column", parent: [ - "ucd-theme/layout-basic", - "ucd-theme/layout-columns", - "ucd-theme/layout-container", + "ucd-theme/layout-basic", + "ucd-theme/layout-columns", + "ucd-theme/layout-container", "ucd-theme/layout-quad"], description: "A column used by layout blocks", icon: UCDIcons.renderBlockIcon('column'), @@ -51,4 +50,4 @@ const settings = { save: Save }; -export default { name, settings }; \ No newline at end of file +export default { name, settings }; diff --git a/src/editor/lib/blocks/ucd-theme-layout-column/save.js b/src/editor/lib/blocks/ucd-theme-layout-column/save.js deleted file mode 100644 index 67fd8fc..0000000 --- a/src/editor/lib/blocks/ucd-theme-layout-column/save.js +++ /dev/null @@ -1,8 +0,0 @@ -import { html } from "../../utils"; -import { InnerBlocks } from '@wordpress/block-editor'; - -export default ( props ) => { - return html` - <${InnerBlocks.Content} /> - `; - } \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-layout-columns/index.js b/src/editor/lib/blocks/ucd-theme-layout-columns/index.js index abfc62a..c2de3f4 100644 --- a/src/editor/lib/blocks/ucd-theme-layout-columns/index.js +++ b/src/editor/lib/blocks/ucd-theme-layout-columns/index.js @@ -1,6 +1,5 @@ -import { UCDIcons } from "../../utils"; +import { UCDIcons, Save } from "../../utils"; import Edit from './edit'; -import Save from "./save"; const name = 'ucd-theme/layout-columns'; const settings = { @@ -33,4 +32,4 @@ const settings = { save: Save }; -export default { name, settings }; \ No newline at end of file +export default { name, settings }; diff --git a/src/editor/lib/blocks/ucd-theme-layout-columns/save.js b/src/editor/lib/blocks/ucd-theme-layout-columns/save.js deleted file mode 100644 index 67fd8fc..0000000 --- a/src/editor/lib/blocks/ucd-theme-layout-columns/save.js +++ /dev/null @@ -1,8 +0,0 @@ -import { html } from "../../utils"; -import { InnerBlocks } from '@wordpress/block-editor'; - -export default ( props ) => { - return html` - <${InnerBlocks.Content} /> - `; - } \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-layout-container/index.js b/src/editor/lib/blocks/ucd-theme-layout-container/index.js index 278aafe..b96695b 100644 --- a/src/editor/lib/blocks/ucd-theme-layout-container/index.js +++ b/src/editor/lib/blocks/ucd-theme-layout-container/index.js @@ -1,6 +1,5 @@ -import { UCDIcons } from "../../utils"; +import { UCDIcons, Save } from "../../utils"; import Edit from './edit'; -import Save from "./save"; const name = 'ucd-theme/layout-container'; const settings = { @@ -25,4 +24,4 @@ const settings = { save: Save }; -export default { name, settings }; \ No newline at end of file +export default { name, settings }; diff --git a/src/editor/lib/blocks/ucd-theme-layout-container/save.js b/src/editor/lib/blocks/ucd-theme-layout-container/save.js deleted file mode 100644 index d8dab89..0000000 --- a/src/editor/lib/blocks/ucd-theme-layout-container/save.js +++ /dev/null @@ -1,8 +0,0 @@ -import { html } from "../../utils"; -import { InnerBlocks } from '@wordpress/block-editor'; - -export default ( props ) => { - return html` - <${InnerBlocks.Content} /> - `; -} \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-layout-quad/index.js b/src/editor/lib/blocks/ucd-theme-layout-quad/index.js index 03d24f9..91084e2 100644 --- a/src/editor/lib/blocks/ucd-theme-layout-quad/index.js +++ b/src/editor/lib/blocks/ucd-theme-layout-quad/index.js @@ -1,6 +1,5 @@ -import { UCDIcons } from "../../utils"; +import { UCDIcons, Save } from "../../utils"; import Edit from './edit'; -import Save from "./save"; const name = 'ucd-theme/layout-quad'; const settings = { @@ -25,4 +24,4 @@ const settings = { save: Save }; -export default { name, settings }; \ No newline at end of file +export default { name, settings }; diff --git a/src/editor/lib/blocks/ucd-theme-layout-quad/save.js b/src/editor/lib/blocks/ucd-theme-layout-quad/save.js deleted file mode 100644 index d8dab89..0000000 --- a/src/editor/lib/blocks/ucd-theme-layout-quad/save.js +++ /dev/null @@ -1,8 +0,0 @@ -import { html } from "../../utils"; -import { InnerBlocks } from '@wordpress/block-editor'; - -export default ( props ) => { - return html` - <${InnerBlocks.Content} /> - `; -} \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-layout-shrink/index.js b/src/editor/lib/blocks/ucd-theme-layout-shrink/index.js index 929b146..dca7f7e 100644 --- a/src/editor/lib/blocks/ucd-theme-layout-shrink/index.js +++ b/src/editor/lib/blocks/ucd-theme-layout-shrink/index.js @@ -1,6 +1,5 @@ -import { UCDIcons } from "../../utils"; +import { UCDIcons, Save } from "../../utils"; import Edit from './edit'; -import Save from "./save"; const name = 'ucd-theme/layout-shrink'; const settings = { @@ -33,4 +32,4 @@ const settings = { save: Save }; -export default { name, settings }; \ No newline at end of file +export default { name, settings }; diff --git a/src/editor/lib/blocks/ucd-theme-layout-shrink/save.js b/src/editor/lib/blocks/ucd-theme-layout-shrink/save.js deleted file mode 100644 index 67fd8fc..0000000 --- a/src/editor/lib/blocks/ucd-theme-layout-shrink/save.js +++ /dev/null @@ -1,8 +0,0 @@ -import { html } from "../../utils"; -import { InnerBlocks } from '@wordpress/block-editor'; - -export default ( props ) => { - return html` - <${InnerBlocks.Content} /> - `; - } \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/edit.js b/src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/edit.js index ca289ae..b5ee6f0 100644 --- a/src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/edit.js +++ b/src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/edit.js @@ -1,46 +1,33 @@ import { html, BlockSettings, SelectUtils, UCDIcons } from "../../utils"; import { ImagePicker, ToolbarPostReset, ToolbarColorPicker, ToolbarSectionDisplay, ToolbarLinkPicker } from "../../block-components"; -import { useBlockProps, BlockControls, InspectorControls } from '@wordpress/block-editor'; -import "./ucd-theme-marketing-highlight-horizontal"; -import { useRef, useEffect } from "@wordpress/element"; +import { useBlockProps, BlockControls, InspectorControls, RichText } from '@wordpress/block-editor'; import { ToolbarButton } from "@wordpress/components"; +import classnames from 'classnames'; + export default ( props ) => { const { attributes, setAttributes } = props; const blockProps = useBlockProps(); - const mainEleRef = useRef(); // retrieve needed wp data const { customImage, post, postImage, postTitle } = SelectUtils.card(attributes); let customPostImage = post && post.meta ? post.meta.ucd_thumbnail_4x3 : 0; customPostImage = SelectUtils.image(customPostImage); - // Listen to changes in component body - const onMainEleUpdated = (e) => { - const propName = e.detail.propName; - const propValue = e.detail.propValue; + const onTextUpdate = (propName, propValue) => { let reset = false; if ( propName === 'title'){ if (postTitle && !propValue ) return; if ( propValue === postTitle ) reset = true; + } else if (propName === 'excerpt') { + if (postExcerpt && !propValue ) return; + if ( propValue === postExcerpt ) reset = true; } + const newAttrs = {}; newAttrs[propName] = reset ? "" : propValue; setAttributes(newAttrs); - } - useEffect(() => { - let mainEle = null; - if ( mainEleRef.current ) { - mainEleRef.current.addEventListener('updated', onMainEleUpdated); - mainEle = mainEleRef.current; - } - return () => { - if ( mainEle ) { - mainEle.removeEventListener('updated', onMainEleUpdated); - } - }; - }); // set up link picker const onHrefChange = (value) => { @@ -102,33 +89,25 @@ export default ( props ) => { setAttributes({imageId: 0}); } - const mainEleProps = () => { - let p = {ref: mainEleRef}; - - if ( attributes.brandColor ) p['brand-color'] = attributes.brandColor; - if ( attributes.hideTitle ) p['hide-title'] = "true"; - if ( attributes.overlay ) p.overlay = "true"; - if ( attributes.href || post ) p.href = attributes.href ? attributes.href : post.link; - - if ( attributes.title ){ - p.title = attributes.title; - } else if ( postTitle ){ - p.title = postTitle; - } else {p.title = ""} - - if ( customImage ) { - p['img-src'] = customImage.source_url; - } else if ( customPostImage ){ - p['img-src'] = customPostImage.source_url; - } else if ( postImage ){ - p['img-src'] = postImage.source_url; - } else { - p['img-src'] = BlockSettings.getImage('marketing-highlight-horizontal'); - } - - return p + let title = ''; + if ( attributes.title ){ + title = attributes.title; + } else if ( postTitle ){ + title = postTitle; + } + let imgSrc = BlockSettings.getImage('marketing-highlight-horizontal'); + if ( customImage ) { + imgSrc = customImage.source_url; + } else if ( postImage ){ + imgSrc = postImage.source_url; } + const classes = classnames({ + 'marketing-highlight-horizontal': true, + [`category-brand--${attributes.brandColor}`]: attributes.brandColor, + 'marketing-highlight-horizontal--overlay': attributes.overlay + }); + return html`
<${BlockControls} group="block"> @@ -166,9 +145,25 @@ export default ( props ) => { panelAttributes=${{title: 'Custom Image'}} /> - -
- +
+
+
+
+ ${!attributes.hideTitle && html` +
+
+ <${RichText} + tagName="span" + value=${title} + onChange=${ (value) => onTextUpdate('title', value)} + withoutInteractiveFormatting + allowedFormats=${[]} + placeholder="Write a title..." + /> +
+
+ `} +
`; }; diff --git a/src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/ucd-theme-marketing-highlight-horizontal.js b/src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/ucd-theme-marketing-highlight-horizontal.js deleted file mode 100644 index 9625593..0000000 --- a/src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/ucd-theme-marketing-highlight-horizontal.js +++ /dev/null @@ -1,52 +0,0 @@ -import { LitElement } from 'lit'; -import {render, styles} from "./ucd-theme-marketing-highlight-horizontal.tpl.js"; -import { MainComponentElement, Mixin } from '../../utils'; - -export default class UcdThemeMarketingHighlightHorizontal extends Mixin(LitElement) - .with(MainComponentElement) { - - static get properties() { - return { - href: {type: String}, - imgSrc: {type: String, attribute: "img-src"}, - title: {type: String}, - hideTitle: {type: Boolean, attribute: "hide-title"}, - brandColor: {type: String, attribute: "brand-color"}, - overlay: {type: Boolean}, - } - } - - static get styles() { - return styles(); - } - - constructor() { - super(); - this.render = render.bind(this); - this.href = ""; - this.title = ""; - this.hideTitle = false; - this.brandColor = ""; - this.imgSrc = ""; - this.overlay = false; - } - - updated(props){ - this.updateSlotContent(props, 'title', 'title-slot'); - } - - mainClasses(){ - const classes = ['marketing-highlight-horizontal']; - if (this.brandColor) classes.push(`category-brand--${this.brandColor}`); - if (this.overlay) classes.push('marketing-highlight-horizontal--overlay'); - - return classes.join(' '); - } - - _onTitleInput(e){ - this.title = e.target.textContent || ""; - this.dispatchUpdate('title'); - } -} - -customElements.define('ucd-theme-marketing-highlight-horizontal', UcdThemeMarketingHighlightHorizontal); diff --git a/src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/ucd-theme-marketing-highlight-horizontal.tpl.js b/src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/ucd-theme-marketing-highlight-horizontal.tpl.js deleted file mode 100644 index 1ad3cec..0000000 --- a/src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/ucd-theme-marketing-highlight-horizontal.tpl.js +++ /dev/null @@ -1,57 +0,0 @@ -import { html, css } from 'lit'; -import MarketingHighlightHorizontalStyles from "@ucd-lib/theme-sass/4_component/_marketing-highlight-horizontal.css.js"; -import brandStyles from "@ucd-lib/theme-sass/4_component/_category-brand.css.js" -import imageAspectStyles from "@ucd-lib/theme-sass/6_utility/_u-aspect.css.js"; - -export function styles() { - const elementStyles = css` - :host { - display: block; - } - *, *:before, *:after { - box-sizing: inherit; - } - .u-background-image { - background-size: cover; - background-position: center; - background-repeat: no-repeat; - } - .show-placeholder:before { - content: attr(placeholder); - position: absolute; - pointer-events: none; - opacity: .6; - } - .marketing-highlight-horizontal--overlay .marketing-highlight-horizontal__title { - min-width: 275px; - } - `; - - return [ - MarketingHighlightHorizontalStyles, - brandStyles, - imageAspectStyles, - elementStyles]; -} - -export function render() { -return html` - -
-
-
- ${!this.hideTitle ? html` -
-
- ${this.title} -
-
- ` : html``} - - -`;} diff --git a/src/editor/lib/blocks/ucd-theme-marketing-highlight/edit.js b/src/editor/lib/blocks/ucd-theme-marketing-highlight/edit.js index 7d01858..fa2b936 100644 --- a/src/editor/lib/blocks/ucd-theme-marketing-highlight/edit.js +++ b/src/editor/lib/blocks/ucd-theme-marketing-highlight/edit.js @@ -1,50 +1,33 @@ import { html, BlockSettings, SelectUtils, UCDIcons } from "../../utils"; import { ImagePicker, ToolbarColorPicker, ToolbarPostReset, ToolbarSectionDisplay, ToolbarLinkPicker } from "../../block-components"; -import "./ucd-wp-marketing-highlight"; -import { useBlockProps, BlockControls, InspectorControls } from '@wordpress/block-editor'; +import { useBlockProps, BlockControls, InspectorControls, RichText } from '@wordpress/block-editor'; import { ToolbarButton } from "@wordpress/components"; -import { useRef, useEffect } from "@wordpress/element"; + +import classnames from 'classnames'; export default ( props ) => { const { attributes, setAttributes } = props; const blockProps = useBlockProps(); - const mainEleRef = useRef(); - - // retrieve needed wp data - const {customImage, post, postTitle, postExcerpt, postImage} = SelectUtils.card(attributes); - let customPostImage = post && post.meta ? post.meta.ucd_thumbnail_4x3 : 0; - customPostImage = SelectUtils.image(customPostImage); - // Listen to changes in component body - const onMainEleUpdated = (e) => { - const propName = e.detail.propName; - const propValue = e.detail.propValue; + const onTextUpdate = (propName, propValue) => { let reset = false; if ( propName === 'title'){ if (postTitle && !propValue ) return; if ( propValue === postTitle ) reset = true; - } else if (postExcerpt && propName === 'excerpt') { + } else if (propName === 'excerpt') { if (postExcerpt && !propValue ) return; if ( propValue === postExcerpt ) reset = true; } - + const newAttrs = {}; newAttrs[propName] = reset ? "" : propValue; setAttributes(newAttrs); - } - useEffect(() => { - let mainEle = null; - if ( mainEleRef.current ) { - mainEleRef.current.addEventListener('updated', onMainEleUpdated); - mainEle = mainEleRef.current; - } - return () => { - if ( mainEle ) { - mainEle.removeEventListener('updated', onMainEleUpdated); - } - }; - }); + + // retrieve needed wp data + const {customImage, post, postTitle, postExcerpt, postImage} = SelectUtils.card(attributes); + let customPostImage = post && post.meta ? post.meta.ucd_thumbnail_4x3 : 0; + customPostImage = SelectUtils.image(customPostImage); // set up image picker const onSelectImage = (image) => { @@ -67,7 +50,7 @@ export default ( props ) => { const postParts = (() => { return [ {slug: "thumbnail", isDisabled: !attributes.imageId || !postImage}, - {slug: 'title', isDisabled: !attributes.title}, + {slug: 'title', isDisabled: !attributes.title}, {slug: 'excerpt', isDisabled: !attributes.excerpt}] })(); @@ -82,7 +65,7 @@ export default ( props ) => { return [ {slug: 'badge', title: "Badge", icon: "picture-in-picture-alt", isHidden: attributes.hideBadge}, {slug: "title", isHidden: attributes.hideTitle}, - {slug: 'excerpt', isHidden: attributes.hideExcerpt}, + {slug: 'excerpt', isHidden: attributes.hideExcerpt}, {slug: 'button', isHidden: attributes.hideButton} ] })(); @@ -112,53 +95,41 @@ export default ( props ) => { setAttributes( {brandColor: value ? value.slug : "" } ); } - const mainEleProps = () => { - let p = {ref: mainEleRef, "button-text": attributes.buttonText}; - - if ( attributes.featured ) p.featured = "true"; - if ( attributes.brandColor ) p.color = attributes.brandColor; - if ( attributes.href || post ) p.href = attributes.href ? attributes.href : post.link; - if ( attributes.hideTitle ) p['hide-title'] = "true"; - if ( attributes.hideExcerpt ) p['hide-excerpt'] = "true"; - if ( attributes.hideBadge ) p['hide-badge'] = "true"; - if ( attributes.hideButton ) p['hide-button'] = "true"; - if ( attributes.badge ) p['badge'] = attributes.badge; - - if ( attributes.title ){ - p.title = attributes.title; - } else if ( postTitle ){ - p.title = postTitle; - } else {p.title = ""} - - if ( attributes.excerpt ){ - p.excerpt = attributes.excerpt; - } else if ( postExcerpt ){ - p.excerpt = postExcerpt; - } else {p.excerpt = ""} - - if ( customImage ) { - p['img-src'] = customImage.source_url; - } else if ( customPostImage ){ - p['img-src'] = customPostImage.source_url; - } else if ( postImage ){ - p['img-src'] = postImage.source_url; - } else { - p['img-src'] = BlockSettings.getImage('marketing-highlight'); - } + const classes = classnames({ + "marketing-highlight": true, + [`category-brand--${attributes.brandColor}`]: attributes.brandColor, + [`marketing-highlight--featured`]: attributes.featured + }); - return p + let title = ''; + if ( attributes.title ){ + title = attributes.title; + } else if ( postTitle ){ + title = postTitle; + } + let excerpt = ''; + if ( attributes.excerpt ){ + excerpt = attributes.excerpt; + } else if ( postExcerpt ){ + excerpt = postExcerpt; + } + let imgSrc = BlockSettings.getImage('marketing-highlight'); + if ( customImage ) { + imgSrc = customImage.source_url; + } else if ( postImage ){ + imgSrc = postImage.source_url; } return html`
<${BlockControls} group="block"> <${ToolbarLinkPicker} onChange=${onHrefChange} value=${hrefContent} /> - <${ToolbarButton} - icon=${UCDIcons.render("color.fill")} - onClick=${ () => {setAttributes({'featured': !attributes.featured})}} + <${ToolbarButton} + icon=${UCDIcons.render("color.fill")} + onClick=${ () => {setAttributes({'featured': !attributes.featured})}} isPressed=${attributes.featured} label="Toggle 'Featured' Display Setting"/> - <${ToolbarColorPicker} + <${ToolbarColorPicker} onChange=${onColorChange} value=${attributes.brandColor} ucdBlock="marketing-highlight" @@ -175,7 +146,7 @@ export default ( props ) => { `} <${InspectorControls}> - <${ImagePicker} + <${ImagePicker} imageId=${attributes.imageId} image=${customImage} onSelect=${onSelectImage} @@ -186,13 +157,61 @@ export default ( props ) => { panelAttributes=${{title: 'Custom Card Image'}} /> - -
-
-
-
- +
+
+ ${!attributes.hideBadge && html` +

+ <${RichText} + tagName="span" + value=${attributes.badge} + onChange=${(badge) => setAttributes({badge})} + withoutInteractiveFormatting + allowedFormats=${[]} + placeholder="Write text..." + /> +

+ `} +
+
+ ${!attributes.hideTitle && html` +

+ <${RichText} + tagName="span" + value=${title} + onChange=${(value) => onTextUpdate('title', value)} + withoutInteractiveFormatting + allowedFormats=${[]} + placeholder="Write a title..." + /> +

+ `} + ${!attributes.hideExcerpt && html` +

+ <${RichText} + tagName="span" + value=${excerpt} + onChange=${(value) => onTextUpdate('excerpt', value)} + withoutInteractiveFormatting + allowedFormats=${[]} + placeholder="Write text..." + /> +

+ `} + ${!attributes.hideButton && html` + + <${RichText} + tagName="span" + value=${attributes.buttonText} + onChange=${(value) => setAttributes({buttonText: value})} + withoutInteractiveFormatting + allowedFormats=${[]} + placeholder="Write text..." + /> + + `} +
+
`; -}; \ No newline at end of file +}; diff --git a/src/editor/lib/blocks/ucd-theme-marketing-highlight/ucd-wp-marketing-highlight.js b/src/editor/lib/blocks/ucd-theme-marketing-highlight/ucd-wp-marketing-highlight.js deleted file mode 100644 index 7ec1cbf..0000000 --- a/src/editor/lib/blocks/ucd-theme-marketing-highlight/ucd-wp-marketing-highlight.js +++ /dev/null @@ -1,88 +0,0 @@ -import { LitElement } from 'lit'; -import {render, styles} from "./ucd-wp-marketing-highlight.tpl.js"; -import { MainComponentElement, Mixin } from '../../utils'; - -export default class UcdWpMarketingHighlight extends Mixin(LitElement) - .with(MainComponentElement) { - - static get properties() { - return { - href: {type: String}, - imgSrc: {type: String, attribute: "img-src"}, - imgAlt: {type: String, attribute: "img-alt"}, - badge: {type: String}, - hideBadge: {type: Boolean, attribute: "hide-badge"}, - hideTitle: {type: Boolean, attribute: "hide-title"}, - hideExcerpt: {type: Boolean, attribute: "hide-excerpt"}, - hideButton: {type: Boolean, attribute: "hide-button"}, - featured: {type: Boolean}, - color: {type: String}, - title: {type: String}, - excerpt: {type: String}, - buttonText: {type: String, attribute: "button-text"} - } - } - - static get styles() { - return styles(); - } - - constructor() { - super(); - this.render = render.bind(this); - - this._prefix = "marketing-highlight"; - - this.href = ""; - this.imgSrc = ""; - this.imgAlt = ""; - this.featured = false; - this.color = ""; - this.title = ""; - this.excerpt = ""; - this.buttonText = "More info"; - this.badge = ""; - this.hideBadge = false; - this.hideExcerpt = false; - this.hideTitle = false; - this.hideButton = false; - } - - updated(props){ - this.updateSlotContent(props, 'buttonText', 'button-slot'); - this.updateSlotContent(props, 'title', 'title-slot'); - this.updateSlotContent(props, 'badge', 'badge-slot'); - this.updateSlotContent(props, 'excerpt', 'excerpt-slot'); - } - - _getBaseClasses(){ - let classes = {}; - classes[this._prefix] = true; - classes[`${this._prefix}--featured`] = this.featured - classes[`category-brand--${this.color}`] = this.color ? true : false; - - return classes; - } - - _onButtonTextInput(e){ - this.buttonText = e.target.textContent || ""; - this.dispatchUpdate('buttonText'); - } - - _onTitleInput(e){ - this.title = e.target.textContent || ""; - this.dispatchUpdate('title'); - } - _onBadgeInput(e){ - this.badge = e.target.textContent || ""; - this.dispatchUpdate('badge'); - } - - _onExcerptInput(e){ - this.excerpt = e.target.textContent || ""; - this.dispatchUpdate('excerpt'); - } - -} - -customElements.define('ucd-wp-marketing-highlight', UcdWpMarketingHighlight); \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-marketing-highlight/ucd-wp-marketing-highlight.tpl.js b/src/editor/lib/blocks/ucd-theme-marketing-highlight/ucd-wp-marketing-highlight.tpl.js deleted file mode 100644 index 853e456..0000000 --- a/src/editor/lib/blocks/ucd-theme-marketing-highlight/ucd-wp-marketing-highlight.tpl.js +++ /dev/null @@ -1,102 +0,0 @@ -import { html, css } from 'lit'; -import { classMap } from 'lit/directives/class-map.js'; -import marketingHighlightStyles from "@ucd-lib/theme-sass/4_component/_marketing-highlight.css.js"; -import brandStyles from "@ucd-lib/theme-sass/4_component/_category-brand.css.js" -import imageAspectStyles from "@ucd-lib/theme-sass/6_utility/_u-aspect.css.js"; - -export function styles() { - const elementStyles = css` - :host { - display: block; - } - *, *:before, *:after { - box-sizing: inherit; - } - .u-background-image { - background-size: cover; - background-position: center; - background-repeat: no-repeat; - } - .marketing-highlight__image img { - z-index: 1; - } - #badge-slot { - text-align: right; - } - .show-placeholder:before { - content: attr(placeholder); - position: absolute; - pointer-events: none; - opacity: .6; - } - #badge-slot.show-placeholder { - min-width: 60px; - width: 60px; - } - .no-content ::slotted([slot=badge]) { - width: 120px; - min-width: 120px; - } - `; - - return [ - marketingHighlightStyles, - brandStyles, - imageAspectStyles, - elementStyles - ]; -} - -export function render() { -return html` - - ${this.imgSrc ? html` - - ` : html``} -
- ${this.hideTitle ? html`` : html` -

- ${this.title} -

- `} - ${this.hideExcerpt ? html`` : html` -

- ${this.excerpt} -

- `} - - ${this.hideButton ? html`` : html` - - ${this.buttonText} - - `} - -
- -`;} \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-media-link/edit.js b/src/editor/lib/blocks/ucd-theme-media-link/edit.js index ef9289a..f682591 100644 --- a/src/editor/lib/blocks/ucd-theme-media-link/edit.js +++ b/src/editor/lib/blocks/ucd-theme-media-link/edit.js @@ -1,23 +1,12 @@ import { html, BlockSettings, SelectUtils } from "../../utils"; import { ImagePicker, ToolbarPostReset, ToolbarLinkPicker } from "../../block-components"; -import "./ucd-wp-media-link"; -import { useBlockProps, BlockControls, InspectorControls } from '@wordpress/block-editor'; -import { useRef, useEffect } from "@wordpress/element"; +import { useBlockProps, BlockControls, InspectorControls, RichText } from '@wordpress/block-editor'; export default ( props ) => { const { attributes, setAttributes, context } = props; const blockProps = useBlockProps(); - const mainEleRef = useRef(); - // retrieve needed wp data - const {customImage, post, postTitle, postExcerpt, postImage} = SelectUtils.card(attributes); - let customPostImage = post && post.meta ? post.meta.ucd_thumbnail_1x1 : 0; - customPostImage = SelectUtils.image(customPostImage); - - // Listen to changes in component body - const onMainEleUpdated = (e) => { - const propName = e.detail.propName; - const propValue = e.detail.propValue; + const onTextUpdate = (propName, propValue) => { let reset = false; if ( propName === 'title'){ if (postTitle && !propValue ) return; @@ -26,24 +15,16 @@ export default ( props ) => { if (postExcerpt && !propValue ) return; if ( propValue === postExcerpt ) reset = true; } - + const newAttrs = {}; newAttrs[propName] = reset ? "" : propValue; setAttributes(newAttrs); - } - useEffect(() => { - let mainEle = null; - if ( mainEleRef.current ) { - mainEleRef.current.addEventListener('updated', onMainEleUpdated); - mainEle = mainEleRef.current; - } - return () => { - if ( mainEle ) { - mainEle.removeEventListener('updated', onMainEleUpdated); - } - }; - }); + + // retrieve needed wp data + const {customImage, post, postTitle, postExcerpt, postImage} = SelectUtils.card(attributes); + let customPostImage = post && post.meta ? post.meta.ucd_thumbnail_1x1 : 0; + customPostImage = SelectUtils.image(customPostImage); // set up image picker const onSelectImage = (image) => { @@ -66,7 +47,7 @@ export default ( props ) => { const postParts = (() => { return [ {slug: "thumbnail", isDisabled: !attributes.imageId || !postImage}, - {slug: 'title', isDisabled: !attributes.title}, + {slug: 'title', isDisabled: !attributes.title}, {slug: 'excerpt', isDisabled: !attributes.excerpt}] })(); @@ -95,39 +76,25 @@ export default ( props ) => { return value; })(); - const mainEleProps = () => { - let p = {ref: mainEleRef}; - - if ( attributes.href || post ) p.href = attributes.href ? attributes.href : post.link; - if ( attributes.hideImage) p['hide-image'] = "true"; - - if ( attributes.title ){ - p.title = attributes.title; - } else if ( postTitle ){ - p.title = postTitle; - } else {p.title = ""} - - if ( attributes.excerpt ){ - p.excerpt = attributes.excerpt; - } else if ( postExcerpt ){ - p.excerpt = postExcerpt; - } else {p.excerpt = ""} - - if ( context['media-links/hideImage'] ){ - p['hide-image'] = true; - } + const hideImage = attributes.hideImage || context['media-links/hideImage'] || false; - if ( customImage ) { - p['img-src'] = customImage.source_url; - } else if ( customPostImage ){ - p['img-src'] = customPostImage.source_url; - } else if ( postImage ){ - p['img-src'] = postImage.source_url; - } else { - p['img-src'] = BlockSettings.getImage('media-link'); - } - - return p + let title = ''; + if ( attributes.title ){ + title = attributes.title; + } else if ( postTitle ){ + title = postTitle; + } + let excerpt = ''; + if ( attributes.excerpt ){ + excerpt = attributes.excerpt; + } else if ( postExcerpt ){ + excerpt = postExcerpt; + } + let imgSrc = BlockSettings.getImage('media-link'); + if ( customImage ) { + imgSrc = customImage.source_url; + } else if ( postImage ){ + imgSrc = postImage.source_url; } return html` @@ -142,7 +109,7 @@ export default ( props ) => { `} <${InspectorControls}> - <${ImagePicker} + <${ImagePicker} imageId=${attributes.imageId} image=${customImage} onSelect=${onSelectImage} @@ -153,11 +120,36 @@ export default ( props ) => { panelAttributes=${{title: 'Custom Image'}} /> - -
-
- + + ${ !hideImage && html` +
+
+
+ `} +
+

+ <${RichText} + tagName="span" + value=${title} + onChange=${(value) => onTextUpdate('title', value)} + withoutInteractiveFormatting + allowedFormats=${[]} + placeholder="Write a title..." + /> +

+

+ <${RichText} + tagName="span" + value=${excerpt} + onChange=${(value) => onTextUpdate('excerpt', value)} + withoutInteractiveFormatting + allowedFormats=${[]} + placeholder="Write text..." + /> +

+
+ `; -}; \ No newline at end of file +}; diff --git a/src/editor/lib/blocks/ucd-theme-media-link/ucd-wp-media-link.js b/src/editor/lib/blocks/ucd-theme-media-link/ucd-wp-media-link.js deleted file mode 100644 index e04eb7f..0000000 --- a/src/editor/lib/blocks/ucd-theme-media-link/ucd-wp-media-link.js +++ /dev/null @@ -1,51 +0,0 @@ -import { LitElement } from 'lit'; -import {render, styles} from "./ucd-wp-media-link.tpl.js"; - -import { MainComponentElement, Mixin } from '../../utils'; - -export default class UcdWpMediaLink extends Mixin(LitElement) -.with(MainComponentElement) { - - static get properties() { - return { - href: {type: String}, - imgSrc: {type: String, attribute: "img-src"}, - hideImage: {type: Boolean, attribute: "hide-image"}, - title: {type: String}, - excerpt: {type: String} - } - } - - static get styles() { - return styles(); - } - - constructor() { - super(); - this.render = render.bind(this); - - this.href = ""; - this.imgSrc = ""; - this.title = ""; - this.excerpt = ""; - this.hideImage = false; - } - - updated(props){ - this.updateSlotContent(props, 'title', 'title-slot'); - this.updateSlotContent(props, 'excerpt', 'excerpt-slot'); - } - - _onTitleInput(e){ - this.title = e.target.textContent || ""; - this.dispatchUpdate('title'); - } - - _onExcerptInput(e){ - this.excerpt = e.target.textContent || ""; - this.dispatchUpdate('excerpt'); - } - -} - -customElements.define('ucd-wp-media-link', UcdWpMediaLink); \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-media-link/ucd-wp-media-link.tpl.js b/src/editor/lib/blocks/ucd-theme-media-link/ucd-wp-media-link.tpl.js deleted file mode 100644 index ad8a641..0000000 --- a/src/editor/lib/blocks/ucd-theme-media-link/ucd-wp-media-link.tpl.js +++ /dev/null @@ -1,69 +0,0 @@ -import { html, css } from 'lit'; - -import headingsStyles from "@ucd-lib/theme-sass/1_base_html/_headings.css.js"; -import mediaLinkStyles from "@ucd-lib/theme-sass/4_component/_wysiwyg-media-link.css"; -import aspectStyles from "@ucd-lib/theme-sass/6_utility/_u-aspect.css.js"; - -export function styles() { - const elementStyles = css` - :host { - display: block; - } - .u-background-image { - background-size: cover; - background-position: center; - background-repeat: no-repeat; - } - .show-placeholder:before { - content: attr(placeholder); - position: absolute; - pointer-events: none; - opacity: .6; - } - .media-link__figure { - width: 20%; - - } - `; - - return [ - headingsStyles, - mediaLinkStyles, - aspectStyles, - elementStyles - ]; -} - -export function render() { -return html` - - ${ !this.hideImage ? html` -
-
-
- - ` : html``} -
-

- ${this.title} -

-

- ${this.excerpt} -

-
- - -`;} \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-media-links/index.js b/src/editor/lib/blocks/ucd-theme-media-links/index.js index c4017de..c784d33 100644 --- a/src/editor/lib/blocks/ucd-theme-media-links/index.js +++ b/src/editor/lib/blocks/ucd-theme-media-links/index.js @@ -1,6 +1,5 @@ -import { UCDIcons } from "../../utils"; +import { UCDIcons, Save } from "../../utils"; import Edit from './edit'; -import Save from "./save"; const name = 'ucd-theme/media-links'; const settings = { @@ -25,4 +24,4 @@ const settings = { save: Save, }; -export default { name, settings }; \ No newline at end of file +export default { name, settings }; diff --git a/src/editor/lib/blocks/ucd-theme-media-links/save.js b/src/editor/lib/blocks/ucd-theme-media-links/save.js deleted file mode 100644 index 67fd8fc..0000000 --- a/src/editor/lib/blocks/ucd-theme-media-links/save.js +++ /dev/null @@ -1,8 +0,0 @@ -import { html } from "../../utils"; -import { InnerBlocks } from '@wordpress/block-editor'; - -export default ( props ) => { - return html` - <${InnerBlocks.Content} /> - `; - } \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-object-box/index.js b/src/editor/lib/blocks/ucd-theme-object-box/index.js index 319e902..f424a54 100644 --- a/src/editor/lib/blocks/ucd-theme-object-box/index.js +++ b/src/editor/lib/blocks/ucd-theme-object-box/index.js @@ -1,6 +1,5 @@ -import { UCDIcons } from "../../utils"; +import { UCDIcons, Save } from "../../utils"; import Edit from './edit'; -import Save from "./save"; const name = 'ucd-theme/object-box'; const settings = { diff --git a/src/editor/lib/blocks/ucd-theme-object-box/save.js b/src/editor/lib/blocks/ucd-theme-object-box/save.js deleted file mode 100644 index 67fd8fc..0000000 --- a/src/editor/lib/blocks/ucd-theme-object-box/save.js +++ /dev/null @@ -1,8 +0,0 @@ -import { html } from "../../utils"; -import { InnerBlocks } from '@wordpress/block-editor'; - -export default ( props ) => { - return html` - <${InnerBlocks.Content} /> - `; - } \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-poster-list/index.js b/src/editor/lib/blocks/ucd-theme-poster-list/index.js index 9d844a1..2ecd60e 100644 --- a/src/editor/lib/blocks/ucd-theme-poster-list/index.js +++ b/src/editor/lib/blocks/ucd-theme-poster-list/index.js @@ -1,6 +1,5 @@ -import { UCDIcons } from "../../utils"; +import { UCDIcons, Save } from "../../utils"; import Edit from './edit'; -import Save from "./save"; const name = 'ucd-theme/poster-list'; const settings = { @@ -20,4 +19,4 @@ const settings = { save: Save }; -export default { name, settings }; \ No newline at end of file +export default { name, settings }; diff --git a/src/editor/lib/blocks/ucd-theme-poster-list/save.js b/src/editor/lib/blocks/ucd-theme-poster-list/save.js deleted file mode 100644 index 67fd8fc..0000000 --- a/src/editor/lib/blocks/ucd-theme-poster-list/save.js +++ /dev/null @@ -1,8 +0,0 @@ -import { html } from "../../utils"; -import { InnerBlocks } from '@wordpress/block-editor'; - -export default ( props ) => { - return html` - <${InnerBlocks.Content} /> - `; - } \ No newline at end of file diff --git a/src/editor/lib/blocks/ucd-theme-poster/edit.js b/src/editor/lib/blocks/ucd-theme-poster/edit.js index ebb3db7..a1ff2e5 100644 --- a/src/editor/lib/blocks/ucd-theme-poster/edit.js +++ b/src/editor/lib/blocks/ucd-theme-poster/edit.js @@ -1,24 +1,14 @@ import { html, BlockSettings, SelectUtils } from "../../utils"; import { ImagePicker, ToolbarColorPicker, ToolbarPostReset, ToolbarLinkPicker } from "../../block-components"; -import "./ucd-wp-poster"; -import { useRef, useEffect } from "@wordpress/element"; -import { useBlockProps, BlockControls, InspectorControls } from '@wordpress/block-editor'; +import { useBlockProps, BlockControls, InspectorControls, RichText } from '@wordpress/block-editor'; + +import classnames from 'classnames'; export default ( props ) => { const { attributes, setAttributes } = props; const blockProps = useBlockProps({className: "vm-poster"}); - const mainEleRef = useRef(); - - // retrieve needed wp data - const {customImage, post, postTitle, postExcerpt, postImage} = SelectUtils.card(attributes); - let customPostImage = post && post.meta ? post.meta.ucd_thumbnail_4x3 : 0; - customPostImage = SelectUtils.image(customPostImage); - - // Listen to changes in component body - const onMainEleUpdated = (e) => { - const propName = e.detail.propName; - const propValue = e.detail.propValue; + const onTextUpdate = (propName, propValue) => { let reset = false; if ( propName === 'title'){ if (postTitle && !propValue ) return; @@ -27,24 +17,16 @@ export default ( props ) => { if (postExcerpt && !propValue ) return; if ( propValue === postExcerpt ) reset = true; } - + const newAttrs = {}; newAttrs[propName] = reset ? "" : propValue; setAttributes(newAttrs); - } - useEffect(() => { - let mainEle = null; - if ( mainEleRef.current ) { - mainEleRef.current.addEventListener('updated', onMainEleUpdated); - mainEle = mainEleRef.current; - } - return () => { - if ( mainEle ) { - mainEle.removeEventListener('updated', onMainEleUpdated); - } - }; - }); + + // retrieve needed wp data + const {customImage, post, postTitle, postExcerpt, postImage} = SelectUtils.card(attributes); + let customPostImage = post && post.meta ? post.meta.ucd_thumbnail_4x3 : 0; + customPostImage = SelectUtils.image(customPostImage); // set up link picker const onHrefChange = (value) => { @@ -92,46 +74,39 @@ export default ( props ) => { const postParts = (() => { return [ {slug: "thumbnail", isDisabled: !attributes.imageId || !postImage}, - {slug: 'title', isDisabled: !attributes.title}, + {slug: 'title', isDisabled: !attributes.title}, {slug: 'excerpt', isDisabled: !attributes.excerpt}] })(); - const mainEleProps = () => { - let p = {ref: mainEleRef}; - - if ( attributes.href || post ) p.href = attributes.href ? attributes.href : post.link; - if ( attributes.brandColor ) p.color = attributes.brandColor; - - if ( attributes.title ){ - p.title = attributes.title; - } else if ( postTitle ){ - p.title = postTitle; - } else {p.title = ""} - - if ( attributes.excerpt ){ - p.excerpt = attributes.excerpt; - } else if ( postExcerpt ){ - p.excerpt = postExcerpt; - } else {p.excerpt = ""} - - if ( customImage ) { - p['img-src'] = customImage.source_url; - } else if ( customPostImage ){ - p['img-src'] = customPostImage.source_url; - } else if ( postImage ){ - p['img-src'] = postImage.source_url; - } else { - p['img-src'] = BlockSettings.getImage('poster'); - } - - return p; + let title = ''; + if ( attributes.title ){ + title = attributes.title; + } else if ( postTitle ){ + title = postTitle; + } + let excerpt = ''; + if ( attributes.excerpt ){ + excerpt = attributes.excerpt; + } else if ( postExcerpt ){ + excerpt = postExcerpt; + } + let imgSrc = BlockSettings.getImage('poster'); + if ( customImage ) { + imgSrc = customImage.source_url; + } else if ( postImage ){ + imgSrc = postImage.source_url; } + const classes = classnames({ + "vm-poster": true, + [`category-brand--${attributes.brandColor}`]: attributes.brandColor + }); + return html`
<${BlockControls} group="block"> <${ToolbarLinkPicker} onChange=${onHrefChange} value=${hrefContent} /> - <${ToolbarColorPicker} + <${ToolbarColorPicker} onChange=${onColorChange} value=${attributes.brandColor} ucdBlock="poster" @@ -144,7 +119,7 @@ export default ( props ) => { `} <${InspectorControls}> - <${ImagePicker} + <${ImagePicker} imageId=${attributes.imageId} image=${customImage} onSelect=${onSelectImage} @@ -155,11 +130,35 @@ export default ( props ) => { panelAttributes=${{title: 'Custom Card Image'}} /> - -
-
- - + + +
+
+
+

+ <${RichText} + tagName="span" + value=${title} + onChange=${(v) => onTextUpdate('title', v)} + withoutInteractiveFormatting + allowedFormats=${[]} + placeholder="Write a title..." + /> +

+

+ <${RichText} + tagName="span" + value=${excerpt} + onChange=${(v) => onTextUpdate('excerpt', v)} + withoutInteractiveFormatting + allowedFormats=${[]} + placeholder="Write a summary..." + /> +

+
+
+ +
`; -} \ No newline at end of file +} diff --git a/src/editor/lib/blocks/ucd-theme-query/edit.js b/src/editor/lib/blocks/ucd-theme-query/edit.js index 1a08f71..7bf0a55 100644 --- a/src/editor/lib/blocks/ucd-theme-query/edit.js +++ b/src/editor/lib/blocks/ucd-theme-query/edit.js @@ -3,7 +3,6 @@ import { AuthorPicker, TermPicker, DebouncedText, OrderPicker } from "../../bloc import { useBlockProps, BlockControls, InspectorControls } from '@wordpress/block-editor'; import { RangeControl, PanelBody, SelectControl, Spinner } from '@wordpress/components'; import { decodeEntities } from "@wordpress/html-entities"; -import "../ucd-theme-media-link/ucd-wp-media-link"; export default ( props ) => { const { attributes, setAttributes } = props; @@ -22,7 +21,7 @@ export default ( props ) => { }; if ( attributes.author ) q.author = attributes.author; if ( attributes.search ) q.search = attributes.search; - + for (const tax in attributes.terms) { const v = attributes.terms[tax].join(","); if ( !v ) continue; @@ -46,7 +45,7 @@ export default ( props ) => { const { postTypesTaxonomiesMap, postTypesSelectOptions } = SelectUtils.postTypes(); - + // get all taxonomies registered to the selected post type(s) const taxonomies = []; if ( postTypesTaxonomiesMap && attributes.postType ) { @@ -61,7 +60,7 @@ export default ( props ) => { }); } - + const onPostTypeChange = ( postType ) => { const terms = {}; postTypesTaxonomiesMap[postType].forEach(taxonomy => { @@ -73,36 +72,42 @@ export default ( props ) => { const onTermChange = ( v ) => { const terms = { - ...attributes.terms, + ...attributes.terms, [ v.taxonomy ]: v.terms }; setAttributes({terms}) } + const renderMediaLink = (post, i) => { - const postProps = (post, i) => { - let p = {key: i}; + let title = ''; + let excerpt = ''; + let imgSrc = BlockSettings.getImage('media-link'); if ( post ){ - p.href = post.link; - p.title = decodeEntities(post.title.rendered); - + title = decodeEntities(post.title.rendered); if ( post.excerpt ){ - p.excerpt = post.excerpt.rendered.replace(/(<([^>]+)>)/gi, "").replace(" […]", "..."); - p.excerpt = decodeEntities(p.excerpt).replace(/(?:\r\n|\r|\n)/g, ''); + excerpt = post.excerpt.rendered.replace(/(<([^>]+)>)/gi, "").replace(" […]", "..."); + excerpt = decodeEntities(excerpt).replace(/(?:\r\n|\r|\n)/g, ''); } - if ( post.customImage ) { - p['img-src'] = post.customImage.source_url; + imgSrc = post.customImage.source_url; }else if ( post.image ) { - p['img-src'] = post.image.source_url; - } else { - p['img-src'] = BlockSettings.getImage('media-link'); + imgSrc = post.image.source_url; } } - return p - } + return html` + +
+
+
+
+

${title}

+

${excerpt}

+
+ `; + }; return html`
@@ -116,18 +121,18 @@ export default ( props ) => { label='Post Type' onChange=${ onPostTypeChange } /> - <${AuthorPicker} + <${AuthorPicker} value=${attributes.author} onChange=${(author) => setAttributes({author})} /> ${taxonomies.map(t => html` - <${TermPicker} - key=${t} + <${TermPicker} + key=${t} onChange=${onTermChange} value=${attributes.terms[t]} taxonomy=${t}/> `)} - <${DebouncedText} + <${DebouncedText} label="Keyword" value=${attributes.search} onChange=${(search) => setAttributes({search})} @@ -135,12 +140,12 @@ export default ( props ) => { <${PanelBody} title="Display"> - <${OrderPicker} + <${OrderPicker} value=${{order: attributes.order, orderBy: attributes.orderBy}} onChange=${(v) => setAttributes(v)} postType=${postType} /> - <${RangeControl} + <${RangeControl} label="Number of posts" value=${attributes.postCt} onChange=${(postCt) => setAttributes({postCt})} @@ -153,10 +158,8 @@ export default ( props ) => { ${!posts.length && html` <${Spinner} /> `} - ${posts.map((p, i) => html` - - `)} + ${posts.map((p, i) => renderMediaLink(p, i))}
`; -}; \ No newline at end of file +}; diff --git a/src/public/scss/temp.scss b/src/public/scss/temp.scss index d2357d1..bf30b96 100644 --- a/src/public/scss/temp.scss +++ b/src/public/scss/temp.scss @@ -467,8 +467,10 @@ hr.y2 { background-color: var(--category-brand, #fff); opacity: var(--layout-section-colored-film-opacity, 0.25); } -.layout-section--force-contrast ucdlib-icon { - color: var(--forced-contrast, inherit) !important; +.layout-section--force-contrast { + :where(.panel__title, .icon-ucdlib) ucdlib-icon { + color: var(--forced-contrast, inherit) !important; + } } .layout-section--non-brand-light { --panel-bg: transparent;