remove list style and left padding & use block props correctly

This commit is contained in:
Daniel Waxweiler 2022-06-06 13:01:02 +02:00
parent 68bb45b9a4
commit 9c5e4b0f7b
3 changed files with 12 additions and 15 deletions

View File

@ -9,7 +9,11 @@ const { __ } = wp.i18n
const NAME = '<wordpress-name>'
export default ({ attributes, setAttributes }) => {
const blockProps = useBlockProps()
const blockProps = useBlockProps({
className: NAME + '_events-list',
'data-maximum': attributes.eventsCount,
'data-group-name': attributes.groupName,
})
useEffect(() => {
reloadEventList()
}, [])
@ -60,12 +64,7 @@ export default ({ attributes, setAttributes }) => {
/>
</PanelBody>
</InspectorControls>,
<div
className={NAME + '_events-list'}
data-maximum={attributes.eventsCount}
data-group-name={attributes.groupName}
{...blockProps}
>
<div {...blockProps}>
<div className="general-error" style={{ display: 'none' }}>
{__('The events could not be loaded!', '<wordpress-name>')}
</div>
@ -75,7 +74,7 @@ export default ({ attributes, setAttributes }) => {
<div className="loading-indicator" style={{ display: 'none' }}>
{__('Loading...', '<wordpress-name>')}
</div>
<ul></ul>
<ul style={{ 'list-style-type': 'none', 'padding-left': 0 }}></ul>
</div>,
]
}

View File

@ -7,13 +7,11 @@ const NAME = '<wordpress-name>'
export default ({ attributes }) => {
const blockProps = useBlockProps.save({
className: NAME + '_events-list',
'data-maximum': attributes.eventsCount,
'data-group-name': attributes.groupName,
})
return (
<div
data-maximum={attributes.eventsCount}
data-group-name={attributes.groupName}
{...blockProps}
>
<div {...blockProps}>
<div className="general-error" style={{ display: 'none' }}>
{__('The events could not be loaded!', '<wordpress-name>')}
</div>
@ -23,7 +21,7 @@ export default ({ attributes }) => {
<div className="loading-indicator" style={{ display: 'none' }}>
{__('Loading...', '<wordpress-name>')}
</div>
<ul></ul>
<ul style={{ 'list-style-type': 'none', 'padding-left': 0 }}></ul>
</div>
)
}

View File

@ -10,5 +10,5 @@ if (!defined('ABSPATH')) {
<div class="general-error" style="display: none;"><?php esc_html_e('The events could not be loaded!', 'connector-mobilizon'); ?></div>
<div class="group-not-found" style="display: none;"><?php esc_html_e('The group could not be found!', 'connector-mobilizon'); ?></div>
<div class="loading-indicator" style="display: none;"><?php esc_html_e('Loading...', 'connector-mobilizon'); ?></div>
<ul></ul>
<ul style="list-style-type: none; padding-left: 0;"></ul>
</div>