From 0d0d8d8c0dc9b56cc5a2b718d258d4d17e9fca70 Mon Sep 17 00:00:00 2001 From: spelkey-ucd Date: Fri, 9 Feb 2024 15:44:59 -0500 Subject: [PATCH] #275 --- src/editor/lib/blocks/index.js | 2 + .../lib/blocks/ucd-theme-photo-card/edit.js | 182 ++++++++++++++++++ .../lib/blocks/ucd-theme-photo-card/index.js | 49 +++++ src/public/scss/temp.scss | 8 + theme/includes/classes/blocks.php | 6 + views/blocks/photo-card.twig | 5 + views/macros/cards.twig | 68 +++++++ 7 files changed, 320 insertions(+) create mode 100644 src/editor/lib/blocks/ucd-theme-photo-card/edit.js create mode 100644 src/editor/lib/blocks/ucd-theme-photo-card/index.js create mode 100644 views/blocks/photo-card.twig diff --git a/src/editor/lib/blocks/index.js b/src/editor/lib/blocks/index.js index 09a6096..b6b2cee 100644 --- a/src/editor/lib/blocks/index.js +++ b/src/editor/lib/blocks/index.js @@ -33,6 +33,7 @@ import mediaLink from "./ucd-theme-media-link"; import mediaLinks from "./ucd-theme-media-links"; import objectBox from "./ucd-theme-object-box"; import panelWithIcon from "./ucd-theme-panel-with-icon"; +import photoCard from "./ucd-theme-photo-card"; import poster from "./ucd-theme-poster"; import posterList from "./ucd-theme-poster-list"; import prefixedIconLink from "./ucd-theme-prefixed-icon-link"; @@ -91,6 +92,7 @@ export default [ mediaLinks, objectBox, panelWithIcon, + photoCard, poster, posterList, prefixedIconLink, diff --git a/src/editor/lib/blocks/ucd-theme-photo-card/edit.js b/src/editor/lib/blocks/ucd-theme-photo-card/edit.js new file mode 100644 index 0000000..6365c27 --- /dev/null +++ b/src/editor/lib/blocks/ucd-theme-photo-card/edit.js @@ -0,0 +1,182 @@ +import { + html, + BlockSettings, + SelectUtils } from "../../utils"; +import { + ImagePicker, + ToolbarColorPicker, + ToolbarPostReset, + ToolbarSectionDisplay, + ToolbarLinkPicker } from "../../block-components"; +import { + useBlockProps, + BlockControls, + InspectorControls } from '@wordpress/block-editor'; +import classnames from 'classnames'; + +export default ( props ) => { + const { attributes, setAttributes } = props; + const blockProps = useBlockProps(); + + // retrieve needed wp data + const {customImage, post, postTitle, postExcerpt, postImage} = SelectUtils.card(attributes); + let customPostImage = 0; + if ( post && post.meta ) { + if ( post.meta.ucd_thumbnail_1x1_large ) { + customPostImage = post.meta.ucd_thumbnail_1x1_large; + } else if ( post.meta.ucd_thumbnail_4x3 ) { + customPostImage = post.meta.ucd_thumbnail_4x3; + } + } + customPostImage = SelectUtils.image(customPostImage); + + // set up image picker + const onSelectImage = (image) => { + setAttributes({imageId: image.id}); + } + const onRemoveImage = () => { + setAttributes({imageId: 0}); + } + + // set up post reset + const onPostReset = (part) => { + if ( part.slug === 'title') { + setAttributes({title: ""}); + } else if (part.slug === 'thumbnail') { + setAttributes({imageId: 0}); + } + } + const postParts = (() => { + return [ + {slug: "thumbnail", isDisabled: !attributes.imageId || !postImage}, + {slug: 'title', isDisabled: !attributes.title}] + })(); + + // set up section hider + const onSectionToggle = (section) => { + let attrs = {}; + let attr = `hide${section.slug.charAt(0).toUpperCase() + section.slug.slice(1)}`; + attrs[attr] = !attributes[attr]; + setAttributes(attrs); + } + const cardSections = (() => { + return [ + {slug: "title", isHidden: attributes.hideTitle} + ] + })(); + + // set up link picker + const onHrefChange = (value) => { + setAttributes({ + href: value.kind === 'post-type' ? "" : value.url, + newTab: value.opensInNewTab ? true : false, + post: value.kind === 'post-type' ? {id: value.id, type: value.type} : {} + }); + } + const hrefContent = (() => { + let value = {opensInNewTab: attributes.newTab, url: ""}; + if ( attributes.href ) { + value.url = attributes.href; + } else if ( post && post.link ) { + value.url = post.link; + value.kind = 'post-type'; + value.type = post.type; + } + return value; + })(); + + // set up color picker + const onColorChange = (value) => { + setAttributes( {brandColor: value ? value.slug : "" } ); + } + + let imgSrc = BlockSettings.getImage('photo-card'); + if ( customImage ) { + imgSrc = customImage.source_url; + } else if ( customPostImage ){ + imgSrc = customPostImage.source_url; + } else if ( postImage ){ + imgSrc = postImage.source_url; + } + + const classes = classnames({ + 'photo-card': true, + [`category-brand--${attributes.brandColor}`]: attributes.brandColor + }) + + let title = ''; + if ( attributes.title ){ + title = attributes.title; + } else if ( postTitle ){ + title = postTitle; + } + + return html` +
+ + <${BlockControls} group="block"> + <${ToolbarLinkPicker} onChange=${onHrefChange} value=${hrefContent} /> + <${ToolbarColorPicker} + onChange=${onColorChange} + value=${attributes.brandColor} + ucdBlock="tile-link" + /> + <${ToolbarSectionDisplay} + sections=${cardSections} + onChange=${onSectionToggle} + /> + ${post && html` + <${ToolbarPostReset} + postProps=${postParts} + onChange=${onPostReset} + /> + `} + + <${InspectorControls}> + <${ImagePicker} + imageId=${attributes.imageId} + image=${customImage} + onSelect=${onSelectImage} + onRemove=${onRemoveImage} + defaultImageId=${postImage && !attributes.imageId ? postImage.id : 0} + helpText="Use a 1:1 image and at least 382px for best results" + panelAttributes=${{title: 'Custom Card Image'}} + /> + + + + +
+
+ +
+
+
+ ${(!attributes.hideTitle) && html` +

+ +

+ `} + +
+ +`; +} diff --git a/src/editor/lib/blocks/ucd-theme-photo-card/index.js b/src/editor/lib/blocks/ucd-theme-photo-card/index.js new file mode 100644 index 0000000..1ee4011 --- /dev/null +++ b/src/editor/lib/blocks/ucd-theme-photo-card/index.js @@ -0,0 +1,49 @@ +import { UCDIcons } from "../../utils"; +import Edit from './edit'; + +const name = 'ucd-theme/photo-card'; +const settings = { + api_version: 2, + title: "Photo Card", + description: "Preview content on another webpage with an image and overlayed title.", + icon: UCDIcons.renderPublic('fa-circle-right'), + category: 'ucd-cards', + keywords: ['post', 'page', "link" ], + supports: { + "html": false, + "customClassName": false + }, + attributes: { + imageId: { + type: "number", + default: 0 + }, + post: { + type: "object", + default: {} + }, + href: { + type: "string", + default: "" + }, + newTab: { + type: "boolean", + default: false + }, + brandColor: { + type: "string", + default: "primary" + }, + title: { + type: "string", + default: "" + }, + hideTitle: { + type: "boolean", + default: false + } + }, + edit: Edit, +}; + +export default { name, settings }; diff --git a/src/public/scss/temp.scss b/src/public/scss/temp.scss index 9772fce..7dc075a 100644 --- a/src/public/scss/temp.scss +++ b/src/public/scss/temp.scss @@ -416,4 +416,12 @@ hr.y2 { float: right; } +// photo card +.photo-card__image .u-background-image { + z-index: 1; + width: 100%; + height: auto; + transition: all .3s ease-in-out; +} + diff --git a/theme/includes/classes/blocks.php b/theme/includes/classes/blocks.php index 587be9a..22675ea 100644 --- a/theme/includes/classes/blocks.php +++ b/theme/includes/classes/blocks.php @@ -183,6 +183,12 @@ function __construct($editor_script_slug, $settings=array()) { "hasBrandColors" => true, "transform" => array("getPermalink") ), + "ucd-theme/photo-card" => [ + "twig" => "@ucd/blocks/photo-card.twig", + "img" => "382x382.png", + "transform" => ["getPost", "addSpacing"], + "hasBrandColors" => true + ], "ucd-theme/query" => array( "twig" => "@ucd/blocks/query.twig", "transform" => array("getPosts", 'addSpacing') diff --git a/views/blocks/photo-card.twig b/views/blocks/photo-card.twig new file mode 100644 index 0000000..6a8fbd8 --- /dev/null +++ b/views/blocks/photo-card.twig @@ -0,0 +1,5 @@ +{% from getUcdMacro('cards') import photo_card %} +{% if not attributes.brandColor %} + {% set attributes = attributes|merge({brandColor: 'primary'})%} +{% endif %} +{{ photo_card(attributes) }} diff --git a/views/macros/cards.twig b/views/macros/cards.twig index 4510b0e..fbc82b6 100644 --- a/views/macros/cards.twig +++ b/views/macros/cards.twig @@ -167,6 +167,74 @@ kwargs: {% endmacro %} +{# +http://webstyleguide.ucdavis.edu/?p=molecules-photo-card +kwargs: + post {Timber\Post} - A post on this site. + imageId {Number} - Id of an image. Will override 'post' featured image + image {Timber\Image} - A preview image. Will override 'post' featured image and imageId + title {String} - The card title. Will override 'post' title + hideTitle {Boolean} - Hides the card title. + href {String} - Url for card link. Will override 'post' permalink + newTab {Boolean} - Opens card link in new tab + brandColor {String} - UCD alt color slug +#} +{% macro photo_card( kwargs ) %} + + {% set title = kwargs.title ? kwargs.title : kwargs.post.title %} + {% set title = title|striptags %} + {% set href = kwargs.href ? kwargs.href : kwargs.post.link %} + {% set target = kwargs.newTab ? "target='_blank'" : "" %} + + {% if kwargs.image %} + {% set src = kwargs.image.src %} + {% set alt = kwargs.image.alt %} + {% elseif kwargs.imageId %} + {% set i = get_post(kwargs.imageId) %} + {% set src = i.src %} + {% set alt = i.alt %} + {% elseif kwargs.post.card_image_square %} + {% set src = kwargs.post.card_image_square.src %} + {% set alt = kwargs.post.card_image_square.alt %} + {% endif %} + + {% if not src %} + {% set src = DefaultImage('photo-card') %} + {% endif %} + + {% if alt %} + {% set alt = alt|striptags %} + {% endif %} + + + {% set classes = 'photo-card' %} + {% if kwargs.brandColor %} + {% set classes = classes ~ " category-brand--" ~ kwargs.brandColor %} + {% endif %} + {% if kwargs.panel %} + {% set classes = classes ~ " u-space-mb" %} + {% endif %} + {# + {% if kwargs.oBox %} + {% set classes = classes ~ " o-box" %} + {% endif %} + #} + + +
+
+ +
+ +
+ {% if title and not kwargs.hideTitle %} +

{{title}}

+ {% endif %} + +{% endmacro %} + {% macro featured_article( kwargs ) %}