Skip to content

Commit f4b8eb9

Browse files
abaicusabaicus
authored
Merge pull request #47 from Codeinwp/chore/notices
chore: add design pack notice
2 parents 87cf366 + b5479fe commit f4b8eb9

8 files changed

Lines changed: 389 additions & 4 deletions

File tree

‎assets/css/src/design-pack-notice.scss‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
@custom-media --max-tablet (max-width: 769px);
2+
@custom-media --max-desktop (max-width: 1200px);
3+
4+
#fork-design-pack-notice {
5+
6+
.notice-wrap {
7+
display: flex;
8+
align-items: center;
9+
gap: 15px;
10+
border: 0;
11+
border-radius: 8px;
12+
padding: 20px 25px;
13+
opacity: 0;
14+
animation: fade-down-in 0.3s ease forwards 0.3s;
15+
z-index: 10000;
16+
position: fixed;
17+
background: #fff;
18+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
19+
right: 10px;
20+
bottom: 35px;
21+
22+
@media (--max-desktop) {
23+
bottom: 10px;
24+
right: 10px;
25+
padding: 10px 15px;
26+
margin-left: 10px;
27+
}
28+
29+
&.dismissed {
30+
animation: fade-up-out 0.3s ease forwards 0s;
31+
}
32+
}
33+
34+
svg {
35+
flex-shrink: 0;
36+
}
37+
38+
button {
39+
border: 0;
40+
background: 0;
41+
cursor: pointer;
42+
padding: 0;
43+
border-radius: 5px;
44+
45+
&:hover {
46+
background: #e7e7e7;
47+
}
48+
}
49+
50+
.content-wrap {
51+
display: grid;
52+
}
53+
54+
span {
55+
font-weight: 600;
56+
color: #6a6a6a;
57+
font-size: 12px;
58+
59+
@media (--max-desktop) {
60+
font-size: 10px;
61+
}
62+
}
63+
64+
p {
65+
66+
@media (--max-desktop) {
67+
font-size: 12px;
68+
}
69+
font-size: 16px;
70+
margin: 0;
71+
padding: 0;
72+
}
73+
74+
a {
75+
margin-left: 35px;
76+
font-weight: 700;
77+
font-size: 16px;
78+
text-decoration: 0;
79+
color: #fff;
80+
background: #383fef;
81+
border-radius: 5px;
82+
padding: 12px 16px;
83+
text-align: center;
84+
85+
@media (--max-desktop) {
86+
font-size: 14px;
87+
padding: 7px 10px;
88+
margin-left: 0;
89+
flex-shrink: 0;
90+
}
91+
}
92+
}
93+
94+
@keyframes fade-down-in {
95+
96+
0% {
97+
opacity: 0;
98+
transform: translateY(-20px);
99+
}
100+
101+
100% {
102+
opacity: 1;
103+
transform: translateY(0);
104+
}
105+
}
106+
107+
@keyframes fade-up-out {
108+
109+
0% {
110+
opacity: 1;
111+
transform: translateY(0);
112+
}
113+
114+
100% {
115+
opacity: 0;
116+
transform: translateY(-20px);
117+
}
118+
}

