Add Date block

10up · Oct 20, 2023 · bc50521 · bc50521
1 parent d371504
commit bc50521
Show file tree

Hide file tree

Showing 12 changed files with 1,387 additions and 0 deletions.
diff --git a/assets/css/facets.css b/assets/css/facets.css
@@ -146,3 +146,90 @@
 	height: var(--ep-range-slider-thumb-size);
 	width: var(--ep-range-slider-thumb-size);
 }
+
+.ep-facet-date-option {
+	align-items: center;
+	display: flex;
+}
+
+.ep-radio {
+	appearance: none;
+	outline: transparent;
+	position: relative;
+	width: 1rem;
+
+	&::before {
+		background: transparent;
+		border: 1px solid #eee;
+		border-radius: 50%;
+		content: "";
+		display: inline-block;
+		height: 0.8rem;
+		left: 50%;
+		position: absolute;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		vertical-align: middle;
+		width: 0.8rem;
+	}
+
+	&::after {
+		border-radius: 50%;
+		content: "";
+		display: block;
+		height: 0.3rem;
+		left: 50%;
+		position: absolute;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		width: 0.3rem;
+	}
+
+	&:checked {
+		background: transparent;
+		outline-color: transparent;
+
+		&::before {
+			background: #5e5e5e;
+			border-color: inherit;
+		}
+
+		&::after {
+			background: #eee;
+		}
+	}
+}
+
+.ep-date-range-picker {
+	column-gap: 1rem;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	margin-top: 1rem;
+
+	&.is-hidden {
+		display: none;
+	}
+
+	& label {
+		margin-right: 0.5rem;
+	}
+}
+
+.ep-date-range-picker__from,
+.ep-date-range-picker__to {
+	align-items: baseline;
+	display: grid;
+	grid-template-columns: max-content 1fr;
+}
+
+.ep-date-range-picker__action {
+	grid-column: 1 / -1;
+	text-align: right;
+}
+
+.ep-facet-date-form__action {
+	align-items: center;
+	display: flex;
+	gap: 1.5rem;
+	margin-top: 0.75rem;
+}
diff --git a/assets/js/blocks/facets/date/block.json b/assets/js/blocks/facets/date/block.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 2,
+  "name": "elasticpress/facet-date",
+  "title": "Filter by Post Date",
+  "category": "elasticpress",
+  "description": "Let visitors filter your content by post date.",
+  "keywords": ["custom date", "facets"],
+  "textdomain": "elasticpress",
+  "attributes": {
+    "displayCustomDate": {
+      "type": "boolean",
+      "default": true
+    }
+  },
+  "supports": {
+    "color": {
+      "background": true,
+      "link": true,
+      "text": false
+    },
+    "html": false,
+    "position": {
+      "sticky": true
+    },
+    "spacing": {
+      "margin": true,
+      "padding": true
+    },
+    "typography": {
+      "fontSize": true,
+      "lineHeight": true
+    }
+  },
+  "editorScript": "ep-facets-date-block-script",
+  "viewScript": "ep-facets-date-block-view-script",
+  "style": "elasticpress-facets"
+}
diff --git a/assets/js/blocks/facets/date/edit.js b/assets/js/blocks/facets/date/edit.js
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies.
+ */
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { Disabled, PanelBody, ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import ServerSideRender from '@wordpress/server-side-render';
+
+/**
+ * Internal dependencies.
+ */
+import EmptyResponsePlaceholder from '../common/components/empty-response-placeholder';
+import LoadingResponsePlaceholder from '../common/components/loading-response-placeholder';
+
+const FacetDate = (props) => {
+	const blockProps = useBlockProps();
+	const { attributes, name, setAttributes } = props;
+	const { displayCustomDate } = attributes;
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={__('Settings', 'elasticpress')}>
+					<ToggleControl
+						label={__('Display custom date option', 'elasticpress')}
+						checked={displayCustomDate}
+						onChange={(displayCustomDate) => setAttributes({ displayCustomDate })}
+					/>
+				</PanelBody>
+			</InspectorControls>
+
+			<div {...blockProps}>
+				<Disabled>
+					<ServerSideRender
+						attributes={{
+							...attributes,
+							isPreview: true,
+						}}
+						block={name}
+						EmptyResponsePlaceholder={EmptyResponsePlaceholder}
+						LoadingResponsePlaceholder={LoadingResponsePlaceholder}
+						skipBlockSupportAttributes
+					/>
+				</Disabled>
+			</div>
+		</>
+	);
+};
+
+export default FacetDate;
diff --git a/assets/js/blocks/facets/date/index.js b/assets/js/blocks/facets/date/index.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies.
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies.
+ */
+import icon from '../common/icon';
+import edit from './edit';
+import { name } from './block.json';
+
+/**
+ * Register block.
+ */
+registerBlockType(name, {
+	icon,
+	edit,
+	save: () => {},
+});
diff --git a/assets/js/blocks/facets/date/view.js b/assets/js/blocks/facets/date/view.js
@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies.
+ */
+import domReady from '@wordpress/dom-ready';
+
+/**
+ * Initializes the date facet functionality.
+ *
+ */
+const initFacet = () => {
+	const forms = document.querySelectorAll('.ep-facet-date-form');
+	// eslint-disable-next-line no-undef
+	const filterName = epFacetDate.dateFilterName;
+
+	forms.forEach(function (form) {
+		form.addEventListener('submit', function (event) {
+			event.preventDefault();
+
+			const { value } = this.querySelector(`[name="${filterName}"]:checked`);
+			const { value: startDateValue } = this.querySelector(
+				'.ep-date-range-picker',
+			).querySelector(`[name="${filterName}_from"]`);
+
+			const { value: endDateValue } = this.querySelector(
+				'.ep-date-range-picker',
+			).querySelector(`[name="${filterName}_to"]`);
+
+			const currentURL = window.location.href;
+			const newUrl = new URL(currentURL);
+
+			if (value !== 'custom') {
+				newUrl.searchParams.set(filterName, value);
+			} else {
+				newUrl.searchParams.set(filterName, `${startDateValue},${endDateValue}`);
+			}
+
+			window.location.href = decodeURIComponent(newUrl);
+		});
+
+		const radioButtons = form.querySelectorAll('.ep-radio');
+		radioButtons.forEach(function (element) {
+			element.addEventListener('change', function () {
+				const dateRangePicker = element
+					.closest('.ep-facet-date-form')
+					.querySelector('.ep-date-range-picker');
+				if (element.value === 'custom') {
+					dateRangePicker.classList.remove('is-hidden');
+				} else {
+					dateRangePicker.classList.add('is-hidden');
+				}
+			});
+		});
+	});
+};
+
+domReady(initFacet);
diff --git a/includes/classes/Feature/Facets/Facets.php b/includes/classes/Feature/Facets/Facets.php
@@ -58,6 +58,8 @@ public function __construct() {
 			$types['meta']       = __NAMESPACE__ . '\Types\Meta\FacetType';
 			$types['meta-range'] = __NAMESPACE__ . '\Types\MetaRange\FacetType';
 			$types['post-type']  = __NAMESPACE__ . '\Types\PostType\FacetType';
+			$types['date']       = __NAMESPACE__ . '\Types\Date\FacetType';
+
 		}
 
 		/**

diff --git a/includes/classes/Feature/Facets/Types/Date/Block.php b/includes/classes/Feature/Facets/Types/Date/Block.php
@@ -0,0 +1,115 @@
+<?php
+/**
+ * Facets block
+ *
+ * @since 5.0.0
+ * @package elasticpress
+ */
+
+namespace ElasticPress\Feature\Facets\Types\Date;
+
+use ElasticPress\Utils;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+/**
+ * Facets block class
+ */
+class Block extends \ElasticPress\Feature\Facets\Block {
+	/**
+	 * Hook block functionality.
+	 */
+	public function setup() {
+		add_action( 'init', [ $this, 'register_block' ] );
+		add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_assets' ] );
+	}
+
+	/**
+	 * Register the block.
+	 */
+	public function register_block() {
+		/**
+		 * Registering it here so translation works
+		 *
+		 * @see https://core.trac.wordpress.org/ticket/54797#comment:20
+		 */
+		wp_register_script(
+			'ep-facets-date-block-script',
+			EP_URL . 'dist/js/facets-date-block-script.js',
+			Utils\get_asset_info( 'facets-date-block-script', 'dependencies' ),
+			Utils\get_asset_info( 'facets-date-block-script', 'version' ),
+			true
+		);
+
+		wp_set_script_translations( 'ep-facets-date-block-script', 'elasticpress' );
+
+		register_block_type_from_metadata(
+			EP_PATH . 'assets/js/blocks/facets/date',
+			[
+				'render_callback' => [ $this, 'render_block' ],
+			]
+		);
+	}
+
+	/**
+	 * Enqueue block assets.
+	 *
+	 * @return void
+	 */
+	public function enqueue_assets() {
+		wp_register_script(
+			'ep-facets-date-block-view-script',
+			EP_URL . 'dist/js/facets-date-block-view-script.js',
+			Utils\get_asset_info( 'facets-date-block-view-script', 'dependencies' ),
+			Utils\get_asset_info( 'facets-date-block-view-script', 'version' ),
+			true
+		);
+
+		/**
+		 * Filter the data passed to the date facet script.
+		 *
+		 * @hook ep_facets_date_script_data
+		 * @since 5.0.0
+		 * @param  {array} $data Data passed to the script.
+		 * $return {array} New data passed to the script.
+		 */
+		$data = apply_filters( 'ep_facets_date_script_data', [] );
+
+		wp_localize_script( 'ep-facets-date-block-view-script', 'epFacetDate', $data );
+	}
+
+	/**
+	 * Render the block.
+	 *
+	 * @param array $attributes Block attributes.
+	 * @return string
+	 */
+	public function render_block( $attributes ) {
+		global $wp_query;
+
+		/** This filter is documented in includes/classes/Feature/Facets/Types/Taxonomy/Block.php */
+		$renderer_class = apply_filters( 'ep_facet_renderer_class', __NAMESPACE__ . '\Renderer', 'post-type', 'block', $attributes );
+
+		$renderer = new $renderer_class();
+
+		ob_start();
+
+		$renderer->render( [], $attributes );
+
+		$block_content = ob_get_clean();
+
+		if ( empty( $block_content ) ) {
+			return;
+		}
+
+		$wrapper_attributes = get_block_wrapper_attributes( [ 'class' => 'wp-block-elasticpress-facet' ] );
+
+		return sprintf(
+			'<div %1$s>%2$s</div>',
+			wp_kses_data( $wrapper_attributes ),
+			$block_content
+		);
+	}
+}