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"
/>
${BlockControls}>
- <${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`
@@ -44,14 +45,14 @@ return html`
${!this.hideText ? html`
- ${this.text}
` : 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'" : "" %}