diff --git a/src/editor/lib/blocks/index.js b/src/editor/lib/blocks/index.js index b6b2cee..dee04bc 100644 --- a/src/editor/lib/blocks/index.js +++ b/src/editor/lib/blocks/index.js @@ -6,6 +6,7 @@ import career from "./ucd-theme-career"; import careers from "./ucd-theme-careers"; import categoryFilter from "./ucd-theme-category-filter"; import contactList from "./ucd-theme-contact-list"; +import factoid from "./ucd-theme-factoid"; import faq from "./ucd-theme-faq"; import faqItem from "./ucd-theme-faq-item"; import featuredArticle from "./ucd-theme-featured-article"; @@ -65,6 +66,7 @@ export default [ careers, categoryFilter, contactList, + factoid, faq, faqItem, featuredArticle, diff --git a/src/editor/lib/blocks/ucd-theme-factoid/edit.js b/src/editor/lib/blocks/ucd-theme-factoid/edit.js new file mode 100644 index 0000000..96f1c3b --- /dev/null +++ b/src/editor/lib/blocks/ucd-theme-factoid/edit.js @@ -0,0 +1,141 @@ +import { html, UCDIcons } from "../../utils"; +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"; + +import classnames from 'classnames'; + + +export default ( props ) => { + const { attributes, setAttributes } = props; + const blockProps = useBlockProps(); + const iconPickerRef = createRef(); + + + const onIconClick = () => { + if ( iconPickerRef.current ) { + iconPickerRef.current.openModal(); + } + } + + // set up icon picker + const onIconSelect = (icon) => { + setAttributes({icon: `${icon.iconSet}:${icon.icon}`}) + } + + // set up link picker + const onHrefChange = (value) => { + let attrs = { + href: value.url, + newTab: value.opensInNewTab ? true : false, + postId: 0, + taxId: 0 + } + if ( value.kind == 'post-type' ){ + attrs.postId = value.id; + } + else if ( value.kind == 'taxonomy' ) { + attrs.taxId = value.id + } + setAttributes(attrs); + } + const hrefContent = (() => { + let value = {opensInNewTab: attributes.newTab, url: ""}; + if ( attributes.href ) { + value.url = attributes.href; + } + return value; + })(); + + // set up color picker + const onColorChange = (value) => { + setAttributes( {brandColor: value ? value.slug : "" } ); + } + + const classes = classnames({ + 'factoid': true, + [`category-brand--${attributes.brandColor}`]: attributes.brandColor, + 'factoid--brackets': attributes.brackets + }) + + return html` +
+ <${BlockControls} group="block"> + <${ToolbarLinkPicker} onChange=${onHrefChange} value=${hrefContent} /> + <${ToolbarColorPicker} + onChange=${onColorChange} + value=${attributes.brandColor} + ucdBlock="priority-link" + /> + <${ToolbarButton} + icon=${UCDIcons.renderPublic("fa-right-to-bracket")} + onClick=${ () => {setAttributes({'brackets': !attributes.brackets})}} + isPressed=${attributes.brackets} + label="Toggle 'Brackets' Modifier" + /> + + <${IconPicker} + ref=${iconPickerRef} + onChange=${onIconSelect} + selectedIcon=${attributes.icon} + > + + + +
+ +
+
+
+ +
+
+

+ setAttributes({bigText: e.target.value})} /> +

+

+ +

