Skip to content

Commit 27178f6

Browse files
ajaydsouzaajaydsouza
committed
New block: Knowledge Base Sections.
1 parent dc6b8b6 commit 27178f6

12 files changed

Lines changed: 380 additions & 1 deletion

File tree

‎includes/blocks/build/sections/block.json‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"$schema": "https://schemas.wp.org/trunk/block.json",
3+
"apiVersion": 3,
4+
"name": "knowledgebase/sections",
5+
"version": "2.3.0",
6+
"title": "Knowledge Base Sections",
7+
"category": "design",
8+
"icon": "book",
9+
"keywords": [
10+
"knowledgbase",
11+
"sections",
12+
"kb"
13+
],
14+
"description": "Display the list of sections when browsing a knowledge base page",
15+
"supports": {
16+
"html": false
17+
},
18+
"attributes": {
19+
"className": {
20+
"type": "string",
21+
"default": ""
22+
},
23+
"title": {
24+
"type": "string",
25+
"default": ""
26+
},
27+
"termID": {
28+
"type": "string",
29+
"default": ""
30+
},
31+
"depth": {
32+
"type": "string",
33+
"default": ""
34+
},
35+
"beforeLiItem": {
36+
"type": "string",
37+
"default": ""
38+
},
39+
"afterLiItem": {
40+
"type": "string",
41+
"default": ""
42+
}
43+
},
44+
"example": {},
45+
"textdomain": "knowledgebase",
46+
"editorScript": "file:./index.js",
47+
"editorStyle": "file:./index.css"
48+
}

‎includes/blocks/build/sections/index-rtl.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎includes/blocks/build/sections/index.asset.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-core-data', 'wp-data', 'wp-i18n', 'wp-server-side-render'), 'version' => '8dcdb4c49c5937146313');

‎includes/blocks/build/sections/index.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎includes/blocks/build/sections/index.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎includes/blocks/class-blocks.php‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ public function register_blocks() {
4545
'alerts' => 'render_alerts_block',
4646
'articles' => 'render_articles_block',
4747
'breadcrumb' => 'render_breadcrumb_block',
48+
'sections' => 'render_sections_block',
4849
);
4950

5051
foreach ( $blocks as $block_name => $render_callback ) {
@@ -199,4 +200,53 @@ public static function render_breadcrumb_block( $attributes ) {
199200

200201
return $output;
201202
}
203+
204+
/**
205+
* Renders the `knowledgebase/sections` block on server.
206+
*
207+
* @since 2.3.0
208+
*
209+
* @param array $attributes The block attributes.
210+
*
211+
* @return string Returns the sections list.
212+
*/
213+
public function render_sections_block( $attributes ) {
214+
$mappings = array(
215+
'term_id' => 'termID',
216+
'before_li_item' => 'beforeLiItem',
217+
'after_li_item' => 'afterLiItem',
218+
);
219+
220+
$attributes = $this->map_attributes( $attributes, $mappings );
221+
222+
$arguments = array(
223+
'is_block' => 1,
224+
'depth' => ( ! empty( $attributes['depth'] ) ) ? (int) $attributes['depth'] : 0,
225+
'before_li_item' => ( ! empty( $attributes['before_li_item'] ) ) ? $attributes['before_li_item'] : '',
226+
'after_li_item' => ( ! empty( $attributes['after_li_item'] ) ) ? $attributes['after_li_item'] : '',
227+
);
228+
229+
$term_id = ! empty( $attributes['term_id'] ) ? (int) $attributes['term_id'] : 0;
230+
231+
/**
232+
* Filters arguments passed to wzkb_categories_list for the block.
233+
*
234+
* @since 2.3.0
235+
*
236+
* @param array $arguments Knowledge Base block options array.
237+
* @param array $attributes Block attributes array.
238+
*/
239+
$arguments = apply_filters( 'wzkb_sections_block_options', $arguments, $attributes );
240+
241+
$wrapper_attributes = get_block_wrapper_attributes();
242+
243+
$output = sprintf(
244+
'<div %1$s>%2$s%3$s</div>',
245+
$wrapper_attributes,
246+
! empty( $attributes['title'] ) ? '<h2>' . esc_html( $attributes['title'] ) . '</h2>' : '',
247+
wzkb_categories_list( $term_id, 0, $arguments )
248+
);
249+
250+
return $output;
251+
}
202252
}

