Merge pull request #81 from moderntribe/feature/terms-block

[MOOSE-52] Terms Block

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( [

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

@@ -0,0 +1,49 @@
+<?php declare(strict_types=1);
+
+namespace Tribe\Plugin\Blocks;
+
+use Tribe\Plugin\Templates\Traits\Primary_Term;
+
+class Terms_Block {
+
+	use Primary_Term;
+
+	private string $taxonomy       = 'category';
+	private bool $only_primay_term = false;
+	private bool $has_links        = false;
+
+	/**
+	 * @var \WP_Term[]
+	 */
+	private array $terms = [];
+
+	public function __construct( array $block_attributes ) {
+		$this->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;
+	}
+
+}

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 */
+		}
+	}
 }

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;
+}

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"
+}

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 (
+		<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,
+								} )
+							}
+						/>
+					</PanelBody>
+				</InspectorControls>
+			) }
+		</div>
+	);
+}

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: (
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="200"
+				height="200"
+				viewBox="0 0 200 200"
+				fill="#000"
+			>
+				<path d="M157.458 4a8 8 0 0 1 8 8v65.712a8 8 0 0 1-2.343 5.657l-76.644 76.643a23.46 23.46 0 0 1-7.612 5.087 23.47 23.47 0 0 1-17.958 0 23.46 23.46 0 0 1-7.612-5.087L9.445 116.167a23.46 23.46 0 0 1-5.086-7.611 23.47 23.47 0 0 1-1.786-8.979 23.46 23.46 0 0 1 6.872-16.59L86.089 6.343A8 8 0 0 1 91.746 4h65.712zm-8 16H95.059l-74.3 74.301a7.46 7.46 0 0 0-2.186 5.276c0 .98.193 1.95.568 2.856a7.46 7.46 0 0 0 1.618 2.42l43.846 43.846a7.46 7.46 0 0 0 10.552 0l74.301-74.301V20zM189 34.884a8 8 0 0 1 8 8V93.02a8 8 0 0 1-2.343 5.657L99.793 193.54a8 8 0 0 1-11.314-11.313L181 89.706V42.884a8 8 0 0 1 8-8zM119 53.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 1 0 11 0zM113.5 32c11.874 0 21.5 9.626 21.5 21.5S125.374 75 113.5 75 92 65.374 92 53.5 101.626 32 113.5 32z" />
+			</svg>
+		),
+	},
+
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+} );

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

@@ -0,0 +1,60 @@
+<?php declare(strict_types=1);
+
+use Tribe\Plugin\Blocks\Terms_Block;
+
+/**
+ * All of the parameters passed to the function where this file is being required are accessible in this scope:
+ *
+ * @var array     $attributes     The array of attributes for this block.
+ * @var string    $content        Rendered block output. ie. <InnerBlocks.Content />.
+ * @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 '<div ' . get_block_wrapper_attributes() . '>';
+
+if ( 0 === count( $terms ) ) {
+	echo '<!-- Terms block: No terms to list. -->';
+	echo '</div>';
+
+	return;
+}
+
+if ( count( $terms ) > 1 ) {
+	echo  '<ul class="wp-block-tribe-terms__list">';
+}
+
+foreach ( $terms as $term ) {
+	if ( count( $terms ) > 1 ) {
+		echo '<li class="wp-block-tribe-terms__term">';
+	}
+
+	echo '<span class="wp-block-tribe-terms__term">';
+
+	if ( $terms_block->display_as_links() ) {
+		echo sprintf(
+			'<a href="%s" class="wp-block-tribe-terms__link t-category">%s</a>',
+			esc_url( get_term_link( $term ) ),
+			esc_html( $term->name )
+		);
+	} else {
+		echo sprintf(
+			'<span class="wp-block-tribe-terms__link t-category">%s</span>',
+			esc_html( $term->name )
+		);
+	}
+
+	echo '</span>';
+
+	if ( count( $terms ) > 1 ) { // phpcs:ignore SlevomatCodingStandard.ControlStructures.EarlyExit.EarlyExitNotUsed
+		echo '</li>';
+	}
+}
+
+if ( count( $terms ) > 1 ) {
+	echo '</ul>';
+}
+
+echo '</div>';