+
+
+
+ +
+ +
+ ` +} diff --git a/src/editor/lib/blocks/ucd-theme-factoid/index.js b/src/editor/lib/blocks/ucd-theme-factoid/index.js new file mode 100644 index 0000000..5da7bc2 --- /dev/null +++ b/src/editor/lib/blocks/ucd-theme-factoid/index.js @@ -0,0 +1,57 @@ +import { UCDIcons } from "../../utils"; +import Edit from './edit'; + +const name = 'ucd-theme/factoid'; +const settings = { + api_version: 2, + title: "Factoid", + description: "Highlight a fact or statistic with an icon and color.", + icon: UCDIcons.renderPublic('fa-percent'), + category: 'ucd-links', + keywords: [ 'link', 'icon', 'color' ], + supports: { + "html": false, + "customClassName": false + }, + attributes: { + bigText: { + type: 'string', + default: '' + }, + smallText: { + type: 'string', + default: '' + }, + href: { + type: 'string', + default: '' + }, + postId: { + type: 'number', + default: 0 + }, + taxId: { + type: 'number', + default: 0 + }, + newTab: { + type: "boolean", + default: false + }, + icon: { + type: 'string', + default: 'ucd-public:fa-percent' + }, + brandColor: { + type: "string", + default: "" + }, + brackets: { + type: "boolean", + default: false + } + }, + edit: Edit +}; + +export default { name, settings }; diff --git a/src/editor/lib/blocks/ucd-theme-photo-card/edit.js b/src/editor/lib/blocks/ucd-theme-photo-card/edit.js index 6365c27..ac4f44f 100644 --- a/src/editor/lib/blocks/ucd-theme-photo-card/edit.js +++ b/src/editor/lib/blocks/ucd-theme-photo-card/edit.js @@ -130,7 +130,7 @@ export default ( props ) => { <${ToolbarColorPicker} onChange=${onColorChange} value=${attributes.brandColor} - ucdBlock="tile-link" + ucdBlock="photo-card" /> <${ToolbarSectionDisplay} sections=${cardSections} diff --git a/src/public/scss/temp.scss b/src/public/scss/temp.scss index 7dc075a..b06820c 100644 --- a/src/public/scss/temp.scss +++ b/src/public/scss/temp.scss @@ -424,4 +424,18 @@ hr.y2 { transition: all .3s ease-in-out; } +// factoid +.factoid__icon { + + display: flex; + justify-content: center; + + ucdlib-icon { + width: 2em; + height: 2em; + min-width: 2em; + min-height: 2em; + } +} + diff --git a/theme/includes/classes/block-transformations.php b/theme/includes/classes/block-transformations.php index 702ae24..373ae79 100644 --- a/theme/includes/classes/block-transformations.php +++ b/theme/includes/classes/block-transformations.php @@ -70,6 +70,13 @@ public static function getPosts($attrs=array()){ return $attrs; } + public static function setDefaultFactoidIcon($attrs){ + if ( !array_key_exists('icon', $attrs) ) { + $attrs['icon'] = 'ucd-public:fa-percent'; + } + return $attrs; + } + /** * If page is in primary nav, returns its children * If page is part of hierarchy, return its children diff --git a/theme/includes/classes/blocks.php b/theme/includes/classes/blocks.php index 22675ea..4655cc8 100644 --- a/theme/includes/classes/blocks.php +++ b/theme/includes/classes/blocks.php @@ -67,6 +67,11 @@ function __construct($editor_script_slug, $settings=array()) { "twig" => "@ucd/blocks/contact-list.twig", "transform" => array("formatContactList") ), + "ucd-theme/factoid" => array( + "twig" => "@ucd/blocks/factoid.twig", + "hasBrandColors" => true, + "transform" => array("getPermalink", "setDefaultFactoidIcon") + ), "ucd-theme/faq" => array( "twig" => "@ucd/blocks/faq.twig", "transform" => array("addSpacing") diff --git a/theme/includes/classes/customizer.php b/theme/includes/classes/customizer.php index d105bc6..154fda0 100644 --- a/theme/includes/classes/customizer.php +++ b/theme/includes/classes/customizer.php @@ -346,7 +346,9 @@ public function colors($wp_customize){ array("slug" => "heading-with-icon", "label" => "Heading With Icon Palette"), array("slug" => "separator", "label" => "Separator Palette"), array("slug" => "object-box", "label" => "Object Box Border Palette"), - array("slug" => "tile-link", "label" => "Tile Link Palette") + array("slug" => "tile-link", "label" => "Tile Link Palette"), + ['slug' => 'factoid', 'label' => 'Factoid Palette'], + ['slug' => 'photo-card', 'label' => 'Photo Card Palette'] ); $blocks_with_colors = apply_filters( 'ucd-theme/customizer/block-colors', $blocks_with_colors ); foreach ($blocks_with_colors as $block) { diff --git a/views/blocks/factoid.twig b/views/blocks/factoid.twig new file mode 100644 index 0000000..5a2bfae --- /dev/null +++ b/views/blocks/factoid.twig @@ -0,0 +1,5 @@ +{% from getUcdMacro('links') import factoid %} +{% if attributes.permalink %} + {% set attributes = attributes|merge({'href': attributes.permalink}) %} +{% endif %} +{{ factoid(attributes) }} diff --git a/views/macros/links.twig b/views/macros/links.twig index 9e2580a..7e1ca2c 100644 --- a/views/macros/links.twig +++ b/views/macros/links.twig @@ -268,6 +268,47 @@ kwargs: {% endmacro %} +{# +http://webstyleguide.ucdavis.edu/?p=molecules-factoid-brackets +kwargs: + href {String}: link + icon {String}: icon parameter of a ucdlib-icon element + bigText {String}: Text to display below icon + smallText {String}: Text to display below bigText + brandColor {String} - UCD alt color slug + newTab {Boolean} - If link opens in new tab + brackets {Boolean} - If true, the icon will be displayed in brackets +#} +{% macro factoid( kwargs={} ) %} + {% set classes = ['factoid'] %} + {% if kwargs.brandColor %} + {% set classes = classes|merge(['category-brand--' ~ kwargs.brandColor]) %} + {% endif %} + {% if kwargs.brackets %} + {% set classes = classes|merge(['factoid--brackets']) %} + {% endif %} + {% set classes = classes|join(' ') %} + + {% set target = kwargs.newTab ? "target='_blank'" : "" %} + {% set icon = kwargs.icon ? kwargs.icon : 'ucd-public:fa-percent' %} + +
+ +
+
+
+ +
+
+

{{kwargs.bigText}}

+

{{kwargs.smallText}}

+
+
+
+ +
+{% endmacro %} + {# http://dev.webstyleguide.ucdavis.edu/redesign/?p=molecules-focal-link-icon kwargs: