Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

prototype contextual notice component – php func, template, and css

This commit is contained in:
Rua Haszard 2023-05-25 16:01:44 +12:00
parent 43c7212f53
commit 27e2f7b334
3 changed files with 86 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
plugins/woocommerce/client/legacy/css/admin.scss
View File

@ -8019,3 +8019,52 @@ table.bar_chart {
width: calc(100% - 24px);
}
}
.woocommerce-contextual-notice {
margin-top: 1em;
background-color: lightgray;
padding: 12px 16px;
.woocommerce-contextual-notice-cta {
padding-top: 1em;
}
// Default to "info" theme.
background-color: #F0F6FC;
}
.woocommerce-contextual-notice-success {
// These are shared / Gutenberg colours, replace with variables :)
background-color: #f0fcf0;
.woocommerce-contextual-notice-cta .components-button,
.woocommerce-contextual-notice-cta .components-button:hover:not(:disabled) {
box-shadow: inset 0 0 0 1px #18cc3f;
border-color: #18cc3f;
color: #18cc3f;
}
}
.woocommerce-contextual-notice-warning {
// These are shared / Gutenberg colours, replace with variables :)
background-color: #FCF9E8;
.woocommerce-contextual-notice-cta .components-button,
.woocommerce-contextual-notice-cta .components-button:hover:not(:disabled) {
box-shadow: inset 0 0 0 1px #BD8600;
border-color: #BD8600;
color: #BD8600;
}
}
.woocommerce-contextual-notice-error {
// These are shared / Gutenberg colours, replace with variables :)
background-color: #FCF0F1;
.woocommerce-contextual-notice-cta .components-button,
.woocommerce-contextual-notice-cta .components-button:hover:not(:disabled) {
box-shadow: inset 0 0 0 1px #CC1818;
border-color: #CC1818;
color: #CC1818;
}
}

18
plugins/woocommerce/includes/admin/class-wc-admin-notices.php
View File

@ -252,6 +252,24 @@ class WC_Admin_Notices {
update_option( 'woocommerce_admin_notice_' . $name, wp_kses_post( $notice_html ) );
}
/**
* Render a custom contextual notice.
*
* This is a wrapper for a contextual notice template.
* Allows Woo or extensions to render a relevant notice in
* a specific section of the Woo UI.
* For example, rendering a payment dispute notice in order
* edit screen, using `woocommerce_order_details_after_payment_info` hook.
*
* @param string $notice_html Notice message. Can be rich html (e.g. bold, italics, links).
* @param string $severity Severity of the notice. Can be 'error', 'warning', 'success', 'info'.
* @param string $button_text Button text (plain text).
* @param string $button_url URL to link to.
*/
public static function render_contextual_notice( $notice_html, $button_text, $severity, $button_url ) {
include dirname( __FILE__ ) . '/views/html-notice-contextual.php';
}
/**
* Output any stored custom notices.
*/

19
plugins/woocommerce/includes/admin/views/html-notice-contextual.php Normal file
View File

@ -0,0 +1,19 @@
<?php
/**
* Admin View: Custom Notices
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="woocommerce-contextual-notice woocommerce-contextual-notice-<?php echo esc_attr( $severity ); ?>">
<?php echo wp_kses_post( $notice_html ); ?>
<div class="woocommerce-contextual-notice-cta" >
<a class="components-button is-secondary"
href="<?php echo esc_url( $button_url ); ?>">
<?php echo esc_html( $button_text ) ?>
</a>
</div>
</div>