first

wp-content/plugins/visual-portfolio/gutenberg/components/notice/index.js

@@ -0,0 +1,21 @@
+import './style.scss';
+
+import classnames from 'classnames/dedupe';
+
+import { Notice } from '@wordpress/components';
+
+/**
+ * Component Class
+ *
+ * @param props
+ */
+export default function NoticeComponent(props) {
+	const { className, ...allProps } = props;
+
+	return (
+		<Notice
+			className={classnames('vpf-component-notice', className)}
+			{...allProps}
+		/>
+	);
+}

wp-content/plugins/visual-portfolio/gutenberg/components/notice/style.scss

@@ -0,0 +1,20 @@
+@import "../../variables";
+
+.vpf-component-notice {
+	margin-top: 20px;
+	margin-right: 0;
+	margin-left: 0;
+
+	&.is-info {
+		color: $blue-50;
+		background-color: rgba($blue-30, 0.1);
+
+		p {
+			color: inherit;
+		}
+	}
+
+	p:last-of-type {
+		margin-bottom: 0 !important;
+	}
+}