[MOOSE-52] Terms Block

wp-content/plugins/core/src/Blocks/Blocks_Definer.php

@@ -39,6 +39,7 @@ public function define(): array {
 				'tribe/post-type-name',
 				'tribe/post-permalink',
 				'tribe/query-results-count',
+				'tribe/terms',
 			] ),
 
 			self::EXTENDED        => DI\add( [

wp-content/themes/core/assets/pcss/typography/_mixins.pcss

@@ -119,6 +119,17 @@
 	text-decoration: none;
 }
 
+/* -------------------------------------------------------------------------
+ * Tag
+ * ------------------------------------------------------------------------- */
+
+@define-mixin t-tag {
+	font-family: var(--wp--preset--font-family--roboto);
+	font-size: var(--wp--preset--font-size--10);
+	line-height: 1.6;
+	font-weight: 700;
+}
+
 /* -------------------------------------------------------------------------
  * Caption
  * Defined in theme.json but used in other places (post permalink block)

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"
+		},
+		"termStyle": {
+			"type": "string"
+		}
+	},
+	"textdomain": "tribe",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css",
+	"style": "file:./style-index.css",
+	"render": "file:./render.php"
+}

wp-content/themes/core/blocks/tribe/terms/edit.js

@@ -0,0 +1,127 @@
+/**
+ * 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,
+	RadioControl,
+	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, termStyle } = attributes;
+
+	const taxonomies = useSelect( ( select ) =>
+		select( 'core' ).getTaxonomies( { per_page: -1 } )
+	);
+
+	return (
+		<div { ...blockProps }>
+			<ServerSideRender block="tribe/terms" attributes={ attributes } />
+			{ isSelected && (
+				<InspectorControls>
+					<PanelBody title={ __( 'Block Settings', 'tribe' ) }>
+						<SelectControl
+							label={ __( 'Taxonomy', 'tribe' ) }
+							value={ taxonomyToUse ?? '' }
+							help={ __(
+								'The taxonomy to pull terms from.',
+								'tribe'
+							) }
+							onChange={ ( newValue ) => {
+								setAttributes( {
+									taxonomyToUse: newValue,
+								} );
+							} }
+							options={ taxonomies.map( ( taxonomy ) => {
+								return {
+									label: taxonomy.name,
+									value: taxonomy.slug,
+								};
+							} ) }
+						/>
+						<ToggleControl
+							label={ __(
+								'Should only grab the primary term',
+								'tribe'
+							) }
+							help={ __(
+								'Default functionality is to grab all terms in the taxonomy.',
+								'tribe'
+							) }
+							checked={ !! onlyPrimaryTerm }
+							onChange={ ( newValue ) =>
+								setAttributes( {
+									onlyPrimaryTerm: newValue,
+								} )
+							}
+						/>
+						<ToggleControl
+							label={ __(
+								'Terms should display as links',
+								'tribe'
+							) }
+							help={ __(
+								'Default functionality is that terms do not display as links.',
+								'tribe'
+							) }
+							checked={ !! hasLinks }
+							onChange={ ( newValue ) =>
+								setAttributes( {
+									hasLinks: newValue,
+								} )
+							}
+						/>
+						<RadioControl
+							label={ __( 'Term Style', 'tribe' ) }
+							help={ __(
+								'The format the terms should display.',
+								'tribe'
+							) }
+							options={ [
+								{
+									label: __( 'Default', 'tribe' ),
+									value: 'default',
+								},
+								{
+									label: __( 'Pills', 'tribe' ),
+									value: 'pills',
+								},
+							] }
+							selected={ termStyle ?? 'default' }
+							onChange={ ( newValue ) =>
+								setAttributes( {
+									termStyle: newValue,
+								} )
+							}
+						/>
+					</PanelBody>
+				</InspectorControls>
+			) }
+		</div>
+	);
+}

wp-content/themes/core/blocks/tribe/terms/index.js

@@ -0,0 +1,66 @@
+/**
+ * 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: (
+			<svg
+				width="200"
+				height="200"
+				viewBox="0 0 200 200"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M157.458 4C161.876 4 165.458 7.58172 165.458 12V77.7122C165.458 79.8339 164.615 81.8688 163.115 83.369L86.4713 160.012C84.2927 162.191 81.7062 163.92 78.8597 165.099C76.0131 166.278 72.9621 166.885 69.881 166.885C66.7999 166.885 63.7489 166.278 60.9023 165.099C58.0557 163.92 55.4692 162.191 53.2906 160.012L9.44543 116.167C7.26669 113.989 5.53841 111.402 4.35927 108.556C3.18013 105.709 2.57324 102.658 2.57324 99.5769C2.57324 96.4958 3.18013 93.4449 4.35927 90.5983C5.53841 87.7517 7.26669 85.1652 9.44544 82.9866L86.0889 6.34315C87.5892 4.84285 89.624 4 91.7458 4L157.458 4ZM149.458 20L95.0594 20L20.759 94.3005C20.0661 94.9933 19.5163 95.8161 19.1413 96.7214C18.7663 97.6267 18.5732 98.597 18.5732 99.577C18.5732 100.557 18.7663 101.527 19.1413 102.433C19.5163 103.338 20.0659 104.16 20.7589 104.853L64.6045 148.699C65.2974 149.392 66.1201 149.942 67.0254 150.317C67.9307 150.692 68.9011 150.885 69.881 150.885C70.8609 150.885 71.8312 150.692 72.7365 150.317C73.6418 149.942 74.4644 149.392 75.1573 148.699L149.458 74.3985V20Z"
+					fill="currentcolor"
+				/>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M189 34.8835C193.418 34.8835 197 38.4652 197 42.8835V93.0196C197 95.1413 196.157 97.1762 194.657 98.6764L99.7925 193.54C96.6683 196.665 91.603 196.665 88.4788 193.54C85.3546 190.416 85.3546 185.351 88.4788 182.227L181 89.7059V42.8835C181 38.4652 184.581 34.8835 189 34.8835Z"
+					fill="currentcolor"
+				/>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M119 53.5C119 50.4624 116.537 48 113.5 48C110.462 48 108 50.4624 108 53.5C108 56.5376 110.462 59 113.5 59C116.537 59 119 56.5376 119 53.5ZM113.5 32C125.374 32 135 41.6259 135 53.5C135 65.3741 125.374 75 113.5 75C101.626 75 91.9997 65.3741 91.9997 53.5C91.9997 41.6259 101.626 32 113.5 32Z"
+					fill="currentcolor"
+				/>
+			</svg>
+		),
+	},
+
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+} );

wp-content/themes/core/blocks/tribe/terms/render.php

@@ -0,0 +1,85 @@
+<?php declare(strict_types=1);
+
+// get block settings (attributes)
+$taxonomy         = $attributes['taxonomyToUse'] ?? 'category';
+$only_primay_term = $attributes['onlyPrimaryTerm'] ?? false;
+$has_links        = $attributes['hasLinks'] ?? false;
+$style            = $attributes['termStyle'] ?? 'default';
+$terms            = false;
+$primary_term     = false;
+
+/**
+ * If we should only display the primary term:
+ * - If we have yoast we can get the primary term that way
+ * - Otherwise, we'll have to grab the first term in the list
+ *
+ * If we should display all terms:
+ * - Grab all terms for the taxonomy
+ */
+if ( $taxonomy === 'category' && $only_primay_term && class_exists( 'WPSEO_Primary_Term' ) ) {
+	$wpseo_primary_term = new WPSEO_Primary_Term( $taxonomy, get_the_ID() );
+	$wpseo_primary_term = $wpseo_primary_term->get_primary_term();
+	if ( $wpseo_primary_term ) {
+		$primary_term = get_term( $wpseo_primary_term );
+	} else {
+		$terms        = get_the_terms( get_the_ID(), $taxonomy );
+		$primary_term = $terms ? $terms[0] : false;
+	}
+} elseif ( $only_primay_term ) {
+	$terms        = get_the_terms( get_the_ID(), $taxonomy );
+	$primary_term = $terms ? $terms[0] : false;
+} else {
+	$terms = get_the_terms( get_the_ID(), $taxonomy );
+}
+
+if ( ! $terms && ! $primary_term && ! is_admin() ) {
+	return;
+}
+?>
+
+<div <?php echo get_block_wrapper_attributes(); ?>>
+	<?php if ( $primary_term ) {
+		// display only primary term
+		// displays differently if we should have links or not
+		echo $has_links ? sprintf(
+			'<span class="%s"><a href="%s" target="%s" class="%s">%s</a></span>',
+			esc_attr( "wp-block-tribe-terms__term is-style-$style" ),
+			esc_url( get_term_link( $primary_term ) ),
+			esc_attr( '_self' ),
+			esc_attr( 'wp-block-tribe-terms__link' ),
+			esc_html( $primary_term->name )
+		) : sprintf(
+			'<span class="%s"><span class="%s">%s</span></span>',
+			esc_attr( "wp-block-tribe-terms__term is-style-$style" ),
+			esc_attr( 'wp-block-tribe-terms__link' ),
+			esc_html( $primary_term->name )
+		);
+	} elseif ( $terms ) {
+		// display terms in a list
+		echo sprintf(
+			'<ul class="%s">',
+			esc_attr( 'wp-block-tribe-terms__list' )
+		);
+		// loop through terms to create a list
+		// displays differently if we should have links or not
+		foreach ( $terms as $term ) {
+			echo $has_links ? sprintf(
+				'<li class="%s"><a href="%s" target="%s" class="%s">%s</a></li>',
+				esc_attr( "wp-block-tribe-terms__term is-style-$style" ),
+				esc_url( get_term_link( $term ) ),
+				esc_attr( '_self' ),
+				esc_attr( 'wp-block-tribe-terms__link' ),
+				esc_html( $term->name )
+			) : sprintf(
+				'<li class="%s"><span class="%s">%s</span></li>',
+				esc_attr( "wp-block-tribe-terms__term is-style-$style" ),
+				esc_attr( 'wp-block-tribe-terms__link' ),
+				esc_html( $term->name )
+			);
+		}
+		echo '</ul>';
+	} else {
+		// display if no terms are available
+		echo '<!-- Terms block: No terms to list. -->';
+	} ?>
+</div>