updateData({ styles: val })}
28 | options={[
29 | {
30 | name: 'name',
31 | label: __('Name', 'lazy-blocks'),
32 | },
33 | {
34 | name: 'label',
35 | label: __('Label', 'lazy-blocks'),
36 | },
37 | ]}
38 | />
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/assets/block-builder/boxes/title/editor.scss:
--------------------------------------------------------------------------------
1 | @import "../../../variables";
2 |
3 | .lzb-block-builder .lzb-block-builder-title {
4 | // block title.
5 | max-width: 800px;
6 | padding: 20px 0;
7 | margin-right: auto;
8 | margin-bottom: 10px;
9 | margin-left: auto;
10 | overflow: hidden;
11 |
12 | textarea {
13 | display: block;
14 | width: 100%;
15 | font: inherit;
16 | font-size: 18px !important;
17 | font-weight: 500;
18 | border: none;
19 | outline: none;
20 | box-shadow: none;
21 | resize: none;
22 |
23 | &::placeholder {
24 | color: #ccc;
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/assets/block-builder/boxes/title/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Styles.
3 | */
4 | import './editor.scss';
5 |
6 | /**
7 | * External dependencies.
8 | */
9 | import slugify from 'slugify';
10 |
11 | /**
12 | * WordPress dependencies.
13 | */
14 | import { __ } from '@wordpress/i18n';
15 | import { useRef, useEffect } from '@wordpress/element';
16 | import { useSelect } from '@wordpress/data';
17 | import { useEntityProp } from '@wordpress/core-data';
18 |
19 | const REGEXP_NEWLINES = /[\r\n]+/g;
20 |
21 | export default function TitleSettings(props) {
22 | const textareaRef = useRef();
23 |
24 | const { data, updateData } = props;
25 | const { slug } = data;
26 |
27 | const { postType } = useSelect((select) => {
28 | const { getCurrentPostType } = select('core/editor');
29 |
30 | return {
31 | postType: getCurrentPostType(),
32 | };
33 | }, []);
34 |
35 | const [postTitle, setPostTitle] = useEntityProp(
36 | 'postType',
37 | postType,
38 | 'title'
39 | );
40 |
41 | function maybeAddSlug() {
42 | if (slug || !postTitle) {
43 | return;
44 | }
45 |
46 | const newSlug = slugify(postTitle, {
47 | replacement: '-',
48 | lower: true,
49 | remove: /[^\w\s$0-9-*+~.$(_)#&|'"!:;@/\\]/g,
50 | });
51 |
52 | updateData({
53 | slug: newSlug,
54 | });
55 | }
56 |
57 | // Set automatic height.
58 | useEffect(() => {
59 | if (textareaRef.current) {
60 | // We need to reset the height momentarily to get the correct scrollHeight for the textarea
61 | textareaRef.current.style.height = '0px';
62 | const scrollHeight = textareaRef.current.scrollHeight;
63 |
64 | // We then set the height directly, outside of the render loop
65 | // Trying to set this with state or a ref will product an incorrect value.
66 | textareaRef.current.style.height = `${scrollHeight}px`;
67 | }
68 | }, [textareaRef, postTitle]);
69 |
70 | return (
71 |
72 |