@total_onion/onion-library 3.0.8 → 3.0.9

package/createNewBlock.js

@@ -3,9 +3,7 @@ const fs = require('fs');
 const {globSync} = require('glob');
 const yargs = require('yargs');
 const {exec} = require('child_process');
-const swiperTemplates = require('./new-block-templates/template-swiper');
-const vueTemplates = require('./new-block-templates/template-vue');
-const acfTemplate = require('./new-block-templates/template-acf');
+const acfTemplate = require('./new-block-templates/template-block-json');
 const defaultTemplates = require('./new-block-templates/template-default');
 
 const themePath =
@@ -132,8 +130,14 @@ fs.writeFileSync(
 	`${themePath}/views/blocks/${newBlockName}.twig`,
 	templateData
 );
+
+// Create block directory inside acf-blocks if it doesn't exist
+if (!fs.existsSync(`${themePath}/inc/acf-blocks/${newBlockName}`)) {
+	fs.mkdirSync(`${themePath}/inc/acf-blocks/${newBlockName}`);
+}
+
 fs.writeFileSync(
-	`${themePath}/inc/acf-blocks/${newBlockName}.php`,
+	`${themePath}/inc/acf-blocks/${newBlockName}/block.json`,
 	acfTemplate(newBlockName, projectName)
 );
 // fs.writeFileSync(

package/new-block-templates/template-block-json.js

