Merge pull request #84 from brainstormforce/new-admin-dashboard

CFP-51 - v2.0.2 Plugin update

README.md

@@ -4,7 +4,7 @@
 **Tags:** typography, fonts, custom fonts, Google Fonts, performance, privacy, full site editing, adobe fonts, GDPR  
 **Requires at least:** 5.0  
 **Tested up to:** 6.2.2  
-**Stable tag:** 2.0.1  
+**Stable tag:** 2.0.2  
 **License:** GPLv2 or later  
 **License URI:** http://www.gnu.org/licenses/gpl-2.0.html  
 
@@ -147,6 +147,15 @@ Yes, Custom Fonts is completely free to use, without any limitation.
 
 
 ## Changelog ##
+### 2.0.2 ###
+- Improvement: Added multiple font file selection for single font weight.
+- Fix: Frontend fonts messed up after 2.0 update.
+- Fix: Pre added multiple font files for single weight were missed after 2.0.
+- Fix: Fonts are not listed under Beaver Builder editor typography settings.
+- Fix: Text domains load correctly for JavaScript translations. (Props - https://github.com/pedro-mendonca)
+- Fix: Used proper sprintf in hard concatenated string for translation. (Props - https://github.com/pedro-mendonca)
+- Fix: Added translation for hardcoded 'Italic' suffix. (Props - https://github.com/pedro-mendonca)
+
 ### 2.0.1 ###
 - Fix: Edit Custom font screen blanks on expanding font from admin list view.
 - Fix: PHP error undefined index 'font_weight' on the frontend.

admin/dashboard/assets/src/common/all-config.scss

@@ -186,3 +186,11 @@ span.font-filename {
     transition: box-shadow .1s linear;
     background-color: #e5f1f8;
 }
+.media-modal-content .media-frame-router .media-router:after {
+    content: "(Use Shift for multiple selection.)";
+    font-size: 14px;
+    font-style: italic;
+    vertical-align: middle;
+    font-weight: 500;
+    margin-left: 20px;
+}

admin/dashboard/assets/src/dashboard-app/pages/fonts/GoogleFont.js

@@ -19,7 +19,7 @@ const GoogleVariationItem = ({
 			oldWeight = '400italic';
 		}
 		if ( oldWeight.includes('italic') ) {
-			updatedWeight = `${oldWeight.replace('italic', '')} Italic`;
+			updatedWeight = `${oldWeight.replace('italic', '')} ` + __( 'Italic', 'custom-fonts' );
 		}
 		switch ( weight ) {
 			case '100':

admin/dashboard/assets/src/dashboard-app/pages/fonts/LocalFont.js

@@ -11,7 +11,7 @@ const LocalVariationItem = ({
 	handleVariationChange,
 }) => {
 	const [toggleView, setToggleView] = useState(true);
-	const [fontFileName, setFontFileName] = useState('');
+	const [fontFileName, setFontFileName] = useState([]);
 
 	let frame;
 	const fontFileUploader = (event) => {
@@ -29,19 +29,31 @@ const LocalVariationItem = ({
 			button: {
 				text: __( 'Use Font', 'custom-fonts' ),
 			},
-			multiple: false, // Set to true to allow multiple files to be selected
+			multiple: true, // Set to true to allow multiple files to be selected
 		})
 
 		// When an image is selected in the media frame...
 		frame.on( 'select', function() {
 			// Get media attachment details from the frame state
-			let attachment = frame.state().get('selection').first().toJSON();
-			setFontFileName( attachment.filename );
+			var attachments = frame.state().get('selection').map(
+				function( attachment ) {
+					attachment.toJSON();
+					return attachment;
+				}
+			);
+
+			//loop through the array and do things with each attachment
+			let fontFileNames = [];
+			for (let i = 0; i < attachments.length; ++i) {
+				fontFileNames.push(attachments[i].attributes.url);
+			}
+
+			setFontFileName( fontFileNames );
 			handleVariationChange(
 				event,
 				variation.id,
 				"font_file",
-				attachment
+				fontFileNames
 			);
 		});
 
@@ -59,12 +71,17 @@ const LocalVariationItem = ({
 		return( <option value={weight} key={weight}> { label } </option> )
 	} );
 
+	const getFileName = (url) => {
+		let fileName = url.split('/').pop();
+		return fileName;
+	}
+
 	return (
 		<div key={id} className="border border-light rounded-sm variation-file-field mb-4">
 			{!toggleView ? (
 				<div className="flex items-center justify-between p-3.5 relative" onClick={expandFileField}>
 					<h2 className="text-sm font-semibold text-secondary">
-						{ '' !== fontFileName ? fontFileName : __('No file chosen', 'custom-fonts') }
+						{ fontFileName.length >= 1 ? __( 'Font files chosen', 'custom-fonts' ) : __('No file chosen', 'custom-fonts') }
 					</h2>
 					<div className="flex items-center justify-end gap-x-4 font-triggers">
 						<svg
@@ -116,7 +133,7 @@ const LocalVariationItem = ({
 							>
 								{ __( "Choose File", 'custom-fonts' ) }
 							</button>
-							<span className="font-filename"> { '' !== fontFileName ? fontFileName : __( 'No file chosen', 'custom-fonts' ) } </span>
+							<span className="font-filename"> { fontFileName.length >= 1 ? __( 'Chosen files:', 'custom-fonts' ) : __( 'No file chosen', 'custom-fonts' ) } </span>
 							<div className="font-triggers">
 								<svg
 									onClick={() => setToggleView(false)}
@@ -152,9 +169,17 @@ const LocalVariationItem = ({
 								)}
 							</div>
 						</div>
-
-						<div className="text-xs text-neutral mt-1.5">
-							Supported file types: .otf, .ttf, .woff, .woff2
+						{
+							( Array.isArray( fontFileName ) && fontFileName.length >= 1 ) && (
+								fontFileName.map(( file, index ) => (
+									<div className="text-xs text-neutral mt-1.5" key={index}>
+										{ `${__( 'File ', 'custom-fonts' )} ${index + 1}: ${ getFileName(file) }` }
+									</div>
+								))
+							)
+						}
+						<div className="text-xs text-neutral mt-1.5 italic">
+							{`${__( 'Supported file types: ', 'custom-fonts' )} .otf, .ttf, .woff, .woff2`}
 						</div>
 					</div>
 					<div className="grid grid-cols-2 gap-x-3">
@@ -250,14 +275,17 @@ const LocalFont = () => {
 		}));
 	};
 
-	const handleVariationChange = (event, id, property, attachment = '') => {
+	const handleVariationChange = (event, id, property, attachment = []) => {
 		const updatedVariations = localFontData.variations.map((variation) => {
 			if (variation.id === id) {
-				if( '' !== attachment ) {
+				if( attachment.length > 0 ) {
+					let attachmentDetails = [];
+					attachment.map(( file, index ) => (
+						attachmentDetails.push(file)
+					));
 					return {
 						...variation,
-						['font_file']: attachment.id,
-						['font_url']: attachment.url,
+						['font_url']: attachmentDetails,
 					};
 				} else {
 					return {

admin/dashboard/assets/src/dashboard-app/pages/fonts/edit/EditGoogleFont.js

@@ -17,7 +17,7 @@ const EditGoogleVariationItem = ({
 			oldWeight = '400italic';
 		}
 		if ( oldWeight.includes('italic') ) {
-			updatedWeight = `${oldWeight.replace('italic', '')} Italic`;
+			updatedWeight = `${oldWeight.replace('italic', '')} ` + __( 'Italic', 'custom-fonts' );
 		}
 		switch ( weight ) {
 			case '100':

admin/dashboard/assets/src/dashboard-app/pages/fonts/edit/EditLocalFont.js

@@ -17,7 +17,7 @@ const EditLocalVariationItem = ({
 		return parts.at(-1);
 	}
 
-	const [fontFileName, setFontFileName] = useState(variation.font_url ? getFileName(variation.font_url) : '');
+	const [fontFileName, setFontFileName] = useState(variation.font_url ? variation.font_url : '');
 
 	let frame;
 	const fontFileUploader = (event) => {
@@ -35,19 +35,31 @@ const EditLocalVariationItem = ({
 			button: {
 				text: __( 'Use Font', 'custom-fonts' ),
 			},
-			multiple: false, // Set to true to allow multiple files to be selected
+			multiple: true, // Set to true to allow multiple files to be selected
 		})
 
 		// When an image is selected in the media frame...
 		frame.on( 'select', function() {
 			// Get media attachment details from the frame state
-			let attachment = frame.state().get('selection').first().toJSON();
-			setFontFileName( attachment.filename );
+			var attachments = frame.state().get('selection').map(
+				function( attachment ) {
+					attachment.toJSON();
+					return attachment;
+				}
+			);
+
+			//loop through the array and do things with each attachment
+			let fontFileNames = [];
+			for (let i = 0; i < attachments.length; ++i) {
+				fontFileNames.push(attachments[i].attributes.url);
+			}
+
+			setFontFileName( fontFileNames );
 			handleVariationChange(
 				event,
 				variation.id,
 				"font_file",
-				attachment
+				fontFileNames
 			);
 		});
 
@@ -70,7 +82,7 @@ const EditLocalVariationItem = ({
 			{!toggleView ? (
 				<div className="flex items-center justify-between p-3.5 relative" onClick={expandFileField}>
 					<h2 className="text-sm font-semibold text-secondary">
-						{ '' !== fontFileName ? fontFileName : __('No file chosen', 'custom-fonts') }
+						{ fontFileName.length >= 1 ? __( 'Font files chosen', 'custom-fonts' ) : __('No file chosen', 'custom-fonts') }
 					</h2>
 					<div className="flex items-center justify-end gap-x-4 font-triggers">
 						<svg
@@ -122,7 +134,7 @@ const EditLocalVariationItem = ({
 							>
 								{ __( "Choose File", 'custom-fonts' ) }
 							</button>
-							<span className="font-filename"> { '' !== fontFileName ? fontFileName : __( 'No file chosen', 'custom-fonts' ) } </span>
+							<span className="font-filename"> { fontFileName.length >= 1 ? __( 'Font files:', 'custom-fonts' ) : __( 'No file chosen', 'custom-fonts' ) } </span>
 							<div className="font-triggers">
 								<svg
 									onClick={() => setToggleView(false)}
@@ -158,9 +170,17 @@ const EditLocalVariationItem = ({
 								)}
 							</div>
 						</div>
-
-						<div className="text-xs text-neutral mt-1.5">
-							Supported file types: .otf, .ttf, .woff, .woff2
+						{
+							( Array.isArray( fontFileName ) && fontFileName.length >= 1 ) && (
+								fontFileName.map(( file, index ) => (
+									<div className="text-xs text-neutral mt-1.5" key={index}>
+										{ `${__( 'File ', 'custom-fonts' )} ${index + 1}: ${ getFileName(file) }` }
+									</div>
+								))
+							)
+						}
+						<div className="text-xs text-neutral mt-1.5 italic">
+							{`${__( 'Supported file types: ', 'custom-fonts' )} .otf, .ttf, .woff, .woff2`}
 						</div>
 					</div>
 					<div className="grid grid-cols-2 gap-x-3">
@@ -254,14 +274,17 @@ const EditLocalFont = ({fontId}) => {
 		}));
 	};
 
-	const handleVariationChange = (event, id, property, attachment = '') => {
+	const handleVariationChange = (event, id, property, attachment = []) => {
 		const updatedVariations = editFontData.variations.map((variation) => {
 			if (variation.id === id) {
-				if( '' !== attachment ) {
+				if( attachment.length > 0 ) {
+					let attachmentDetails = [];
+					attachment.map(( file, index ) => (
+						attachmentDetails.push(file)
+					));
 					return {
 						...variation,
-						['font_file']: attachment.id,
-						['font_url']: attachment.url,
+						['font_url']: attachmentDetails,
 					};
 				} else {
 					return {

admin/dashboard/assets/src/dashboard-app/pages/fonts/edit/preview/EditGooglePreviewItem.js

@@ -22,7 +22,7 @@ const EditGFontVariation = (
 			oldWeight = '400italic';
 		}
 		if ( oldWeight.includes('italic') ) {
-			updatedWeight = `${oldWeight.replace('italic', '')} Italic`;
+			updatedWeight = `${oldWeight.replace('italic', '')} ` + __( 'Italic', 'custom-fonts' );
 		}
 		switch ( weight ) {
 			case '100':

admin/dashboard/assets/src/dashboard-app/pages/fonts/edit/preview/EditLocalPreviewItem.js

@@ -17,30 +17,48 @@ const EditLocalPreviewItem = (fontId) => {
 	const variations = editFont.variations;
 	const fontName = editFont.font_name;
 
+	const getSrcFormat = ( fontUrl ) => {
+		let format = '';
+		if (fontUrl.includes('.woff2')) {
+			format = 'format(\'woff2\')';
+		} else if (fontUrl.includes('.woff')) {
+			format = 'format(\'woff\')';
+		} else if (fontUrl.includes('.svg')) {
+			format = 'format(\'svg\')';
+		} else if (fontUrl.includes('.ttf')) {
+			format = 'format(\'truetype\')';
+		} else if (fontUrl.includes('.otf')) {
+			format = 'format(\'OpenType\')';
+		} else if (fontUrl.includes('.eot')) {
+			format = 'url(\'' + fontUrl + '?#iefix\') format(\'embedded-opentype\')';
+		} else {
+			// Do nothing.
+		}
+		return format;
+	}
+
 	const getLocalFontStyle = () => {
-		let defaultFont = `@font-face {\r\n\tfont-family: '${fontName}';\r\n\tfont-style: normal;`;
+		let defaultFont = `@font-face {\r\n\tfont-family: '${fontName}';`;
 		let srcFont = '';
 
 		variations.map((variation) => {
 			let fontUrl = variation.font_url,
 				weight = variation.font_weight,
-				src = 'url(\'' + fontUrl + '\') ';
-			if (fontUrl.includes('.woff2')) {
-				src += 'format(\'woff2\')';
-			} else if (fontUrl.includes('.woff')) {
-				src += 'format(\'woff\')';
-			} else if (fontUrl.includes('.svg')) {
-				src += 'format(\'svg\')';
-			} else if (fontUrl.includes('.ttf')) {
-				src += 'format(\'truetype\')';
-			} else if (fontUrl.includes('.otf')) {
-				src += 'format(\'OpenType\')';
-			} else if (fontUrl.includes('.eot')) {
-				src = 'url(\'' + fontUrl + '?#iefix\') format(\'embedded-opentype\')';
+				style = '' === variation.font_style ? 'normal' : variation.font_style,
+				src = '';
+			if ( Array.isArray( fontUrl ) ) {
+				fontUrl.map((url, index) => {
+					src += ' url(\'' + url + '\') ';
+					src += getSrcFormat( url );
+					if ( index !== fontUrl.length - 1 ) {
+						src += ','; // Add comma if not last item.
+					}
+				});
 			} else {
-				// Do nothing.
+				src += 'url(\'' + fontUrl + '\') ';
+				src += getSrcFormat( fontUrl );
 			}
-			srcFont += `${defaultFont}\r\n\tfont-weight: ${weight};\r\n\tsrc: ${src};\r\n}\r\n`;
+			srcFont += `${defaultFont}\r\n\tfont-style: ${style};\r\n\tfont-weight: ${weight};\r\n\tsrc: ${src};\r\n}\r\n`;
 		});
 
 		return srcFont;

admin/dashboard/assets/src/dashboard-app/pages/fonts/preview/GFontVariation.js

@@ -17,7 +17,7 @@ const GFontVariation = (props) => {
 			oldWeight = '400italic';
 		}
 		if ( oldWeight.includes('italic') ) {
-			updatedWeight = `${oldWeight.replace('italic', '')} Italic`;
+			updatedWeight = `${oldWeight.replace('italic', '')} ` + __( 'Italic', 'custom-fonts' );
 		}
 		switch ( weight ) {
 			case '100':

admin/dashboard/assets/src/dashboard-app/pages/fonts/preview/LFontVariation.js

@@ -18,7 +18,7 @@ const LFontVariation = (props) => {
 			oldWeight = '400italic';
 		}
 		if ( oldWeight.includes('italic') ) {
-			updatedWeight = `${oldWeight.replace('italic', '')} Italic`;
+			updatedWeight = `${oldWeight.replace('italic', '')} ` + __( 'Italic', 'custom-fonts' );
 		}
 		if ( 'italic' === style || 'oblique' === style ) {
 			if ( 'italic' === style ) {