Feature/tile rename

htdocs/wp-content/themes/owc-formulieren/assets/js/editor/openpdd-tile/README.MD

@@ -0,0 +1,11 @@
+# Tile block
+
+Add a tile block with an icon, a heading and a text paragraph. Features a Font Awesome icon picker component which uses the Font Awesome API to search for icons. Add an anchor link behind the heading to make the tile fully clickable.
+
+## Requirements
+
+Setup FontAwesome in your project [through a FontAwesome kit](https://fontawesome.com/docs/web/setup/get-started) or install it [using npm](https://fontawesome.com/docs/web/setup/packages).
+
+## Wait, where is the styling?
+
+Styling is situated in the `"/assets/scss/blocks/tile"` folder.

htdocs/wp-content/themes/owc-formulieren/assets/js/editor/openpdd-tile/block.json

@@ -0,0 +1,14 @@
+{
+	"name": "openpdd/tile",
+	"category": "layout",
+	"attributes": {
+		"icon": {
+			"type": "string",
+			"default": "fal fa-envelope"
+		},
+		"altText": {
+			"type": "string",
+			"default": ""
+		}
+	}
+}

htdocs/wp-content/themes/owc-formulieren/assets/js/editor/openpdd-tile/components/icon-picker-control.js

@@ -0,0 +1,134 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Popover, SearchControl } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { __ } from '@wordpress/i18n';
+
+const IconPickerControl = ( { onChange, icon } ) => {
+	const [ isOpen, setOpen ] = useState( false );
+	const [ searchInput, setSearchInput ] = useState( '' );
+	const [ searchResults, setSearchResults ] = useState( [] );
+
+	const { createNotice } = useDispatch( noticesStore );
+
+	const allowedStyles = [ 'solid', 'regular' ];
+
+	const searchFontAwesomeIcons = async ( searchValue ) => {
+		const response = await getFontAwesomeIcons( searchValue );
+		if ( ! response ) return;
+		if ( response.errors ) return showErrorNotice();
+
+		const result = response.data.search.reduce(
+			( iconResults, iconData ) => {
+				convertResponseToClassnames( iconData ).forEach( ( value ) => {
+					iconResults.push( value );
+				} );
+
+				return iconResults;
+			},
+			[]
+		);
+		if ( ! result ) return;
+
+		setSearchResults( () => result );
+		setOpen( () => true );
+	};
+
+	const getFontAwesomeIcons = ( search ) => {
+		const query = `{ search(version: "6.1.2", first: 100, query: "${ search }") { id styles } }`;
+
+		return fetch( 'https://api.fontawesome.com', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				Accept: 'application/json',
+			},
+			body: JSON.stringify( { query } ),
+		} )
+			.then( ( res ) => res.json() )
+			.catch( () => showErrorNotice() );
+	};
+
+	const convertResponseToClassnames = ( response ) => {
+		return response.styles
+			.filter( ( style ) => allowedStyles.includes( style ) ?? false )
+			.map( ( style ) => `fa-${ style } fa-${ response.id }` );
+	};
+
+	const showErrorNotice = () => {
+		createNotice(
+			'error',
+			__(
+				'Momenteel kunnen er geen iconen worden opgehaald, probeer het later nog een keer.',
+				'owc-formulieren'
+			),
+			{
+				isDismissible: true,
+				type: 'snackbar',
+				id: 'icon-picker-control-error',
+			}
+		);
+	};
+
+	return (
+		<>
+			{ icon && (
+				<i className={ icon + ' icon-picker-control-preview-icon' }></i>
+			) }
+			<SearchControl
+				placeholder={ __( 'Zoek een icoon', 'owc-formulieren' ) }
+				value={ searchInput }
+				help={ __(
+					'Gebruik Engelse termen om een icoon te zoeken.',
+					'owc-formulieren'
+				) }
+				onChange={ ( searchValue ) => {
+					setSearchInput( () => searchValue );
+					searchFontAwesomeIcons( searchValue );
+				} }
+			/>
+			{ isOpen && searchInput && (
+				<Popover
+					title={ __( 'Kies een icoon', 'owc-formulieren' ) }
+					onClose={ () => setOpen( () => false ) }
+					focusOnMount={ false }
+				>
+					<div className="icon-picker-control-popover-container">
+						{ searchResults?.map( ( result, key ) => {
+							return (
+								<div
+									className="icon-picker-control-popover-btn-container"
+									key={ key }
+								>
+									<Button
+										onClick={ () => {
+											onChange( result );
+											setSearchInput( () => '' );
+											setOpen( () => false );
+										} }
+									>
+										<i className={ result }></i>
+									</Button>
+								</div>
+							);
+						} ) }
+
+						{ ! searchResults.length && (
+							<p>
+								{ __(
+									'Er zijn geen iconen gevonden',
+									'owc-formulieren'
+								) }
+							</p>
+						) }
+					</div>
+				</Popover>
+			) }
+		</>
+	);
+};
+
+export default IconPickerControl;

