I'd like to extend the WordPress shortcode Edit button and have my own functionality onClick and at the same time don't lose/overwrite the one the WordPress has.
Here is the code I have right now (which works) but this overwrites the WordPress onClick which doesn't work any more and obviously I don't want to have that.
editor.addButton( 'wp_view_edit', {
tooltip : 'Edit',
icon : 'dashicon dashicons-edit',
onclick : function() {
// here goes my code for custom functionality
}
} );
And here is the original code from WP found in /wp-incldes/js/tinymcs/plugins/wp-view/plugins.js
editor.addButton( 'wp_view_edit', {
tooltip: 'Edit|button', // '|button' is not displayed, only used for context
icon: 'dashicon dashicons-edit',
onclick: function() {
var node = editor.selection.getNode();
if ( isView( node ) ) {
wp.mce.views.edit( editor, node );
}
}
} );
Related
I want to make it more obvious for a the editor that they need to click the UPDATE button after they made any changes to a wordpress page.
If a class can be added to the UPDATE button once any field, be it title, description or a custom field, has changed, then I can change the colour or make it pulsate.
Thank you
This goes into the functions.php of your child theme. To make your own animation you have to insert the CSS inside the Tag in the code snippet.
add_action('admin_head', 'orders_list_preview_css');
function orders_list_preview_css() {
echo "<script>
jQuery(document).ready(function($) {
$('body').on('keydown', '*[contenteditable=\"true\"]', function() {
if ($('.editor-post-publish-button.clicktoupdate').length < 1) {
$('.editor-post-publish-button').addClass('clicktoupdate')}
})
$('body').on('keydown', 'input', function() {
if ($('.editor-post-publish-button.clicktoupdate').length < 1) {
$('.editor-post-publish-button').addClass('clicktoupdate')}
})
})</script>";
echo "<style>/*cssgoeshere*/</style>";
I am developing a plugin for wordpress and I want to add the button to the header of gutenberg editor just like the one added by Elementor plugin "Edit with Elementor"
Can anyone guide me what should i do to achieve this... Thanks in Advance
I've checked Guternberg source code on header toolbar and unfortunately right now there's only not a beautiful solution possible. You can have 'custom' buttons but they are only done through calling registerPlugin with PluginSidebar component which creates sidebar and button appears on right side for pinned\starred sidebars (like Yoast SEO does).
Elementor does it this way: it subscribes to wp.data store changes and whenever something happens it injects it's button if it's not yet injected. Just because React rerenders DOM it may eventually wipe button out, so subscribing to changes is important so if it wipes out custom button js code just reinjects it.
Below is simplified ES5 code to inject a custom link\button or really any custom HTML into it (just as Elementor does).
// custom-link-in-toolbar.js
// wrapped into IIFE - to leave global space clean.
( function( window, wp ){
// just to keep it cleaner - we refer to our link by id for speed of lookup on DOM.
var link_id = 'Your_Super_Custom_Link';
// prepare our custom link's html.
var link_html = '<a id="' + link_id + '" class="components-button" href="#" >Custom Link</a>';
// check if gutenberg's editor root element is present.
var editorEl = document.getElementById( 'editor' );
if( !editorEl ){ // do nothing if there's no gutenberg root element on page.
return;
}
var unsubscribe = wp.data.subscribe( function () {
setTimeout( function () {
if ( !document.getElementById( link_id ) ) {
var toolbalEl = editorEl.querySelector( '.edit-post-header__toolbar' );
if( toolbalEl instanceof HTMLElement ){
toolbalEl.insertAdjacentHTML( 'beforeend', link_html );
}
}
}, 1 )
} );
// unsubscribe is a function - it's not used right now
// but in case you'll need to stop this link from being reappeared at any point you can just call unsubscribe();
} )( window, wp )
So create a js file in your theme or plugin and then link it this way:
add_action( 'enqueue_block_editor_assets', 'custom_link_injection_to_gutenberg_toolbar' );
function custom_link_injection_to_gutenberg_toolbar(){
// Here you can also check several conditions,
// for example if you want to add this link only on CPT you can
$screen= get_current_screen();
// and then
if ( 'cpt-name' === $screen->post_type ){
wp_enqueue_script( 'custom-link-in-toolbar', get_template_directory_uri() . '/assets/js/custom-link-in-toolbar.js', array(), '1.0', true );
}
}
Again this solution isn't perfect because we just inject our custom HTML into DOM which is managed by Gutenberg(React) but at this point it seems like the only way to achieve it, may be in future we'll have something like filters or hooks which will allow us to inject our custom components being rendered in toolbar but not yet.
Still Elementor does it this way. you can check it's code at
https://github.com/elementor/elementor/blob/master/assets/dev/js/admin/gutenberg.js
Now there is a slot for the Main dashboard button you can use that one
import { registerPlugin } from '#wordpress/plugins';
import {
__experimentalFullscreenModeClose as FullscreenModeClose,
__experimentalMainDashboardButton as MainDashboardButton,
} from '#wordpress/edit-post';
import { close,image } from '#wordpress/icons';
const MainDashboardButtonIconTest = () => (
<MainDashboardButton>
<FullscreenModeClose icon={ close } href="http://wordpress.org" />
<Button variant="primary" icon={image}>
My Button
</Button>
</MainDashboardButton>
);
registerPlugin( 'main-dashboard-button-icon-test', {
render: MainDashboardButtonIconTest,
} );
ref: https://developer.wordpress.org/block-editor/reference-guides/slotfills/main-dashboard-button/
I want to show a spinner icon while the 'Add To Cart' button is processing.
I'm using this code:
jQuery('a.add_to_cart_button').click(function(){
jQuery(this).append('<img src="/spinner.gif" width="20px" height="20px"/>')});
It works well after user clicks the 'Add to Cart' button, but I want to remove this icon after successful execution.
It's no need to use your own loader or spinner icon because WooCommerce itself provides its own loader in front end. Here is the flow to use the code of loader.
As soon as add to cart button is clicked. Add this line in your click function, it adds loader in a particular section
block( $( 'div.summary.entry-summary' ) );
Now when the product is successfully added to cart and your ajax response is success add this line to remove the loader. It removes the loader from that section.
unblock( $( 'div.summary.entry-summary' ) );
This code blocks and unblocks a particular section, if you want you can increase its scope by specifying the element you want.
These are the functions responsible for applying and removing the loader.
var is_blocked = function( $node ) {
return $node.is( '.processing' ) || $node.parents( '.processing' ).length;
};
var block = function( $node ) {
if ( ! is_blocked( $node ) ) {
$node.addClass( 'processing' ).block( {
message: null,
overlayCSS: {
background: '#fff',
opacity: 0.6
}
} );
}
};
var unblock = function( $node ) {
$node.removeClass( 'processing' ).unblock();
};
I created a plugin in wordpress to add a button to the TinyMCE. I have at the moment the code below which follows very strictly the example here:
https://www.gavick.com/blog/wordpress-tinymce-custom-buttons#tc-section-1
Php file
< ? php
/*
Plugin Name: TinyMCE Custom Buttons
Plugin URI:
Description:
Version:
Author:
Author URI:
License:
License URI:
*/
//Hook the button on init, so after loading wordpress
add_action('init', 'add_button1234');
//add filters within th function which loads after loading wordpress
function add_button1234() {
// add new buttons
add_filter('mce_buttons', 'myplugin_register_buttons1234');
// Load the TinyMCE plugin
add_filter('mce_external_plugins', 'register_1234');
}
//Add the newly created button to ithe $buttons array
function register_1234($buttons) {
array_push($buttons, 'separator', 'button1234');
return $buttons;
}
//create the button
function myplugin_register_tinymce_javascript1234($plugin_array) {
$plugin_array['button1234'] = plugins_url('plugin.js', __FILE__);
return $plugin_array;
}
?>
javascript file
(function() {
tinymce.PluginManager.add('button1234', function(editor, url) {
editor.addButton('button1234', {
text: 'My test button',
icon : false,
onclick : function() {
editor.insertContent('Hello World!');
}
});
});
})();
Also when I follow exactly the code from the site (only adapting the JS url, it doesn't work.) What could I possible have done wrong?
It looks like you might not be calling the right function when adding the filter mce_buttons in the add_button1234() function.
Change this line:
add_filter( 'mce_buttons', 'myplugin_register_buttons1234' );
To:
add_filter( 'mce_buttons', 'myplugin_register_tinymce_javascript1234' );
Woocommerce displays the product gallery on a lightbox or new tab by default. I would like to display the product gallery on the box where the product image is displayed. I tried WooCommerce Dynamic Gallery but the LITE version doesn't allow me to display all the product gallery images on each product. Also, it displays the image on the product description.
Can anyone suggest me a wordpress plugin or coding that can display the product gallery dynamically ? Thanks a lot.
It's possible with some straightforward jquery (see below). You'll also need to override the default lightbox that WooCommerce includes for the gallery.
I believe that it's possible to disable it from the admin under WC -> Settings -> Products -> Display. But you can also remove the styles and scripts directly.
I haven't tested this code on a fresh install of WooCommerce--this is some modified code from a site with a heavily customized product gallery that includes video support.
You'll need to include this in your theme's functons.php file, etc. etc.
add_action( 'wp_enqueue_scripts', 'wc_remove_lightboxes', 99 );
/**
* Remove WooCommerce default prettyphoto lightbox
*/
function wc_remove_lightboxes() {
// Styles
wp_dequeue_style( 'woocommerce_prettyPhoto_css' );
// Scripts
wp_dequeue_script( 'prettyPhoto' );
wp_dequeue_script( 'prettyPhoto-init' );
wp_dequeue_script( 'fancybox' );
wp_dequeue_script( 'enable-lightbox' );
}
/* Customize Product Gallery */
/**
* Click on thumbnail to view image for single product page gallery. Includes
* responsive image support using 'srcset' attribute introduced in WP 4.4
* #link https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/
*/
add_action( 'wp_footer', 'wc_gallery_override' );
function wc_gallery_override()
{
// Only include if we're on a single product page.
if (is_product()) {
?>
<script type="text/javascript">
( function( $ ) {
// Override default behavior
$('.woocommerce-main-image').on('click', function( event ) {
event.preventDefault();
});
// Find the individual thumbnail images
var thumblink = $( '.thumbnails .zoom' );
// Add our active class to the first thumb which will already be displayed
//on page load.
thumblink.first().addClass('active');
thumblink.on( 'click', function( event ) {
// Override default behavior on click.
event.preventDefault();
// We'll generate all our attributes for the new main
// image from the thumbnail.
var thumb = $(this).find('img');
// The new main image url is formed from the thumbnail src by removing
// the dimensions appended to the file name.
var photo_fullsize = thumb.attr('src').replace('-300x300','');
// srcset attributes are associated with thumbnail img. We'll need to also change them.
var photo_srcset = thumb.attr('srcset');
// Retrieve alt attribute for use in main image.
var alt = thumb.attr('alt');
// If the selected thumb already has the .active class do nothing.
if ($(this).hasClass('active')) {
return false;
} else {
// Remove .active class from previously selected thumb.
thumblink.removeClass('active');
// Add .active class to new thumb.
$(this).addClass('active');
// Fadeout main image and replace various attributes with those defined above. Once the image is loaded we'll make it visible.
$('.woocommerce-main-image img').css( 'opacity', '0' ).attr('src', photo_fullsize).attr('srcset', photo_srcset).attr('alt', alt).load(function() {
$(this).animate({ opacity: 1 });
});
return false;
}
});
} )( jQuery );
</script>
<?php
}
}