‎includes/blocks/src/sections/block.json‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"$schema": "https://schemas.wp.org/trunk/block.json",
3+
"apiVersion": 3,
4+
"name": "knowledgebase/sections",
5+
"version": "2.3.0",
6+
"title": "Knowledge Base Sections",
7+
"category": "design",
8+
"icon": "book",
9+
"keywords": ["knowledgbase", "sections", "kb"],
10+
"description": "Display the list of sections when browsing a knowledge base page",
11+
"supports": {
12+
"html": false
13+
},
14+
"attributes": {
15+
"className": {
16+
"type": "string",
17+
"default": ""
18+
},
19+
"title": {
20+
"type": "string",
21+
"default": ""
22+
},
23+
"termID": {
24+
"type": "string",
25+
"default": ""
26+
},
27+
"depth": {
28+
"type": "string",
29+
"default": ""
30+
},
31+
"beforeLiItem": {
32+
"type": "string",
33+
"default": ""
34+
},
35+
"afterLiItem": {
36+
"type": "string",
37+
"default": ""
38+
}
39+
},
40+
"example": {},
41+
"textdomain": "knowledgebase",
42+
"editorScript": "file:./index.js",
43+
"editorStyle": "file:./index.css"
44+
}

‎includes/blocks/src/sections/edit.js‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import { __ } from '@wordpress/i18n';
2+
import ServerSideRender from '@wordpress/server-side-render';
3+
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
4+
import { useSelect } from '@wordpress/data';
5+
import { store as coreStore } from '@wordpress/core-data';
6+
7+
import {
8+
Disabled,
9+
ComboboxControl,
10+
PanelBody,
11+
PanelRow,
12+
Spinner,
13+
TextControl,
14+
Notice,
15+
} from '@wordpress/components';
16+
17+
import './editor.scss';
18+
19+
export default function Edit({ attributes, setAttributes }) {
20+
const { termID, depth, beforeLiItem, afterLiItem } = attributes;
21+
22+
const blockProps = useBlockProps();
23+
24+
const { terms, hasResolved, error } = useSelect((select) => {
25+
const query = { per_page: -1 };
26+
const selectorArgs = ['taxonomy', 'wzkb_category', query];
27+
28+
try {
29+
return {
30+
terms: select(coreStore).getEntityRecords(...selectorArgs),
31+
hasResolved: select(coreStore).hasFinishedResolution(
32+
'getEntityRecords',
33+
selectorArgs
34+
),
35+
error: null,
36+
};
37+
} catch (fetchError) {
38+
return {
39+
terms: [],
40+
hasResolved: true,
41+
error: fetchError,
42+
};
43+
}
44+
}, []);
45+
46+
const termOptions =
47+
terms?.map((term) => ({
48+
label: `${term.name} (#${term.id})`,
49+
value: term.id.toString(),
50+
})) || [];
51+
52+
return (
53+
<>
54+
<InspectorControls>
55+
{error && (
56+
<Notice status="error" isDismissible={false}>
57+
{__(
58+
'Error loading categories. Please try again.',
59+
'knowledgebase'
60+
)}
61+
</Notice>
62+
)}
63+
64+
<PanelBody
65+
title={__(
66+
'Knowledge Base Sections Settings',
67+
'knowledgebase'
68+
)}
69+
initialOpen={true}
70+
>
71+
<PanelRow>
72+
{!hasResolved ? (
73+
<Spinner />
74+
) : (
75+
<ComboboxControl
76+
label={__(
77+
'Select Knowledge Base Section',
78+
'knowledgebase'
79+
)}
80+
value={termID}
81+
onChange={(value) =>
82+
setAttributes({ termID: value })
83+
}
84+
options={termOptions}
85+
help={__(
86+
'Search and select a knowledge base section',
87+
'knowledgebase'
88+
)}
89+
/>
90+
)}
91+
</PanelRow>
92+
<PanelRow>
93+
<TextControl
94+
label={__('Depth', 'knowledgebase')}
95+
value={depth}
96+
type="number"
97+
min="0"
98+
onChange={(value) =>
99+
setAttributes({ depth: value })
100+
}
101+
help={__(
102+
'Enter the depth of sections to display (0 for all)',
103+
'knowledgebase'
104+
)}
105+
/>
106+
</PanelRow>
107+
<PanelRow>
108+
<TextControl
109+
label={__('Before list item', 'knowledgebase')}
110+
value={beforeLiItem}
111+
onChange={(value) =>
112+
setAttributes({ beforeLiItem: value })
113+
}
114+
help={__(
115+
'HTML/text to add before each list item',
116+
'knowledgebase'
117+
)}
118+
/>
119+
</PanelRow>
120+
<PanelRow>
121+
<TextControl
122+
label={__('After list item', 'knowledgebase')}
123+
value={afterLiItem}
124+
onChange={(value) =>
125+
setAttributes({ afterLiItem: value })
126+
}
127+
help={__(
128+
'HTML/text to add after each list item',
129+
'knowledgebase'
130+
)}
131+
/>
132+
</PanelRow>
133+
</PanelBody>
134+
</InspectorControls>
135+
136+
<div {...blockProps}>
137+
<Disabled>
138+
<ServerSideRender
139+
block="knowledgebase/sections"
140+
attributes={attributes}
141+
/>
142+
</Disabled>
143+
</div>
144+
</>
145+
);
146+
}