htdocs/wp-content/themes/owc-formulieren/assets/js/editor/openpdd-tile/components/icon.js

@@ -0,0 +1,13 @@
+const Icon = ( props ) => {
+	const { attributes } = props;
+	const { icon, altText } = attributes;
+
+	return (
+		<i
+			className={ `tile-icon ${ icon }` }
+			title={ altText ? altText : null }
+		></i>
+	);
+};
+
+export default Icon;

htdocs/wp-content/themes/owc-formulieren/assets/js/editor/openpdd-tile/components/inspector.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { InspectorControls, FontSizePicker } from '@wordpress/block-editor';
+import { PanelBody, TextControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import IconPickerControl from './icon-picker-control';
+
+const Inspector = ( props ) => {
+	const { setAttributes, attributes } = props;
+	const { icon } = attributes;
+
+	return (
+		<InspectorControls>
+			<PanelBody title={ __( 'Kies een icoon', 'owc-formulieren' ) }>
+				<IconPickerControl
+					icon={ icon }
+					onChange={ ( result ) =>
+						setAttributes( {
+							icon: result,
+						} )
+					}
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
+};
+
+export default Inspector;

htdocs/wp-content/themes/owc-formulieren/assets/js/editor/openpdd-tile/edit.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Inspector from './components/inspector';
+import Icon from './components/icon';
+
+const Edit = ( props ) => {
+	const blockProps = useBlockProps( {
+		className: 'tile',
+	} );
+
+	const template = [
+		[
+			'core/heading',
+			{ placeholder: __( 'Titel', 'owc-formulieren' ), level: 3 },
+		],
+		[
+			'core/paragraph',
+			{
+				placeholder: __(
+					'Introductie van maximaal 4 regels',
+					'owc-formulieren'
+				),
+			},
+		],
+	];
+
+	return (
+		<div { ...blockProps }>
+			<Inspector { ...props } />
+			<Icon { ...props } />
+			<InnerBlocks template={ template } templateLock={ true } />
+		</div>
+	);
+};
+
+export default Edit;

htdocs/wp-content/themes/owc-formulieren/assets/js/editor/openpdd-tile/index.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+const { name, attributes } = metadata;
+
+const settings = {
+	apiVersion: 2,
+	title: __( 'Tegel' ),
+	description: __(
+		'Toon een tegel met een icoon, koptekst en begeleidende tekst.'
+	),
+	category: 'theme',
+	keywords: [
+		__( 'fontawesome' ),
+		__( 'font awesome', 'owc-formulieren' ),
+		__( 'symbool', 'owc-formulieren' ),
+	],
+	icon: {
+		src: 'image-filter',
+		background: '#fff',
+		foreground: '#000',
+	},
+	edit,
+	save,
+	attributes,
+};
+
+registerBlockType( name, settings );

htdocs/wp-content/themes/owc-formulieren/assets/js/editor/openpdd-tile/save.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Icon from './components/icon';
+
+const Save = ( props ) => {
+	const { attributes } = props;
+	const { altText } = attributes;
+
+	const blockProps = useBlockProps.save( {
+		className: 'tile',
+	} );
+
+	return (
+		<div { ...blockProps }>
+			<Icon { ...props } />
+			{ altText && <span className="sr-only">{ altText }</span> }
+			<InnerBlocks.Content />
+		</div>
+	);
+};
+
+export default Save;