Skip to content

Commit 436e3f8

Browse files
krugazulkrugazul
authored
Merge pull request #674 from lightspeedwp/bug/666-modal-button-block-styling
Fix Modal Button Block styling support application and add border controls
2 parents b146adb + a8590ad commit 436e3f8

8 files changed

Lines changed: 65 additions & 36 deletions

File tree

‎build/blocks/modal-button/block.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,12 @@
4646
"typography": {
4747
"fontSize": true,
4848
"lineHeight": true
49+
},
50+
"__experimentalBorder": {
51+
"color": true,
52+
"radius": true,
53+
"style": true,
54+
"width": true
4955
}
5056
},
5157
"editorScript": "file:./index.js"

‎build/blocks/modal-button/index.asset.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '5b3c1226dc4e6adc8fdd');
1+
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'c8ac86a5b0058fe41b96');

‎build/blocks/modal-button/index.js‎

Lines changed: 15 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/style-rtl.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -578,8 +578,6 @@ button.facetwp-reset {
578578
@media (max-width: 768px) {
579579
.single-tour-operator {
580580
/* Styling for the toggle button */
581-
/* Styling for the SVG icons */
582-
/* Collapsed state for the second wp-block-group */
583581
}
584582
.single-tour-operator .toggle-button {
585583
display: inline-flex;
@@ -591,12 +589,18 @@ button.facetwp-reset {
591589
font-size: 14px;
592590
color: var(--wp--preset--color--contrast);
593591
}
592+
.single-tour-operator {
593+
/* Styling for the SVG icons */
594+
}
594595
.single-tour-operator .toggle-icon {
595596
width: 16px;
596597
height: 16px;
597598
fill: var(--wp--preset--color--contrast);
598599
margin-right: 5px;
599600
}
601+
.single-tour-operator {
602+
/* Collapsed state for the second wp-block-group */
603+
}
600604
.single-tour-operator section.wp-block-group .wp-block-group.collapsed, .single-tour-operator section.wp-block-cover .wp-block-group.collapsed {
601605
display: none; /* Hide the content */
602606
}

‎build/style.css‎

Lines changed: 6 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎changelog.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
- Query Block Pagination not Inherting the correct query vars. [#608](https://github.com/lightspeedwp/tour-operator/pull/608)
6161
- Fixed – Excluded build/ directory from CodeRabbit reviews by updating .coderabbit.yaml. [#620](https://github.com/lightspeedwp/tour-operator/pull/620)
6262
- Hide "location" custom field and exclude relevant JS when Google Maps API key is missing. Only the map field is shown. ([#657](https://github.com/lightspeedwp/tour-operator/issues/657))
63+
- Fixed Modal Button block styling supports applying to wrapper instead of button element, added border controls. [#674](https://github.com/lightspeedwp/tour-operator/pull/674)
6364

6465
### Security
6566
-

‎src/blocks/modal-button/block.json‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,13 @@
66
"title": "Modal Button",
77
"category": "tour-operator",
88
"description": "A button that opens a modal dialog.",
9-
"keywords": ["button", "modal", "popup", "enquiry", "contact"],
9+
"keywords": [
10+
"button",
11+
"modal",
12+
"popup",
13+
"enquiry",
14+
"contact"
15+
],
1016
"textdomain": "lsx-tour-operator",
1117
"attributes": {
1218
"text": {
@@ -40,8 +46,13 @@
4046
"typography": {
4147
"fontSize": true,
4248
"lineHeight": true
49+
},
50+
"__experimentalBorder": {
51+
"color": true,
52+
"radius": true,
53+
"style": true,
54+
"width": true
4355
}
4456
},
4557
"editorScript": "file:./index.js"
4658
}
47-

‎src/blocks/modal-button/index.js‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ registerBlockType('lsx-tour-operator/modal-button', {
3636
const [isLoading, setIsLoading] = useState(true);
3737

3838
const blockProps = useBlockProps({
39-
className: `wp-block-button has-text-align-${align}`,
39+
className: `has-text-align-${align} wp-block-button__link`,
4040
});
4141

4242
// Fetch modal options from the REST API
@@ -117,8 +117,8 @@ registerBlockType('lsx-tour-operator/modal-button', {
117117
</PanelBody>
118118
</InspectorControls>
119119

120-
<div {...blockProps}>
121-
<div className={`wp-block-button__link`}>
120+
<div className={`wp-block-button is-layout-flex`}>
121+
<button {...blockProps} type="button">
122122
<RichText
123123
tagName="span"
124124
value={text}
@@ -131,36 +131,37 @@ registerBlockType('lsx-tour-operator/modal-button', {
131131
)}
132132
allowedFormats={[]}
133133
/>
134-
</div>
135-
{!modalId && !isLoading && (
136-
<div className="block-editor-warning">
137-
{__(
138-
'Please select a modal in the block settings.',
139-
'tour-operator'
140-
)}
141-
</div>
142-
)}
134+
</button>
143135
</div>
136+
{!modalId && !isLoading && (
137+
<div className="block-editor-warning">
138+
{__(
139+
'Please select a modal in the block settings.',
140+
'tour-operator'
141+
)}
142+
</div>
143+
)}
144144
</>
145145
);
146146
},
147147

148148
save: ({ attributes }) => {
149149
const { text, modalId, align } = attributes;
150150
const blockProps = useBlockProps.save({
151-
className: `wp-block-button has-text-align-${align}`,
151+
className: `wp-block-button wp-block-button__link has-text-align-${align}`,
152152
});
153153

154154
if (!modalId) {
155155
return null;
156156
}
157157

158158
return (
159-
<div {...blockProps}>
159+
<div className={`wp-block-button is-layout-flex`}>
160160
<a
161-
className={`wp-block-button__link`}
161+
{...blockProps}
162162
href={`#to-modal-${modalId}`}
163-
type="button"
163+
aria-haspopup="dialog"
164+
aria-controls={`to-modal-${modalId}`}
164165
>
165166
{text}
166167
</a>

0 commit comments

Comments
 (0)