‎assets/js/src/components/DesignPackNotice.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
/* global designPackNoticeData */
2+
import { useSelect } from '@wordpress/data';
3+
import { Icon, closeSmall } from '@wordpress/icons';
4+
import { useEffect, useState } from '@wordpress/element';
5+
6+
const logo = (
7+
<svg
8+
width="45"
9+
height="45"
10+
viewBox="0 0 45 45"
11+
fill="none"
12+
xmlns="http://www.w3.org/2000/svg"
13+
>
14+
<path
15+
fillRule="evenodd"
16+
clipRule="evenodd"
17+
d="M14.2605 34.0991C16.1724 35.2426 18.397 35.8142 20.9347 35.8142C22.4643 35.8142 23.9067 35.5197 25.2623 34.9306C25.799 34.6974 26.3031 34.4343 26.7744 34.1413V35.2946H36.7336V5.07344C41.7793 9.19954 45 15.4737 45 22.5C45 34.9264 34.9264 45 22.5 45C10.0736 45 0 34.9264 0 22.5C0 10.0736 10.0736 0 22.5 0C23.8699 0 25.2113 0.122431 26.5137 0.356948V10.5154C26.1184 10.3146 25.7013 10.1357 25.2623 9.97864C23.9067 9.4588 22.4643 9.19889 20.9347 9.19889C18.397 9.19889 16.1724 9.77069 14.2605 10.9143C12.3834 12.0233 10.9061 13.5828 9.82848 15.5928C8.78562 17.6027 8.26423 19.9076 8.26423 22.5066C8.26423 25.1057 8.78562 27.4106 9.82848 29.4206C10.9061 31.3957 12.3834 32.9552 14.2605 34.0991ZM25.0537 26.3536C24.4282 26.7001 23.6806 26.8732 22.8118 26.8732C22.0124 26.8732 21.2822 26.6826 20.6217 26.3016C19.9613 25.9201 19.4401 25.4002 19.0575 24.7421C18.7099 24.0836 18.536 23.3382 18.536 22.5066C18.536 21.6751 18.7274 20.9297 19.1097 20.2712C19.4919 19.6131 19.9959 19.0931 20.6217 18.7117C21.2822 18.3306 22.0295 18.1401 22.864 18.1401C23.6981 18.1401 24.4282 18.3306 25.0537 18.7117C25.7142 19.0931 26.2183 19.6131 26.5658 20.2712C26.9134 20.8951 27.0874 21.6402 27.0874 22.5066C27.0874 23.3731 26.8963 24.1356 26.5137 24.7941C26.1661 25.4522 25.6796 25.9721 25.0537 26.3536Z"
18+
fill="#383FEF"
19+
/>
20+
</svg>
21+
);
22+
23+
const BLOCK_PATTERN_INSERTED_NOTICE = 'block-pattern-inserted-notice';
24+
export default () => {
25+
const [ dismissed, setDismissed ] = useState( false );
26+
const [ noticeTriggered, setNoticeTriggered ] = useState( false );
27+
28+
const patternInserted = useSelect(
29+
( select ) =>
30+
select( 'core/notices' )
31+
.getNotices()
32+
.filter( ( n ) => n.id === BLOCK_PATTERN_INSERTED_NOTICE )
33+
.length > 0
34+
);
35+
36+
useEffect( () => {
37+
if ( noticeTriggered ) {
38+
return;
39+
}
40+
if ( patternInserted ) {
41+
setNoticeTriggered( true );
42+
}
43+
}, [ patternInserted ] );
44+
45+
const { ajaxUrl, ajaxAction, nonce, strings, buttonLink } =
46+
designPackNoticeData;
47+
const { dismiss, recommends, learnMore, noticeHtml } = strings;
48+
49+
const dismissNotice = () => {
50+
const data = new window.FormData();
51+
52+
data.append( 'action', ajaxAction );
53+
data.append( 'nonce', nonce );
54+
55+
fetch( ajaxUrl, {
56+
method: 'POST',
57+
body: data,
58+
} ).then( () => {
59+
setDismissed( true );
60+
} );
61+
};
62+
63+
const classes = [ 'notice-wrap' ];
64+
65+
if ( dismissed ) {
66+
classes.push( 'dismissed' );
67+
}
68+
69+
if ( ! noticeTriggered ) {
70+
return null;
71+
}
72+
73+
return (
74+
<div className={ classes.join( ' ' ) }>
75+
{ logo }
76+
77+
<div className="content-wrap">
78+
<span>{ recommends }</span>
79+
80+
<p dangerouslySetInnerHTML={ { __html: noticeHtml } }></p>
81+
</div>
82+
83+
<a
84+
onClick={ dismissNotice }
85+
href={ buttonLink }
86+
target="_blank"
87+
rel="noopener noreferrer"
88+
>
89+
{ learnMore }
90+
</a>
91+
92+
<button onClick={ dismissNotice }>
93+
<Icon icon={ closeSmall }></Icon>
94+
<span hidden>{ dismiss }</span>
95+
</button>
96+
</div>
97+
);
98+
};

‎assets/js/src/design-pack-notice.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { createRoot } from '@wordpress/element';
2+
3+
import DesignPackNotice from './components/DesignPackNotice';
4+
5+
const container = document.getElementById( 'fork-design-pack-notice' );
6+
7+
if ( container ) {
8+
createRoot( container ).render( <DesignPackNotice /> );
9+
}