‎includes/blocks/src/sections/editor.scss‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/**
2+
* The following styles get applied inside the editor only.
3+
*
4+
* Replace them with your own styles or remove the file completely.
5+
*/
6+
7+
.wzkb-articles-list {
8+
margin: 0 !important;
9+
padding: 0 !important;
10+
}
11+
12+
.wzkb-articles-list li {
13+
margin: 5px 0;
14+
list-style-type: none !important;
15+
}
16+
17+
.wzkb-articles-list li:before {
18+
content: "\f123";
19+
display: inline-block;
20+
width: 20px;
21+
height: 20px;
22+
font-size: 20px;
23+
line-height: 1;
24+
font-family: dashicons;
25+
text-decoration: inherit;
26+
font-weight: 400;
27+
font-style: normal;
28+
vertical-align: top;
29+
text-align: center;
30+
-webkit-transition: color .1s ease-in 0;
31+
transition: color .1s ease-in 0;
32+
-webkit-font-smoothing: antialiased;
33+
-moz-osx-font-smoothing: grayscale;
34+
margin-right: 10px;
35+
word-wrap: break-word;
36+
color: #666;
37+
}
38+
39+
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
40+
@media only screen and (max-width: 480px) {
41+
.col {
42+
margin: 1% 0;
43+
}
44+
45+
.span_2_of_2,
46+
.span_1_of_2,
47+
.span_1_of_3,
48+
.span_2_of_3,
49+
.span_3_of_3,
50+
.span_1_of_4,
51+
.span_2_of_4,
52+
.span_3_of_4,
53+
.span_4_of_4,
54+
.span_1_of_5,
55+
.span_2_of_5,
56+
.span_3_of_5,
57+
.span_4_of_5,
58+
.span_5_of_5 {
59+
width: 100%;
60+
}
61+
}

‎includes/blocks/src/sections/index.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* Registers a new block provided a unique name and an object defining its behavior.
3+
*
4+
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
5+
*/
6+
import { registerBlockType } from '@wordpress/blocks';
7+
8+
/**
9+
* Internal dependencies
10+
*/
11+
import Edit from './edit';
12+
13+
/**
14+
* Every block starts by registering a new block type definition.
15+
*
16+
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
17+
*/
18+
registerBlockType('knowledgebase/sections', {
19+
/**
20+
* @see ./edit.js
21+
*/
22+
edit: Edit,
23+
});

0 commit comments

Comments
 (0)