Merge pull request #1681 from vektor-inc/add/animation/wrap-unwrap

アニメーション ラップ、アンラップ機能を追加

editor-css/_editor_before.scss

@@ -6,37 +6,39 @@
 	fill: #c00;
 }
 
-.editor-block-list-item-vk-blocks-taxonomy:after,
-.editor-block-list-item-vk-blocks-select-post-list:after,
-.editor-block-list-item-vk-blocks-accordion:after,
-.editor-block-list-item-vk-blocks-animation:after,
-.editor-block-list-item-vk-blocks-archive-list:after,
-.editor-block-list-item-vk-blocks-breadcrumb:after,
-.editor-block-list-item-vk-blocks-button-outer:after,
-.editor-block-list-item-vk-blocks-card:after,
-.editor-block-list-item-vk-blocks-child-page:after,
-.editor-block-list-item-vk-blocks-dynamic-text:after,
-.editor-block-list-item-vk-blocks-timeline:after,
-.editor-block-list-item-vk-blocks-step:after,
-.editor-block-list-item-vk-blocks-outer:after,
-.editor-block-list-item-vk-blocks-post-list:after,
-.editor-block-list-item-vk-blocks-table-of-contents:after,
-.editor-block-list-item-vk-blocks-table-of-contents-new:after,
-.editor-block-list-item-vk-blocks-simple-table:after,
-.editor-block-list-item-vk-blocks-grid-column:after,
-.editor-block-list-item-vk-blocks-gridcolcard:after,
-.editor-block-list-item-vk-blocks-icon-card:after {
-	position: absolute;
-	top: 0;
-	right: 0;
-	content: "Pro";
-	display: inline-block;
-	font-size: 10px;
-	line-height: 1;
-	color: #fff;
-	background-color: #cd3034;
-	border-radius: 2px;
-	padding: 3px 4px;
+.block-editor-inserter__block-list {
+	.editor-block-list-item-vk-blocks-taxonomy:after,
+	.editor-block-list-item-vk-blocks-select-post-list:after,
+	.editor-block-list-item-vk-blocks-accordion:after,
+	.editor-block-list-item-vk-blocks-animation:after,
+	.editor-block-list-item-vk-blocks-archive-list:after,
+	.editor-block-list-item-vk-blocks-breadcrumb:after,
+	.editor-block-list-item-vk-blocks-button-outer:after,
+	.editor-block-list-item-vk-blocks-card:after,
+	.editor-block-list-item-vk-blocks-child-page:after,
+  .editor-block-list-item-vk-blocks-dynamic-text:after,
+	.editor-block-list-item-vk-blocks-timeline:after,
+	.editor-block-list-item-vk-blocks-step:after,
+	.editor-block-list-item-vk-blocks-outer:after,
+	.editor-block-list-item-vk-blocks-post-list:after,
+	.editor-block-list-item-vk-blocks-table-of-contents:after,
+	.editor-block-list-item-vk-blocks-table-of-contents-new:after,
+	.editor-block-list-item-vk-blocks-simple-table:after,
+	.editor-block-list-item-vk-blocks-grid-column:after,
+	.editor-block-list-item-vk-blocks-gridcolcard:after,
+	.editor-block-list-item-vk-blocks-icon-card:after {
+		position: absolute;
+		top: 0;
+		right: 0;
+		content: "Pro";
+		display: inline-block;
+		font-size: 10px;
+		line-height: 1;
+		color: #fff;
+		background-color: #cd3034;
+		border-radius: 2px;
+		padding: 3px 4px;
+	}
 }
 
 // ラベル名と説明の文字の太さも大きさも同じでわからないので太字に

readme.txt

@@ -62,6 +62,8 @@ e.g.
 
 == Changelog ==
 
+[ Add Function ][ Animation(Pro) ] Added transforms settings to wrap and unwrap.
+
 = 1.56.0 =
 [ Add Block ][ Dynamic Text Block (Pro) ] Add Dynamic text block.
 [ Add Function ][ Admin screen ] Added block style manager function.

src/blocks/_pro/animation/index.js

@@ -8,6 +8,7 @@ import edit from './edit';
 import save from './save';
 import deprecatedHooks from './deprecated/hooks';
 import deprecated from './deprecated/save';
+import transforms from './transforms';
 
 import { addFilter } from '@wordpress/hooks';
 
@@ -17,6 +18,7 @@ export { metadata, name };
 
 export const settings = {
 	icon: <Icon />,
+	transforms,
 	edit,
 	save,
 	deprecated,

src/blocks/_pro/animation/transforms.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			isMultiBlock: true,
+			blocks: ['*'],
+			__experimentalConvert(blocks) {
+				// Clone the Blocks to be Grouped
+				// Failing to create new block references causes the original blocks
+				// to be replaced in the switchToBlockType call thereby meaning they
+				// are removed both from their original location and within the
+				// new group block.
+				const groupInnerBlocks = blocks.map((block) => {
+					return createBlock(
+						block.name,
+						block.attributes,
+						block.innerBlocks
+					);
+				});
+
+				return createBlock('vk-blocks/animation', {}, groupInnerBlocks);
+			},
+		},
+	],
+	to: [
+		{
+			type: 'block',
+			blocks: ['*'],
+			transform: (attributes, innerBlocks) => innerBlocks,
+		},
+	],
+};
+
+export default transforms;