Gutenberg frontend block styles not applying - php

I have a block registered that adds different styles to the editor and front end of a block display.
The editor styles are showing, but I can't get the frontend styles to show.
Here is what I have in my index.php file:
<?php
defined('ABSPATH') || exit;
// add_action engueue_block_editor_assets
add_action( 'enqueue_block_editor_assets', 'block_examples_02_stylesheets_block_enqueue_block_editor_assets');
// plugin-name_block-name_function-name
function block_examples_02_stylesheets_block_enqueue_block_editor_assets() {
wp_enqueue_script(
// name of script
'block-examples_02-stylesheets-block-editor',
// full url of script location
plugins_url( 'block.build.js', __FILE__ ),
// dependencies of script
array( 'wp-blocks', 'wp-i18n', 'wp-element' ),
// version number
filemtime( plugin_dir_path( __FILE__) . 'block.build.js')
);
wp_enqueue_style(
'block-examples_02-stylesheets-block-editor',
plugins_url( 'editor.css', __FILE__ ),
array('wp-edit-blocks'),
filemtime( plugin_dir_path( __FILE__) . 'editor.css')
);
}
// add_action engueue_block_editor_assets
add_action( 'enqueue_block_assets', 'block_examples_02_stylesheets_block_enqueue_block_assets');
// plugin-name_block-name_function-name
function block_examples_02_stylesheets_block_enqueue_block_assets() {
wp_enqueue_style(
'block-examples_02-stylesheets-block',
plugins_url( 'style.css', __FILE__ ),
array('wp-blocks'),
filemtime( plugin_dir_path( __FILE__) . 'style.css')
);
}

Ok, so it appears that removing 'wp-blocks' fixes the issue and the block is now reflecting the styling from the style.css file.
// add_action engueue_block_editor_assets
add_action( 'enqueue_block_assets', 'block_examples_02_stylesheets_block_enqueue_block_assets');
// plugin-name_block-name_function-name
function block_examples_02_stylesheets_block_enqueue_block_assets() {
wp_enqueue_style(
'block-examples_02-stylesheets-block',
plugins_url( 'style.css', __FILE__ ),
array(),
filemtime( plugin_dir_path( __FILE__) . 'style.css')
);
}

Related

How add extra links in PHP (CSS & Jquery) Video.js WordPress Plugin?