@@ -0,0 +1,35 @@
+module.exports = function (newBlockName, projectName) {
+	const blockTitle =
+		newBlockName.charAt(0).toUpperCase() +
+		newBlockName.slice(1).replaceAll('-', ' ');
+	const namespace = projectName.toLowerCase().replaceAll(' ', '-');
+
+	return `{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "${namespace}/${newBlockName}",
+	"title": "${blockTitle}",
+	"category": "common",
+	"icon": "smiley",
+	"description": "${blockTitle} block",
+	"keywords": ["content", "text"],
+	"version": "1.0.0",
+	"textdomain": "${namespace}",
+	"supports": {
+		"anchor": true,
+		"align": false
+	},
+	"example": {
+		"attributes": {
+			"mode": "preview",
+			"data": {
+				"is_example": true
+			}
+		}
+	},
+	"acf": {
+		"mode": "preview",
+		"renderCallback": "core_block_render_post_object_v3"
+	}
+}`;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@total_onion/onion-library",
-	"version": "3.0.8",
+	"version": "3.0.9",
 	"description": "Component library",
 	"main": "index.js",
 	"scripts": {

package/removeBlock.js

@@ -1,8 +1,9 @@
 require('dotenv').config();
 const fs = require('fs');
 const readline = require('readline');
-const { globSync } = require('glob');
-const themePath = process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
+const {globSync} = require('glob');
+const themePath =
+	process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
 
 const rl = readline.createInterface({
 	input: process.stdin,
@@ -16,68 +17,60 @@ const finalAnswer = {
 let result = 'no';
 
 function deleteBlockFiles(blockName) {
-	fs.unlink(
-		`${themePath}/assets/js/blocks/${blockName}.js`,
-		(err) => {
-			if (err) {
-				console.error(err);
-			}
+	fs.unlink(`${themePath}/assets/js/blocks/${blockName}.js`, (err) => {
+		if (err) {
+			console.error(err);
 		}
-	);
-	fs.unlink(
-		`${themePath}/assets/scss/blocks/${blockName}.scss`,
-		(err) => {
-			if (err) {
-				console.error(err);
-			}
+	});
+	fs.unlink(`${themePath}/assets/scss/blocks/${blockName}.scss`, (err) => {
+		if (err) {
+			console.error(err);
 		}
-	);
-	if(fs.existsSync(`${themePath}/assets/scss/blocks/${blockName}`)) {
-		fs.rmSync(`${themePath}/assets/scss/blocks/${blockName}`, { recursive: true })
+	});
+	if (fs.existsSync(`${themePath}/assets/scss/blocks/${blockName}`)) {
+		fs.rmSync(`${themePath}/assets/scss/blocks/${blockName}`, {
+			recursive: true
+		});
 	}
-	fs.unlink(
-		`${themePath}/views/blocks/${blockName}.twig`,
-		(err) => {
-			if (err) {
-				console.error(err);
-			}
+	fs.unlink(`${themePath}/views/blocks/${blockName}.twig`, (err) => {
+		if (err) {
+			console.error(err);
 		}
-	);
-	fs.unlink(
-		`${themePath}/assets/vue/blocks/${blockName}.vue`,
-		(err) => {
-			if (err) {
-				console.error(err);
-			}
+	});
+	fs.unlink(`${themePath}/assets/vue/blocks/${blockName}.vue`, (err) => {
+		if (err) {
+			console.error(err);
 		}
-	);
-	if(fs.existsSync(`${themePath}/assets/vue/blocks/${blockName}`)) {
-		fs.rmSync(`${themePath}/assets/vue/blocks/${blockName}`, { recursive: true })
+	});
+	if (fs.existsSync(`${themePath}/assets/vue/blocks/${blockName}`)) {
+		fs.rmSync(`${themePath}/assets/vue/blocks/${blockName}`, {
+			recursive: true
+		});
 	}
 	fs.unlink(`./cypress/e2e/components/${blockName}.cy.js`, (err) => {
 		if (err) {
 			console.error(err);
 		}
 	});
-	fs.unlink(
-		`${themePath}/inc/acf-blocks/${blockName}.php`,
-		(err) => {
-			if (err) {
-				console.error(err);
-			}
-		}
-	);
+
+	// Remove the block directory in acf-blocks (contains block.json)
+	if (fs.existsSync(`${themePath}/inc/acf-blocks/${blockName}`)) {
+		fs.rmSync(`${themePath}/inc/acf-blocks/${blockName}`, {
+			recursive: true
+		});
+	}
+
 	removeACFJson(blockName);
 	rl.close();
 }
 
 function removeACFJson(name) {
-	const existingAcfFiles = globSync(`${themePath}/acf-json/*.json`)
-		.map((path) => {
-			const assetKey = path
-				.replace('assets/js/blocks/', '');
+	const existingAcfFiles = globSync(`${themePath}/acf-json/*.json`).map(
+		(path) => {
+			const assetKey = path.replace('assets/js/blocks/', '');
 			return assetKey;
-		});
+		}
+	);
 
 	existingAcfFiles.forEach((file, index) => {
 		let rawdata = fs.readFileSync(file);
@@ -110,8 +103,8 @@ rl.question(
 			rl.close();
 		}
 		result = 'yes';
-		if(process.argv[2].indexOf("block-") === 0) {
-			deleteBlockFiles(process.argv[2].split("block-")[1]);
+		if (process.argv[2].indexOf('block-') === 0) {
+			deleteBlockFiles(process.argv[2].split('block-')[1]);
 		}
 	}
 );

package/new-block-templates/template-acf-pattern.js

@@ -1,25 +0,0 @@
-module.exports = function (newBlockName, projectName) {
-	return `<?php
-
-acf_register_block_type(
-	array(
-		'name'            => '${newBlockName}',
-		'title'           => __( '${
-			newBlockName.charAt(0).toUpperCase() +
-			newBlockName.slice(1).replaceAll('-', ' ')
-		}', '${projectName} Admin' ),
-		'render_callback' => 'core_block_render_post_object_v3',
-		'category'        => 'child-patterns',
-		'icon'            => get_svg_icon_content('green-brick.svg'),
-		'keywords'        => array('content', 'text' ),
-		'mode'            => 'preview',
-		'supports'        => array( 'align' => false, 'anchor' => true ),
-		'example' => [
-			'attributes' => [
-				'mode' => 'preview',
-				'data' => ['is_example' => true]
-			]
-		]
-	)
-);`;
-};

package/new-block-templates/template-acf.js

@@ -1,19 +0,0 @@
-module.exports = function (newBlockName, projectName) {
-	return `<?php
-
-acf_register_block_type(
-	array(
-		'name'            => '${newBlockName}',
-		'title'           => __( '${
-			newBlockName.charAt(0).toUpperCase() +
-			newBlockName.slice(1).replaceAll('-', ' ')
-		}', '${projectName} Admin' ),
-		'render_callback' => 'core_block_render_post_object_v3',
-		'category'        => 'common',
-		'icon'            => get_svg_icon_content('brick.svg'),
-		'keywords'        => array('content', 'text' ),
-		'mode'            => 'preview',
-		'supports'        => array( 'align' => false, 'anchor' => true ),
-	)
-);`;
-};

package/new-block-templates/template-swiper.js

@@ -1,125 +0,0 @@
-module.exports = {
-	templatejs: function () {
-		return `import {loadCss, getSwiperAssetsV2} from '@total_onion/onion-utils/onion-utils';
-import('swiper/css/bundle');
-
-export default function carouselmultilayoutJs(options = {}) {
-	try {
-		const {block} = options;
-		Promise.all([
-			getSwiperAssetsV2(),
-			loadCss(block.dataset.assetkey, options)
-		]).then((values) => {
-			const {
-				Swiper,
-				Navigation,
-				Pagination,
-				Lazy,
-				Autoplay,
-				EffectFade,
-				EffectCoverflow,
-				EffectCreative
-			} = values[0][0];
-
-			const dataAttributes = block.dataset;
-			const slidesDesktop = dataAttributes.desktopslides;
-			const autoplayCarousel = Number(dataAttributes.autoplay) === 1;
-			const centerActiveSlide =
-				Number(dataAttributes.centeractiveslide) === 1;
-			const delay = dataAttributes.transitiondelay * 1000;
-			const speed = Number(dataAttributes.transitionspeed);
-			const style =
-				dataAttributes.transitionstyle === 'default'
-					? ''
-					: dataAttributes.transitionstyle;
-			const carouselmultilayoutSwiper = new Swiper(
-				block.querySelector('.swiper'),
-				{
-					modules: [
-						Navigation,
-						Pagination,
-						Lazy,
-						Autoplay,
-						EffectFade,
-						EffectCoverflow,
-						EffectCreative
-					],
-					slidesPerView: 1,
-					loop: false,
-					preloadImages: true,
-					watchSlidesVisibility: true,
-					effect: style,
-					creativeEffect: {
-						prev: {
-							shadow: true,
-							translate: [0, 0, -400]
-						},
-						next: {
-							translate: ['100%', 0, 0]
-						}
-					},
-					coverflowEffect: {
-						rotate: 20,
-						depth: 50,
-						scale: 0.9,
-						modifier: 1,
-						slideShadows: true
-					},
-					fadeEffect: {
-						crossFade: true
-					},
-					lazy: {
-						loadPrevNext: true
-					},
-					speed,
-					autoplay: autoplayCarousel
-						? {
-								delay
-						  }
-						: '',
-					watchOverflow: true,
-					breakpoints: {
-						1024: {
-							slidesPerView: slidesDesktop,
-							spaceBetween: 50,
-							centeredSlides: centerActiveSlide
-						}
-					},
-					navigation: {
-						nextEl: block.querySelector('.swiper-button-next'),
-						prevEl: block.querySelector('.swiper-button-prev')
-					},
-					pagination: {
-						el: block.querySelector('.swiper-pagination'),
-						type: 'bullets',
-						clickable: true
-					}
-				}
-			);
-		});
-	} catch (error) {
-		console.error(error);
-	}
-}
-`;
-	},
-	templatetwig: function (newBlockName) {
-		return `
-<div class="swiper">
-	<div class="swiper-wrapper">
-		<div class="swiper-slide ${newBlockName}__slide">
-			{% set desktopImage = Image(fields.desktop_image) %}
-			{% set mobileImage = Image(fields.mobile_image) %}
-			{% set desktopSizes = '(min-width: 1440px) 100vw, (min-width: 1024px) 1024px, (min-width: 768px) 768px' %}
-			{% set mobileSizes = '(min-width: 768px) 768px, (min-width: 500px) 500px, 250px' %}
-			
-			{{ include('components/responsive-image.twig', {fields : fields, block : block, blockClassName : blockClassName}, with_context = false) }}
-		</div>
-	</div>
-	<div class="swiper-pagination"></div>
-	<div class="swiper-button-prev"></div>
-	<div class="swiper-button-next"></div>
-</div>
-`;
-	}
-};

package/new-block-templates/template-vue.js

@@ -1,58 +0,0 @@
-module.exports = {
-	templatevuefile: function (newBlockName) {
-		return `
-<template>
-	<div>
-	</div>
-</template>
-
-<script lang="javascript">
-import animations from "@pernod-ricard-global-cms/jsanimations";
-export default {
-	name: "${newBlockName}",
-	data() {
-		return {
-			allDrinks: [],
-		};
-	},
-	beforeMount() {
-	},
-	mounted() {
-
-	},
-	methods: {
-
-	},
-	computed: {
-
-	},
-};
-</script>
-
-`;
-	},
-	templatejs: function (newBlockName) {
-		return `
-import {loadCss} from '@total_onion/onion-utils/onion-utils';
-';
-import {createApp} from 'vue';
-import ${newBlockName} from 'Assets/vue/blocks/${newBlockName}.vue'; 
-
-export default function ${newBlockName.replaceAll('-', '')}Js ( options = {} ) {
-	try {
-		const { block } = options;
-		loadCss(block.dataset.assetkey, options).then(() => {
-			const mountElement = block.children[0];
-			createApp(${newBlockName}, {...mountElement.dataset}).mount(mountElement);
-		});
-	} catch ( error ) {
-		console.error( error );
-	}
-}`;
-	},
-	templatetwig: function (newBlockName) {
-		return `
-	<div id="${newBlockName}"></div>
-`;
-	}
-};