canvas / components / basic-elements / class-block-tabs.php

class-block-tabs.php in Canvas 2.4.9, at components/basic-elements/class-block-tabs.php

187 lines 5.2 KB

Raw Download Zip

1	<?php
2	/**
3	* Tabs Block.
4	*
5	* @package Canvas
6	*/
7
8	/**
9	* Initialize Tabs block.
10	*/
11	class CNVS_Block_Tabs {
12
13	/**
14	* Initialize
15	*/
16	public function __construct() {
17	add_action( 'init', array( $this, 'init' ) );
18	add_filter( 'canvas_register_block_type', array( $this, 'register_block_type' ) );
19	}
20
21	/**
22	* Enqueue the block's assets for the editor.
23	*/
24	public function init() {
25	// Editor Scripts.
26	wp_register_script(
27	'canvas-block-tabs-editor-script',
28	plugins_url( 'block-tabs/block.js', __FILE__ ),
29	array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor' ),
30	filemtime( plugin_dir_path( __FILE__ ) . 'block-tabs/block.js' ),
31	true
32	);
33	wp_register_script(
34	'canvas-block-tab-editor-script',
35	plugins_url( 'block-tab/block.js', __FILE__ ),
36	array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor' ),
37	filemtime( plugin_dir_path( __FILE__ ) . 'block-tab/block.js' ),
38	true
39	);
40
41	// Editor Styles.
42	wp_register_style(
43	'canvas-block-tabs-editor-style',
44	plugins_url( 'block-tabs/block-editor.css', __FILE__ ),
45	array(),
46	filemtime( plugin_dir_path( __FILE__ ) . 'block-tabs/block-editor.css' )
47	);
48
49	wp_style_add_data( 'canvas-block-tabs-editor-style', 'rtl', 'replace' );
50
51	// Styles.
52	wp_register_style(
53	'canvas-block-tabs-style',
54	plugins_url( 'block-tabs/block.css', __FILE__ ),
55	array(),
56	filemtime( plugin_dir_path( __FILE__ ) . 'block-tabs/block.css' )
57	);
58
59	wp_style_add_data( 'canvas-block-tabs-style', 'rtl', 'replace' );
60
61	// Scripts.
62	wp_register_script( 'canvas-block-tabs-script', plugin_dir_url( __FILE__ ) . 'block-tabs/public-block-tabs.js', array( 'jquery' ), cnvs_get_setting( 'version' ), true );
63	}
64
65	/**
66	* Register block
67	*
68	* @param array $blocks all registered blocks.
69	* @return array
70	*/
71	public function register_block_type( $blocks ) {
72	$blocks[] = array(
73	'name' => 'canvas/tabs',
74	'title' => esc_html__( 'Tabs', 'canvas' ),
75	'description' => '',
76	'category' => 'canvas',
77	'keywords' => array(),
78	'icon' => '
79	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
80	<path d="M21 3H3C1.9 3 1 3.9 1 5V19C1 20.1 1.9 21 3 21H21C22.1 21 23 20.1 23 19V5C23 3.9 22.1 3 21 3ZM21 19H3V5H13V9H21V19Z" />
81	</svg>
82	',
83	'supports' => array(
84	'className' => true,
85	'anchor' => true,
86	'html' => false,
87	'canvasSpacings' => true,
88	'canvasBorder' => true,
89	'canvasResponsive' => true,
90	),
91	'styles' => array(
92	array(
93	'name' => 'cnvs-block-tabs-default',
94	'label' => esc_html__( 'Default', 'canvas' ),
95	'isDefault' => true,
96	),
97	array(
98	'name' => 'cnvs-block-tabs-pills',
99	'label' => esc_html__( 'Pills', 'canvas' ),
100	),
101	),
102	'location' => array(),
103
104	'sections' => array(),
105	'layouts' => array(),
106
107	// Set fields just for add block attributes.
108	// Editor render for this block is custom JSX
109	// so we don't need to render fields automatically.
110	'fields' => array(
111	array(
112	'key' => 'tabActive',
113	'type' => 'type-number',
114	'default' => 0,
115	),
116	array(
117	'key' => 'tabsData',
118	'type' => 'type-array',
119	'default' => array(
120	'Tab 1',
121	'Tab 2',
122	),
123	'items' => array(
124	'type' => 'string',
125	),
126	),
127	array(
128	'key' => 'tabsPosition',
129	'label' => esc_html__( 'Position', 'canvas' ),
130	'type' => 'select',
131	'choices' => array(
132	'horizontal' => esc_html__( 'Horizontal', 'canvas' ),
133	'vertical' => esc_html__( 'Vertical', 'canvas' ),
134	),
135	'default' => 'horizontal',
136	),
137	),
138	'template' => dirname( __FILE__ ) . '/block-tabs/render.php',
139
140	// enqueue registered scripts/styles.
141	'style' => is_admin() ? '' : 'canvas-block-tabs-style',
142	'script' => is_admin() ? '' : 'canvas-block-tabs-script',
143	'editor_script' => 'canvas-block-tabs-editor-script',
144	'editor_style' => 'canvas-block-tabs-editor-style',
145	);
146
147	$blocks[] = array(
148	'name' => 'canvas/tab',
149	'title' => esc_html__( 'Tab', 'canvas' ),
150	'description' => '',
151	'category' => 'canvas',
152	'keywords' => array(),
153	'icon' => '
154	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
155	<path d="M21 3H3C1.9 3 1 3.9 1 5V19C1 20.1 1.9 21 3 21H21C22.1 21 23 20.1 23 19V5C23 3.9 22.1 3 21 3ZM21 19H3V5H13V9H21V19Z" />
156	</svg>
157	',
158	'supports' => array(
159	'inserter' => false,
160	'reusable' => false,
161	'className' => true,
162	'anchor' => true,
163	'canvasSpacings' => true,
164	'canvasBorder' => true,
165	'canvasResponsive' => true,
166	),
167	'parent' => array(
168	'canvas/tabs',
169	),
170	'styles' => array(),
171	'location' => array(),
172
173	'sections' => array(),
174	'layouts' => array(),
175	'fields' => array(),
176	'template' => dirname( __FILE__ ) . '/block-tab/render.php',
177
178	// enqueue registered scripts/styles.
179	'editor_script' => 'canvas-block-tab-editor-script',
180	);
181
182	return $blocks;
183	}
184	}
185
186	new CNVS_Block_Tabs();
187