Php Code Before
if($options['videojs_cdn'] == 'on') { //use the cdn hosted version
wp_register_style( 'videojs', plugins_url('jw/video-js.css' , __FILE__ ) );
wp_register_script( 'videojs', plugins_url( 'jw/video.min.js' , __FILE__ ) );
Now I have add jw/jwplayer.css, resume/dist/videojs-resume.min.css and dist/videojs-resume.min.jsbut none of the ones I added did work! This is a WordPress Plugin? how i can fix this?
if($options['videojs_cdn'] == 'on') { //use the cdn hosted version
wp_register_style( 'videojs', plugins_url('jw/video-js.css' , __FILE__ ) );
wp_register_style( 'videojs', plugins_url( 'jw/jwplayer.css' , __FILE__ ) );
wp_enqueue_style( 'videojs' );
wp_register_style( 'videojs', plugins_url( 'resume/dist/videojs-resume.min.css' , __FILE__ ) );
wp_enqueue_style( 'videojs' );
wp_register_script( 'videojs', plugins_url( 'jw/video.min.js' , __FILE__ ) );
wp_register_script( 'videojs', plugins_url( 'dist/videojs-resume.min.js' , __FILE__ ) );
You have conflicting handles, each file you register or enqueue with wp_enqueue_style() and wp_enqueue_script() needs its own handle.
As an aside, you don't need to register and then enqueue unless you're using more advanced functionality, typically for simple CSS and JS loading, you can replace all the register functions with enqueue as long as they have unique handles.
wp_enqueue_style( 'videojs', plugins_url('jw/video-js.css' , __FILE__ ) );
wp_enqueue_style( 'jwplayer', plugins_url( 'jw/jwplayer.css' , __FILE__ ) );
wp_enqueue_style( 'videojs-resume', plugins_url( 'resume/dist/videojs-resume.min.css' , __FILE__ ) );
wp_enqueue_script( 'videojs', plugins_url( 'jw/video.min.js' , __FILE__ ) );
wp_enqueue_script( 'videojs-resume', plugins_url( 'dist/videojs-resume.min.js' , __FILE__ ) );

conflict wordpress plugin loading scripts

I created two plugins for Wordpress. Both plugins have different scripts and stylesheets. To load this scripts I use this method:
class load_scripts{
function register_market(){
add_action( 'admin_enqueue_scripts', array($this, 'enqueue_admin_market') );
}
function enqueue_admin_market(){
wp_enqueue_style( 'pluginstyle', plugins_url( '/assets/backend-style.css', __FILE__ ) );
wp_enqueue_script( 'pluginscript', plugins_url( '/assets/backend-script.js', __FILE__ ) );
wp_enqueue_media();
}
}
if( class_exists( 'load_scripts')){
$load_scripts = new load_scripts();
$load_scripts->register_market();
}
Of course I used different function and class names.
Now the problem is if both plugins are activated the scripts are loaded from only one plugin.
I tried to do this, but does not work:
add_action( 'admin_enqueue_scripts', array($this, 'enqueue_admin_market'), 0 );
What can I do to solve this conflict?
Your issue lies on these two lines:
wp_enqueue_style( 'pluginstyle', plugins_url( '/assets/backend-style.css', __FILE__ ) );
wp_enqueue_script( 'pluginscript', plugins_url( '/assets/backend-script.js', __FILE__ ) );
Namely, you probably have 'pluginstyle' and 'pluginscript' as the handles in both your plugins. The $handle parameter should be unique in accordance with the wp_enqueue_style() and wp_enqueue_script() function references. For example:
Plugin 1:
function enqueue_admin_market(){
wp_enqueue_style( 'pluginstyle-1', plugins_url( '/assets/backend-style.css', __FILE__ ) );
wp_enqueue_script( 'pluginscript-1', plugins_url( '/assets/backend-script.js', __FILE__ ) );
wp_enqueue_media();
}
Plugin 2:
function enqueue_admin_market(){
wp_enqueue_style( 'pluginstyle-2', plugins_url( '/assets/backend-style.css', __FILE__ ) );
wp_enqueue_script( 'pluginscript-2', plugins_url( '/assets/backend-script.js', __FILE__ ) );
wp_enqueue_media();
}

Insert Gridster into WordPress Backend

I have been trying to include Gridster into my WordPress Backend but it simply doesn't work. The frontend works fine, but I can't figure out why, because the files are actually in the following directories.
First way I tried it:
function add_my_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script( "gridster-script", plugins_url( '/js/jquery.gridster.min.js', __FILE__ ), array('jquery') );
wp_enqueue_script( "gridster-script-extra", plugins_url( '/js/jquery.gridster.with-extras.min.js', __FILE__ ), array('gridster-script'), true );
wp_enqueue_script( "gridster-script-custom", plugins_url( '/js/gridster.js', __FILE__ ), array('jquery'), '1.0', true );
}
Second one:
function add_my_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('gridster-script', plugin_dir_url(__FILE__) . '/js/jquery.gridster.min.js', array('jquery') );
wp_enqueue_script('gridster-script-extra', plugin_dir_url(__FILE__) . '/js/jquery.gridster.with-extras.min.js', array('gridster-script') );
wp_enqueue_script('gridster-script-custom', plugin_dir_url(__FILE__) . '/js/gridster.js', array('jquery') );
}
Third and last one:
function add_my_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script( 'gridster-script', get_template_directory_uri() . '/js/jquery.gridster.min.js', array('jquery'), '1.0.0', true );
wp_enqueue_script( 'gridster-script-extra', get_template_directory_uri() . '/js/jquery.gridster.with-extras.min.js', array('gridster-script'), '1.0.0', true );
wp_enqueue_script( 'gridster-script-custom', get_template_directory_uri() . '/js/gridster.js', array('jquery'), '1.0.0', true );
}
You can't randomly use plugin url functions, and need to choose the correct one for your use case. Assuming __FILE__ is correctly referring to the main plugin file, you'll need to hook that function into the admin_enqueue_scripts action hook:
function add_my_scripts() {
wp_enqueue_script( "gridster-script", plugins_url( 'js/jquery.gridster.min.js', __FILE__ ), array('jquery') );
wp_enqueue_script( "gridster-script-extra", plugins_url( 'js/jquery.gridster.with-extras.min.js', __FILE__ ), array('gridster-script'), true );
wp_enqueue_script( "gridster-script-custom", plugins_url( 'js/gridster.js', __FILE__ ), array('jquery'), '1.0', true );
}
add_action( 'admin_enqueue_scripts', 'add_my_scripts' );

