FIX: base implementation of block-editor styles for select field

Crocoblock/issues-tracker#962

modules/option-field/assets/build/checkbox.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '821833beb8407c162bb0');
+<?php return array('dependencies' => array(), 'version' => '9599cebd1432fdee4308');

modules/option-field/assets/build/custom.options.restrictions.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '12a4a3d824bf1ea974d1');
+<?php return array('dependencies' => array(), 'version' => 'aa962c9bac63910e0131');

modules/option-field/assets/build/editor.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react'), 'version' => '5bf1a0e753c4a0dab501');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-components', 'wp-i18n'), 'version' => 'e579f088ea1b437b85aa');

modules/option-field/assets/build/radio.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '841523e9f49fa8f41d9c');
+<?php return array('dependencies' => array(), 'version' => '05ec8f23ace1e40a6f90');

modules/option-field/assets/build/select.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '9473ef2f37697b153c30');
+<?php return array('dependencies' => array(), 'version' => 'f9301e1f25ef348be128');

modules/option-field/assets/src/editor/blocks/select/SelectView.js

@@ -0,0 +1,23 @@
+import usePreviewOptions from '../../hooks/usePreviewOptions';
+import JfbSelect from '../../../shared/select/JfbSelect';
+
+function SelectView( { attributes } ) {
+	const options = usePreviewOptions( attributes );
+
+	return <select className={ JfbSelect }>
+		{ attributes.placeholder && (
+			<option
+				value=""
+				selected
+				disabled={ attributes.is_disabled_placeholder }
+			>
+				{ attributes.placeholder }
+			</option>
+		) }
+		{ options.map( ( { label }, index ) => (
+			<option key={ 'option-' + index } value="">{ label }</option>
+		) ) }
+	</select>;
+}
+
+export default SelectView;

modules/option-field/assets/src/editor/blocks/select/edit.js

@@ -1,10 +1,17 @@
 import preview from './preview';
-import { SelectRadioCheckPlaceholder } from '../../components/SelectRadioCheckPlaceholder';
 import SelectRadioCheck from '../../components/SelectRadioCheck';
+import { __ } from '@wordpress/i18n';
+import {
+	useBlockProps,
+	InspectorControls,
+} from '@wordpress/block-editor';
+import {
+	ToggleControl,
+	PanelBody,
+	RangeControl,
+} from '@wordpress/components';
+import SelectView from './SelectView';
 
