Splitting this out from #20578
The change to the notice action button (float: right added) doesn't seem ideal to me.
1
Large screen with a notice long text: position and alignments don't look so ideal:
2
On a custom notice, it is possible to reset the default CSS classes and set custom CSS classes on the action button. See noDefaultClasses. By using className it is possible, for example, to add an is-link class to make the button look like a link. In this case, the layout doesn't look so ideal as well:
3
By using __unstableHTML, it is possible to use HTML for the notice text. However, __unstableHTML renders an additional <div> element via the RawHTML component. This additional div breaks the flex layout:
4
Pre-existing issue: it seems to me there's something that doesn't work as expected in the RawHTML component. To my understanding, the wrapper div should be "stripped out by the serializer unless there are non-children props passed". However, seems to me it isn't stripped out.
|
/** |
|
* Component used as equivalent of Fragment with unescaped HTML, in cases where |
|
* it is desirable to render dangerous HTML without needing a wrapper element. |
|
* To preserve additional props, a `div` wrapper _will_ be created if any props |
|
* aside from `children` are passed. |
|
* |
|
* @param {Object} props |
|
* @param {string} props.children HTML to render. |
|
* @param {Object} props.props Any additonal props to be set on the containing div. |
|
* |
|
* @return {WPComponent} Dangerously-rendering component. |
|
*/ |
|
export default function RawHTML( { children, ...props } ) { |
|
// The DIV wrapper will be stripped by serializer, unless there are |
|
// non-children props present. |
|
return createElement( 'div', { |
|
dangerouslySetInnerHTML: { __html: children }, |
|
...props, |
|
} ); |
|
} |
Splitting this out from #20578
The change to the notice action button (
float: rightadded) doesn't seem ideal to me.1
Large screen with a notice long text: position and alignments don't look so ideal:
2
On a custom notice, it is possible to reset the default CSS classes and set custom CSS classes on the action button. See
noDefaultClasses. By usingclassNameit is possible, for example, to add anis-linkclass to make the button look like a link. In this case, the layout doesn't look so ideal as well:3
By using
__unstableHTML, it is possible to use HTML for the notice text. However,__unstableHTMLrenders an additional<div>element via theRawHTMLcomponent. This additional div breaks the flex layout:4
Pre-existing issue: it seems to me there's something that doesn't work as expected in the
RawHTMLcomponent. To my understanding, the wrapper div should be "stripped out by the serializer unless there are non-children props passed". However, seems to me it isn't stripped out.gutenberg/packages/element/src/raw-html.js
Lines 6 to 25 in c5fab6d