Bootstrap & Wordpress issue

it will probably something stupid as ussual but.. I can't get my style.css or custom.css to override the bootstrap css. I don't wanna put all my custom css in my header file because that is not really the way to do it I suppose..
Now I Tried to add it in my functions.php like this:
//Enqueue scripts and styles
function horizon_scripts() {
//Load the theme CSS
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css');
wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css');
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/css/custom.css', array(), '1.0.1', 'all' );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'horizon_scripts' );
So it loads my bootstrap css first and then the style.css and custom.css but that didn't quite hit it..
So any help would be appreciated :)
You should be using get_stylesheet_directory_uri(). Here's just the css, without your js:
function horizon_scripts() {
wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
wp_enqueue_style( 'main', get_stylesheet_uri(), array('bootstrap') );
wp_enqueue_style( 'custom', get_stylesheet_directory_uri() . '/custom.css', array('main') );
}
add_action( 'wp_enqueue_scripts', 'horizon_scripts' );
Note that the third parameter of wp_enqueue_style() is "dependencies". Read more in the Codex.

Wordpress load a stylesheet through plugin

I have written a WordPress plugin and want to make it include some css stylesheets, I have tried to use the process I usually use in a themes functions.php file...
add_action('wp_enqueue_script','register_my_scripts');
function register_my_scripts(){
$dir = plugin_dir_path( __FILE__ );
wp_enqueue_style( $dir . 'css/style1.css');
wp_enqueue_style( $dir . 'css/style2.css');
}
But this is not loading anything, what am I doing wrong?
The hook you need to use is wp_enqueue_scripts, you were missing the 's'.
You're getting the directory path when what you need is the directory URL.
wp_enqueue_style's first parameter is a handle and not the URL.
function wpse_load_plugin_css() {
$plugin_url = plugin_dir_url( __FILE__ );
wp_enqueue_style( 'style1', $plugin_url . 'css/style1.css' );
wp_enqueue_style( 'style2', $plugin_url . 'css/style2.css' );
}
add_action( 'wp_enqueue_scripts', 'wpse_load_plugin_css' );
You are using plugin_dir_path which outputs filesystem directory path. Instead you need URL.
Also the first parameter of wp_enqueue_style is $handler name.
Use plugins_url
wp_enqueue_style( 'style1', plugins_url( 'css/style1.css' , __FILE__ ) );
Full code:
add_action('wp_enqueue_scripts','register_my_scripts');
function register_my_scripts(){
wp_enqueue_style( 'style1', plugins_url( 'css/style1.css' , __FILE__ ) );
wp_enqueue_style( 'style2', plugins_url( 'css/style2.css' , __FILE__ ) );
}
try :
wp_enqueue_style('custom-style', plugins_url( '/css/my-style.css', __FILE__ ), array(),'all'); where plugins_url is relative to plugin base without slash.
Load styles from wp plugin folder using plugin url
function add_plugin_stylesheet()
{
wp_enqueue_style( 'style1', plugins_url( '/css/styleFileName1.css', __FILE__ ) );
wp_enqueue_style( 'style2', plugins_url( '/css/styleFileName2.css', __FILE__ ) );
}
add_action('admin_print_styles', 'add_plugin_stylesheet');

Categories