Merge pull request #25 from Travelopia/feature/column-verticle-align

Add Vertical Alignment Control

dist/editor/blocks.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => '69223770a6c17d11ef66');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => 'b1810d803332a02c48b9');

dist/front-end/table/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '178f2404ec1149628c67');
+<?php return array('dependencies' => array(), 'version' => '878ffe83335ac9e233a6');

src/editor/blocks/table/children/column/block.json

@@ -53,6 +53,10 @@
     },
     "blockId": {
       "type": "string"
+    },
+    "verticalAlign": {
+      "type": "string",
+      "default": "center"
     }
   }
 }

src/editor/blocks/table/children/column/edit.tsx

@@ -5,8 +5,10 @@ import { __ } from '@wordpress/i18n';
 import {
 	useBlockProps,
 	useInnerBlocksProps,
-	store as blockEditorStore,
 	InspectorControls,
+	BlockControls,
+	BlockVerticalAlignmentToolbar,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
@@ -44,7 +46,7 @@ export default function Edit( {
 }: BlockEditProps<any> ): JSX.Element {
 	// Get block props.
 	const blockProps = useBlockProps( {
-		className: classnames( className, 'travelopia-table__column', {
+		className: classnames( className, 'travelopia-table__column', `travelopia-table__column--align-${ attributes.verticalAlign }`, {
 			'travelopia-table__column--sticky': attributes.isSticky,
 		} ),
 	} );
@@ -106,6 +108,13 @@ export default function Edit( {
 	// Return the column block.
 	return (
 		<>
+			{ /* @ts-ignore - Group is not defined in the prop-type. */ }
+			<BlockControls group="block">
+				<BlockVerticalAlignmentToolbar
+					onChange={ ( verticalAlign: string|undefined ) => setAttributes( { verticalAlign } ) }
+					value={ attributes.verticalAlign }
+				/>
+			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Column Options', 'tp' ) }>
 					<ToggleControl

src/editor/blocks/table/children/column/index.php

@@ -41,17 +41,28 @@ function bootstrap(): void {
 function render( array $attributes = [], string $content = '', WP_Block $block = null ): string {
 	$border_styles = get_border_styles( $attributes );
 
+	// Initialize CSS classes.
+	$css_classes = [ 'travelopia-table__column' ];
+
+	// Add vertical alignment class.
+	if ( 'center' !== $attributes['verticalAlign'] ) {
+		$css_classes[] = 'travelopia-table__column--align-' . $attributes['verticalAlign'];
+	}
+
+	// Add sticky class.
+	if ( ! empty( $attributes['isSticky'] ) ) {
+		$css_classes[] = 'travelopia-table__column--sticky';
+	}
+
+	// Add border styles.
+	if ( ! empty( $border_styles['css_classes'] ) ) {
+		$css_classes[] = $border_styles['css_classes'];
+	}
+
 	// Get block attributes.
 	$column_attributes = get_block_wrapper_attributes(
 		[
-			'class'   => get_css_classes(
-				$attributes,
-				[
-					'travelopia-table__column',
-					! empty( $attributes['isSticky'] ) ? 'travelopia-table__column--sticky' : '',
-					$border_styles['css_classes'],
-				]
-			),
+			'class'   => get_css_classes( $attributes, $css_classes ),
 			'style'   => get_css_styles( $attributes ) . $border_styles['inline_styles'],
 			'colspan' => $attributes['colSpan'] ?? '',
 			'rowspan' => $attributes['rowSpan'] ?? '',

src/front-end/table/index.scss

@@ -14,6 +14,15 @@
 			z-index: 1;
 		}
 
+		// Add vertical align classes. Default is middle.
+		&--align-top {
+			vertical-align: top;
+		}
+
+		&--align-bottom {
+			vertical-align: bottom;
+		}
+
 		&.alignleft {
 			text-align: left;