-const {
-	      __,
-      } = wp.i18n;
 const {
 	      ToolBarFields,
 	      BlockLabel,
@@ -24,17 +31,6 @@ const {
 	      useUniqueNameOnDuplicate,
       } = JetFBHooks;
 
-const {
-	      InspectorControls,
-	      useBlockProps,
-      } = wp.blockEditor;
-
-const {
-	      ToggleControl,
-	      PanelBody,
-	      RangeControl,
-      } = wp.components;
-
 /**
  * @param props
  * @returns {JSX.Element[]}
@@ -99,11 +95,8 @@ export default function SelectEdit( props ) {
 				<BlockClassName/>
 			</PanelBody>
 		</InspectorControls> }
-		<div key={ uniqKey( 'viewBlock' ) } { ...blockProps }>
-			<SelectRadioCheckPlaceholder
-				scriptData={ window.JetFormOptionFieldData }
-				{ ...props }
-			/>
+		<div { ...blockProps }>
+			<SelectView attributes={ attributes }/>
 			<SelectRadioCheck { ...props }>
 				<ToggleControl
 					key="multiple"

modules/option-field/assets/src/editor/hooks/usePreviewOptions.js

@@ -0,0 +1,80 @@
+import { listFrom } from '../components/sources';
+
+const DELIMITER = ' - ';
+
+function usePreviewOptions( {
+	field_options_from,
+	field_options_post_type,
+	field_options_tax,
+	field_options_key,
+	generator_function,
+	generator_field,
+	field_options,
+} ) {
+
+	if ( 'manual_input' === field_options_from && field_options?.length ) {
+		return field_options;
+	}
+
+	let full_label = [];
+	let value      = [];
+
+	// it should be refactored in redux store selectors
+	switch ( field_options_from ) {
+		case 'posts':
+			if ( field_options_post_type ) {
+				value.push(
+					window.JetFormOptionFieldData.post_types_list.find(
+						option => option.value === field_options_post_type,
+					)?.label,
+				);
+			}
+			break;
+
+		case 'terms':
+			if ( field_options_tax ) {
+				value.push(
+					window.JetFormOptionFieldData.taxonomies_list.find(
+						option => option.value === field_options_tax,
+					)?.label,
+				);
+			}
+			break;
+
+		case 'meta_field':
+			if ( field_options_key ) {
+				value.push( field_options_key );
+			}
+			break;
+
+		case 'generate':
+			if ( generator_function ) {
+				value.push(
+					window.JetFormOptionFieldData.generators_list.find(
+						option => option.value === generator_function,
+					)?.label,
+				);
+			}
+			if ( generator_field ) {
+				value.push( generator_field );
+			}
+			break;
+
+	}
+	full_label.push(
+		listFrom.find( option => option.value === field_options_from )?.label,
+	);
+
+	if ( value.length ) {
+		full_label.push( value.join( DELIMITER ) );
+	}
+
+	const singleLabel = full_label.join( DELIMITER );
+
+	return (
+		new Array( 3 )
+	).fill( { label: singleLabel } );
+
+}
+
+export default usePreviewOptions;

modules/option-field/assets/src/frontend/blocks/select/main.js

@@ -1,6 +1,9 @@
 import MultiSelectData from './input';
 import SignalSelect from './signal';
 
+// it's important to compile separate css file
+import JfbSelect from '../../../shared/JfbSelect';
+
 const { addFilter } = JetPlugins.hooks;
 
 window.JetFormBuilderAbstract = {

modules/option-field/assets/src/shared/JfbSelect.js

@@ -0,0 +1,38 @@
+import { css } from '@linaria/core';
+
+const baseClass = '.wp-block-jet-forms-select-field';
+
+const JfbSelect = css`
+    ${ baseClass }[style*="--jfb-input-padding"] & {
+        padding-top: var(--jfb-input-padding-top);
+        padding-right: var(--jfb-input-padding-right);
+        padding-bottom: var(--jfb-input-padding-bottom);
+        padding-left: var(--jfb-input-padding-left);
+    }
+
+    ${ baseClass }[style*="--jfb-input-background-color"] & {
+	    background-color: var(--jfb-input-background-color);
+    }
+
+    .jet--ua-safari .jet-form-builder__field-wrap select& {
+        -webkit-appearance: none; /* Remove default arrow in Safari */
+        background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+        linear-gradient(135deg, currentColor 50%, transparent 50%);
+        background-position: calc(100% - 20px) calc(1em + 2px),
+        calc(100% - 15px) calc(1em + 2px);
+        background-size: 5px 5px,
+        5px 5px;
+        background-repeat: no-repeat;
+    }
+
+    .rtl.jet--ua-safari .jet-form-builder__field-wrap select& {
+        background-position: calc(10% - 20px) calc(1em + 2px), calc(10% - 15px) calc(1em + 2px);
+    }
+
+    .wp-core-ui & {
+        width: 100%;
+        max-width: unset;
+    }
+`;
+
+export default JfbSelect;

modules/option-field/blocks/select/block-template.php

@@ -13,7 +13,7 @@
 	die;
 }
 
-$this->add_attribute( 'class', 'jet-form-builder__field select-field' );
+$this->add_attribute( 'class', 'jet-form-builder__field select-field jfb-select' );
 $this->add_attribute( 'class', $args['class_name'] );
 $this->add_attribute( 'required', $this->block_type->get_required_val() );
 $this->add_attribute( 'name', $this->block_type->get_field_name() );

modules/option-field/module.php

@@ -103,6 +103,13 @@ public function enqueue_admin_assets() {
 			'JetFormOptionFieldData',
 			$this->get_localize_data()
 		);
+
+		wp_enqueue_style(
+			$this->get_handle(),
+			$this->get_url( 'assets/build/editor.css' ),
+			array(),
+			$script_asset['version']
+		);
 	}
 
 	public function register_frontend_scripts() {

modules/option-field/shared/blocks/select/block.json

@@ -156,5 +156,5 @@
 		"jet-forms/repeater-row--current-index"
 	],
 	"viewScript": "jet-fb-option-field-select",
-	"style": "jet-fb-option-field-select"
+	"viewStyle": "jet-fb-option-field-select"
 }

modules/option-field/webpack.config.js

@@ -1,8 +1,11 @@
 const WPExtractorPlugin = require(
 	'@wordpress/dependency-extraction-webpack-plugin',
 );
-const path              = require( 'path' );
-const devMode           = !process.argv.join( ':' ).
+
+const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
+
+const path    = require( 'path' );
+const devMode = !process.argv.join( ':' ).
 	includes( '--mode:production' );
 
 module.exports = {
@@ -39,7 +42,7 @@ module.exports = {
 			{
 				test: /\.css$/,
 				use: [
-					'style-loader',
+					MiniCssExtractPlugin.loader,
 					'css-loader',
 					'postcss-loader',
 				],
@@ -48,5 +51,6 @@ module.exports = {
 	},
 	plugins: [
 		new WPExtractorPlugin(),
+		new MiniCssExtractPlugin(),
 	],
 };

modules/option-field/wyw-in-js.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+	classNameSlug: ( hash, title ) => (
+		title.replace( /([a-z])([A-Z])/g, '$1-$2' ).toLowerCase()
+	),
+};

package.json

@@ -34,7 +34,7 @@
 		"babel-loader": "^8.2.2",
 		"css-loader": "^6.10.0",
 		"husky": "^8.0.3",
-		"mini-css-extract-plugin": "^2.8.0",
+		"mini-css-extract-plugin": "^2.9.0",
 		"nx": "18.0.4",
 		"postcss-loader": "^8.1.0",
 		"sass": "^1.60.0",
@@ -47,7 +47,10 @@
 		"webpack-cli": "^5.1.4"
 	},
 	"dependencies": {
+		"@linaria/core": "^6.2.0",
+		"@linaria/react": "^6.2.1",
 		"@wordpress/api-fetch": "^6.48.0",
+		"@wordpress/block-editor": "^12.24.0",
 		"@wordpress/components": "^26.0.1",
 		"@wordpress/data": "^9.26.0",
 		"@wordpress/dom-ready": "^3.54.0",