diff --git a/src/editor/lib/blocks/ucd-theme-priority-link/edit.js b/src/editor/lib/blocks/ucd-theme-priority-link/edit.js index ed0e76c..9a61c7f 100644 --- a/src/editor/lib/blocks/ucd-theme-priority-link/edit.js +++ b/src/editor/lib/blocks/ucd-theme-priority-link/edit.js @@ -1,8 +1,9 @@ -import { html } from "../../utils"; +import { html, UCDIcons } from "../../utils"; import "./ucd-wp-priority-link"; import { ToolbarColorPicker, ToolbarLinkPicker, IconPicker } from "../../block-components"; import { useBlockProps, BlockControls } from '@wordpress/block-editor'; import { useRef, useEffect, createRef } from "@wordpress/element"; +import { ToolbarButton } from "@wordpress/components"; export default ( props ) => { @@ -46,6 +47,7 @@ export default ( props ) => { if ( attributes.brandColor ) p.color = attributes.brandColor; if ( attributes.icon ) p.icon = attributes.icon; if ( attributes.text ) p.text = attributes.text; + if ( attributes.tiltCircle ) p['tilt-circle'] = true; return p; } @@ -67,7 +69,7 @@ export default ( props ) => { attrs.postId = value.id; } else if ( value.kind == 'taxonomy' ) { - attrs.taxId = value.id + attrs.taxId = value.id } setAttributes(attrs); } @@ -75,7 +77,7 @@ export default ( props ) => { let value = {opensInNewTab: attributes.newTab, url: ""}; if ( attributes.href ) { value.url = attributes.href; - } + } return value; })(); @@ -88,13 +90,19 @@ export default ( props ) => {
<${BlockControls} group="block"> <${ToolbarLinkPicker} onChange=${onHrefChange} value=${hrefContent} /> - <${ToolbarColorPicker} - onChange=${onColorChange} - value=${attributes.brandColor} - ucdBlock="priority-link" + <${ToolbarColorPicker} + onChange=${onColorChange} + value=${attributes.brandColor} + ucdBlock="priority-link" + /> + <${ToolbarButton} + icon=${UCDIcons.renderPublic("fa-rotate-right")} + onClick=${ () => {setAttributes({'tiltCircle': !attributes.tiltCircle})}} + isPressed=${attributes.tiltCircle} + label="Toggle 'Tilt Circle' Modifier" /> - <${IconPicker} + <${IconPicker} ref=${iconPickerRef} onChange=${onIconSelect} selectedIcon=${attributes.icon} @@ -104,4 +112,4 @@ export default ( props ) => {
` -} \ No newline at end of file +} diff --git a/src/editor/lib/blocks/ucd-theme-priority-link/index.js b/src/editor/lib/blocks/ucd-theme-priority-link/index.js index b2dc007..7f5e8ee 100644 --- a/src/editor/lib/blocks/ucd-theme-priority-link/index.js +++ b/src/editor/lib/blocks/ucd-theme-priority-link/index.js @@ -45,9 +45,13 @@ const settings = { hideText: { type: "boolean", default: false + }, + tiltCircle: { + type: "boolean", + default: false } }, edit: Edit }; -export default { name, settings }; \ No newline at end of file +export default { name, settings }; diff --git a/src/editor/lib/blocks/ucd-theme-priority-link/ucd-wp-priority-link.js b/src/editor/lib/blocks/ucd-theme-priority-link/ucd-wp-priority-link.js index 81a51b7..4692084 100644 --- a/src/editor/lib/blocks/ucd-theme-priority-link/ucd-wp-priority-link.js +++ b/src/editor/lib/blocks/ucd-theme-priority-link/ucd-wp-priority-link.js @@ -11,7 +11,8 @@ export default class UcdWpPriorityLink extends Mixin(LitElement) color: {type: String}, icon: {type: String}, text: {type: String}, - hideText: {type: Boolean, attribute: 'hide-text'} + hideText: {type: Boolean, attribute: 'hide-text'}, + tiltCircle: {type: Boolean, attribute: 'tilt-circle'} } } @@ -34,10 +35,14 @@ export default class UcdWpPriorityLink extends Mixin(LitElement) _getBaseClasses(){ let classes = { - "vertical-link": true, - "vertical-link--circle": true + "vertical-link": true }; classes[`category-brand--${this.color}`] = this.color ? true : false; + if ( this.tiltCircle ) { + classes['vertical-link--tilt-circle'] = true; + } else { + classes['vertical-link--circle'] = true; + } return classes; } @@ -53,4 +58,4 @@ export default class UcdWpPriorityLink extends Mixin(LitElement) } -customElements.define('ucd-wp-priority-link', UcdWpPriorityLink); \ No newline at end of file +customElements.define('ucd-wp-priority-link', UcdWpPriorityLink); diff --git a/src/editor/lib/blocks/ucd-theme-priority-link/ucd-wp-priority-link.tpl.js b/src/editor/lib/blocks/ucd-theme-priority-link/ucd-wp-priority-link.tpl.js index 36ec4b1..d40c5af 100644 --- a/src/editor/lib/blocks/ucd-theme-priority-link/ucd-wp-priority-link.tpl.js +++ b/src/editor/lib/blocks/ucd-theme-priority-link/ucd-wp-priority-link.tpl.js @@ -14,6 +14,7 @@ export function styles() { } ucdlib-icon { height: 50%; + width: 50%; } .show-placeholder:before { content: attr(placeholder); @@ -32,7 +33,7 @@ export function styles() { ]; } -export function render() { +export function render() { return html` ${!this.hideText ? html` ` : html``} -`;} \ No newline at end of file +`;} diff --git a/src/public/scss/temp.scss b/src/public/scss/temp.scss index d393c89..9772fce 100644 --- a/src/public/scss/temp.scss +++ b/src/public/scss/temp.scss @@ -197,8 +197,11 @@ a.icon--circle-arrow-right::before { } // for priority links -.vertical-link--circle ucdlib-icon.vertical-link__image { +.vertical-link--circle ucdlib-icon.vertical-link__image, +.vertical-link--tilt-circle ucdlib-icon.vertical-link__image + { height: 50%; + width: 50%; } // for focal link diff --git a/views/macros/links.twig b/views/macros/links.twig index ef4b828..f554041 100644 --- a/views/macros/links.twig +++ b/views/macros/links.twig @@ -239,10 +239,15 @@ kwargs: newTab {Boolean} - If link opens in new tab #} {% macro priority_link( kwargs={} ) %} - {% set classes = ['vertical-link', 'vertical-link--circle'] %} + {% set classes = ['vertical-link'] %} {% if kwargs.brandColor %} {% set classes = classes|merge(['category-brand--' ~ kwargs.brandColor]) %} {% endif %} + {% if kwargs.tiltCircle %} + {% set classes = classes|merge(['vertical-link--tilt-circle']) %} + {% else %} + {% set classes = classes|merge(['vertical-link--circle']) %} + {% endif %} {% set classes = classes|join(' ') %} {% set target = kwargs.newTab ? "target='_blank'" : "" %}