‎inc/Admin.php‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,82 @@ public function setup_admin_hooks() {
3434
add_action( 'wp_ajax_fork_dismiss_welcome_notice', array( $this, 'remove_welcome_notice' ) );
3535
add_action( 'wp_ajax_fork_set_otter_ref', array( $this, 'set_otter_ref' ) );
3636
add_action( 'admin_print_scripts', array( $this, 'add_nps_form' ) );
37+
38+
add_action( 'enqueue_block_editor_assets', array( $this, 'add_fse_design_pack_notice' ) );
39+
add_action( 'wp_ajax_fork_dismiss_design_pack_notice', array( $this, 'remove_design_pack_notice' ) );
40+
}
41+
42+
/**
43+
* Render design pack notice.
44+
*
45+
* @return void
46+
*/
47+
public function add_fse_design_pack_notice() {
48+
if ( ! $this->should_render_design_pack_notice() ) {
49+
return;
50+
}
51+
52+
Assets_Manager::enqueue_style( Assets_Manager::ASSETS_SLUGS['design-pack-notice'], 'design-pack-notice' );
53+
Assets_Manager::enqueue_script(
54+
Assets_Manager::ASSETS_SLUGS['design-pack-notice'],
55+
'design-pack-notice',
56+
true,
57+
array(),
58+
array(
59+
'nonce' => wp_create_nonce( 'fork-dismiss-design-pack-notice' ),
60+
'ajaxUrl' => esc_url( admin_url( 'admin-ajax.php' ) ),
61+
'ajaxAction' => 'fork_dismiss_design_pack_notice',
62+
'buttonLink' => tsdk_utmify( 'https://themeisle.com/plugins/fse-design-pack', 'editor', 'fork' ),
63+
'strings' => array(
64+
'dismiss' => __( 'Dismiss', 'fork' ),
65+
'recommends' => __( 'Fork recommends', 'fork' ),
66+
'learnMore' => __( 'Learn More', 'fork' ),
67+
'noticeHtml' => sprintf(
68+
/* translators: %s: FSE Design Pack: */
69+
__( '%s Access a collection of 40+ layout patterns ready to import to your website', 'fork' ),
70+
'<strong>FSE Design Pack:</strong>'
71+
),
72+
),
73+
),
74+
'designPackNoticeData'
75+
);
76+
77+
echo '<div id="fork-design-pack-notice"></div>';
78+
}
79+
80+
/**
81+
* Should we show the design pack notice?
82+
*
83+
* @return bool
84+
*/
85+
private function should_render_design_pack_notice() {
86+
// Already using.
87+
if ( is_plugin_active( 'fse-design-pack/fse-design-pack.php' ) ) {
88+
return false;
89+
}
90+
91+
// Notice was dismissed.
92+
if ( get_option( Constants::CACHE_KEYS['dismissed-fse-design-pack-notice'], 'no' ) === 'yes' ) {
93+
return false;
94+
}
95+
96+
return true;
97+
}
98+
99+
/**
100+
* Dismiss the design pack notice.
101+
*
102+
* @return void
103+
*/
104+
public function remove_design_pack_notice() {
105+
if ( ! isset( $_POST['nonce'] ) ) {
106+
return;
107+
}
108+
if ( ! wp_verify_nonce( sanitize_text_field( $_POST['nonce'] ), 'fork-dismiss-design-pack-notice' ) ) {
109+
return;
110+
}
111+
update_option( Constants::CACHE_KEYS['dismissed-fse-design-pack-notice'], 'yes' );
112+
wp_die();
37113
}
38114

39115
/**

‎inc/Assets_Manager.php‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@
1616
*/
1717
class Assets_Manager {
1818
const ASSETS_SLUGS = array(
19-
'frontend-css' => 'fork-style',
20-
'editor-css' => 'fork-editor',
21-
'welcome-notice' => 'fork-welcome-notice',
19+
'frontend-css' => 'fork-style',
20+
'editor-css' => 'fork-editor',
21+
'welcome-notice' => 'fork-welcome-notice',
22+
'design-pack-notice' => 'fork-design-pack-notice',
2223
);
2324

2425
/**

‎inc/Constants.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
*/
1717
class Constants {
1818
const CACHE_KEYS = array(
19-
'dismissed-welcome-notice' => 'fork-welcome-notice-dismissed',
19+
'dismissed-welcome-notice' => 'fork-welcome-notice-dismissed',
20+
'dismissed-fse-design-pack-notice' => 'fork-design-pack-dismissed',
2021
);
2122
}

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"@semantic-release/exec": "^6.0.3",
3030
"@semantic-release/git": "^10.0.1",
3131
"@wordpress/eslint-plugin": "^12.8.0",
32+
"@wordpress/icons": "^9.47.0",
3233
"@wordpress/scripts": "^23.6.0",
3334
"@wordpress/stylelint-config": "^20.0.2",
3435
"conventional-changelog-simple-preset": "^1.0.20",

0 commit comments

Comments
 (0)