diff --git a/wp-content/plugins/core/src/Blocks/Blocks_Definer.php b/wp-content/plugins/core/src/Blocks/Blocks_Definer.php index d39118be..b100546c 100644 --- a/wp-content/plugins/core/src/Blocks/Blocks_Definer.php +++ b/wp-content/plugins/core/src/Blocks/Blocks_Definer.php @@ -40,6 +40,7 @@ public function define(): array { 'tribe/post-type-name', 'tribe/post-permalink', 'tribe/query-results-count', + 'tribe/terms', ] ), self::EXTENDED => DI\add( [ diff --git a/wp-content/plugins/core/src/Blocks/Terms_Block.php b/wp-content/plugins/core/src/Blocks/Terms_Block.php new file mode 100644 index 00000000..f7617289 --- /dev/null +++ b/wp-content/plugins/core/src/Blocks/Terms_Block.php @@ -0,0 +1,49 @@ +taxonomy = $block_attributes['taxonomyToUse'] ?? 'category'; + $this->only_primay_term = $block_attributes['onlyPrimaryTerm'] ?? false; + $this->has_links = $block_attributes['hasLinks'] ?? false; + } + + /** + * @return \WP_Term[] + */ + public function get_the_terms(): array { + if ( $this->only_primay_term ) { + $term = $this->get_primary_term( get_the_ID(), $this->taxonomy ); + if ( $term ) { + $this->terms[] = $term; + } + } else { + $terms = get_the_terms( get_the_ID(), $this->taxonomy ); + if ( $terms && ! is_wp_error( $terms ) ) { + $this->terms = $terms; + } + } + + return $this->terms; + } + + public function display_as_links(): bool { + return (bool) $this->has_links; + } + +} diff --git a/wp-content/themes/core/assets/pcss/typography/_mixins.pcss b/wp-content/themes/core/assets/pcss/typography/_mixins.pcss index 943ea8fe..59098b5f 100644 --- a/wp-content/themes/core/assets/pcss/typography/_mixins.pcss +++ b/wp-content/themes/core/assets/pcss/typography/_mixins.pcss @@ -111,12 +111,23 @@ * ------------------------------------------------------------------------- */ @define-mixin t-category { + color: var(--color-black); font-family: var(--wp--preset--font-family--roboto); font-size: var(--wp--preset--font-size--10); line-height: 1.6; font-weight: 400; text-transform: uppercase; - text-decoration: none; + text-decoration: none !important; /* override block editor default */ + + /* target links for the hover/focus effect */ + &:is(a) { + + &:hover, + &:focus { + color: var(--color-black); + text-decoration: underline !important; /* override original state */ + } + } } /* ------------------------------------------------------------------------- @@ -136,8 +147,27 @@ * ------------------------------------------------------------------------- */ @define-mixin t-tag { + display: inline-flex; + align-items: center; + padding: 4px 16px; + background-color: var(--color-neutral-20); + border-radius: 100px; + color: var(--color-black); + text-decoration: none !important; /* override block editor default */ font-family: var(--wp--preset--font-family--roboto); font-size: var(--wp--preset--font-size--10); line-height: 1.6; font-weight: 700; + transition: var(--transition); + + /* target links for the hover/focus effect */ + &:is(a) { + + &:hover, + &:focus { + background-color: var(--color-black); + color: var(--color-white); + text-decoration: none !important; /* override original state */ + } + } } diff --git a/wp-content/themes/core/assets/pcss/typography/_utilities.pcss b/wp-content/themes/core/assets/pcss/typography/_utilities.pcss index c1db18e9..af9f5e5f 100644 --- a/wp-content/themes/core/assets/pcss/typography/_utilities.pcss +++ b/wp-content/themes/core/assets/pcss/typography/_utilities.pcss @@ -93,3 +93,22 @@ @mixin t-category; } + +/* ------------------------------------------------------------------------- + * Caption + * ------------------------------------------------------------------------- */ + +.t-caption { + + @mixin t-caption; +} + + +/* ------------------------------------------------------------------------- + * Tag + * ------------------------------------------------------------------------- */ + +.t-tag { + + @mixin t-tag; +} diff --git a/wp-content/themes/core/blocks/tribe/terms/block.json b/wp-content/themes/core/blocks/tribe/terms/block.json new file mode 100644 index 00000000..98725233 --- /dev/null +++ b/wp-content/themes/core/blocks/tribe/terms/block.json @@ -0,0 +1,36 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "tribe/terms", + "version": "0.1.0", + "title": "Terms", + "category": "theme", + "description": "Displays chosen taxonomy terms in different formats", + "supports": { + "html": false, + "align": true, + "spacing": { + "margin": true, + "padding": true + } + }, + "attributes": { + "taxonomyToUse": { + "type": "string" + }, + "onlyPrimaryTerm": { + "type": "boolean" + }, + "hasLinks": { + "type": "boolean" + } + }, + "styles": [ + { "name": "pills", "label": "Pills" } + ], + "textdomain": "tribe", + "editorScript": "file:./index.js", + "editorStyle": "file:./index.css", + "style": "file:./style-index.css", + "render": "file:./render.php" +} diff --git a/wp-content/themes/core/blocks/tribe/terms/edit.js b/wp-content/themes/core/blocks/tribe/terms/edit.js new file mode 100644 index 00000000..1fee1b83 --- /dev/null +++ b/wp-content/themes/core/blocks/tribe/terms/edit.js @@ -0,0 +1,103 @@ +/** + * React hook that is used to mark the block wrapper element. + * It provides all the necessary props like the class name. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops + */ +import { useBlockProps, InspectorControls } from '@wordpress/block-editor'; +import { PanelBody, SelectControl, ToggleControl } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { useSelect } from '@wordpress/data'; + +/** + * Server-side rendering of the block in the editor view + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-server-side-render/ + */ +import ServerSideRender from '@wordpress/server-side-render'; + +/** + * The edit function describes the structure of your block in the context of the + * editor. This represents what the editor will render when the block is used. + * + * @ignore + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit + * + * @return {WPElement} Element to render. + */ +export default function Edit( { attributes, setAttributes, isSelected } ) { + const blockProps = useBlockProps(); + const { taxonomyToUse, onlyPrimaryTerm, hasLinks } = attributes; + + const postType = useSelect( ( select ) => + select( 'core/editor' ).getCurrentPostType() + ); + + const taxonomies = useSelect( ( select ) => + select( 'core' ).getTaxonomies( { type: postType, per_page: -1 } ) + ); + + return ( +
+ + { isSelected && ( + + + { + setAttributes( { + taxonomyToUse: newValue, + } ); + } } + options={ taxonomies.map( ( taxonomy ) => { + return { + label: taxonomy.name, + value: taxonomy.slug, + }; + } ) } + /> + + setAttributes( { + onlyPrimaryTerm: newValue, + } ) + } + /> + + setAttributes( { + hasLinks: newValue, + } ) + } + /> + + + ) } +
+ ); +} diff --git a/wp-content/themes/core/blocks/tribe/terms/index.js b/wp-content/themes/core/blocks/tribe/terms/index.js new file mode 100644 index 00000000..5156f4fe --- /dev/null +++ b/wp-content/themes/core/blocks/tribe/terms/index.js @@ -0,0 +1,49 @@ +/** + * Registers a new block provided a unique name and an object defining its behavior. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ + */ +import { registerBlockType } from '@wordpress/blocks'; + +/** + * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. + * All files containing `style` keyword are bundled together. The code used + * gets applied both to the front of your site and to the editor. + * + * @see https://www.npmjs.com/package/@wordpress/scripts#using-css + */ +import './style.pcss'; + +/** + * Internal dependencies + */ +import Edit from './edit'; +import metadata from './block.json'; + +/** + * Every block starts by registering a new block type definition. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ + */ +registerBlockType( metadata.name, { + ...metadata, + + icon: { + src: ( + + + + ), + }, + + /** + * @see ./edit.js + */ + edit: Edit, +} ); diff --git a/wp-content/themes/core/blocks/tribe/terms/render.php b/wp-content/themes/core/blocks/tribe/terms/render.php new file mode 100644 index 00000000..32cd395e --- /dev/null +++ b/wp-content/themes/core/blocks/tribe/terms/render.php @@ -0,0 +1,60 @@ +. + * @var \WP_Block $block The instance of the WP_Block class that represents the block being rendered. + */ + +$terms_block = new Terms_Block( $attributes ); +$terms = $terms_block->get_the_terms(); + +echo '
'; + +if ( 0 === count( $terms ) ) { + echo ''; + echo '
'; + + return; +} + +if ( count( $terms ) > 1 ) { + echo ''; +} + +echo ''; diff --git a/wp-content/themes/core/blocks/tribe/terms/style.pcss b/wp-content/themes/core/blocks/tribe/terms/style.pcss new file mode 100644 index 00000000..222e3bfc --- /dev/null +++ b/wp-content/themes/core/blocks/tribe/terms/style.pcss @@ -0,0 +1,50 @@ +/** + * The following styles get applied both on the front of your site + * and in the editor. + * + * Replace them with your own styles or remove the file completely. + */ + +/* ----------------------------------------------------------------------- + * Terms Block + * ----------------------------------------------------------------------- */ + +.wp-block-tribe-terms { + display: flex; + align-items: center; + justify-content: flex-start; + + &.aligncenter { + justify-content: center; + } + + &.alignright { + justify-content: flex-end; + } +} + +/* ----------------------------------------------------------------------- + * Terms Block - List + * ----------------------------------------------------------------------- */ + +.wp-block-tribe-terms__list { + display: inline-flex; + align-items: center; + gap: var(--spacer-20); + padding: 0; + margin: 0; + list-style-type: none; +} + +/* ----------------------------------------------------------------------- + * Terms Block - Link (sometimes not a link) + * ----------------------------------------------------------------------- */ + +.wp-block-tribe-terms__link { + + /* style pills differently */ + .is-style-pills & { + + @mixin t-tag; + } +}