Custom Server-rendered Gutenberg block does not always render - javascript

I have written a plugin that provides a custom "Server Side Block" that uses a callback defined in PHP that is supposed to render some HTML.
The right markup renders in certain case, but in others I just get the comment <!-- wp:nai/serverside /-->.
It happens mainly when I put other blocks in the page, or I put my custom block inside another.
What is wrong? Why can't I put the block wherever I want without breaking it?
Here is the code:
plugin.php:
<?php
/**
* #package MyPlugin
*/
/*
Plugin Name: My Plugin
Version: 1.7.2
*/
function gutenberg_examples_01_register_block() {
// automatically load dependencies and version
$asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');
wp_register_script(
'serverside',
plugins_url( 'build/index.js', __FILE__ ),
$asset_file['dependencies'],
$asset_file['version']
);
wp_register_style(
'herverside',
plugins_url( 'style.css', __FILE__ ),
array( ),
filemtime( plugin_dir_path( __FILE__ ) . 'style.css' )
);
register_block_type('nai/serverside', array(
'editor_script' => 'serverside',
'render_callback' => 'render_callback',
'attributes' => array(
'images' => array(
'type' => 'array'
)
)
)
);
function render_callback( $attributes ){
//$images = $attributes[ 'images' ];
return '<div>Test</div>';
}
}
add_action( 'init', 'gutenberg_examples_01_register_block' );
src/index.tsx:
declare var wp;
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const el = wp.element.createElement;
const blockStyle = {
backgroundColor: '#900',
color: '#fff',
padding: '20px',
};
registerBlockType( 'nai/serverside', {
title: __( 'Server Side Block', 'text-domain' ),
icon: 'networking',
category: 'common',
attributes: {
images : {
default: [],
type: 'array',
}
},
edit({attributes, setAttributes, className, focus, id}) {
return (
<div style={ blockStyle }>
Not visible in editor mode.
</div>
);
},
save({attributes, className}) {
/*return (
<div style={ blockStyle }>
Hello World, step 1 (from the frontend).
</div>
);*/
return null;
},
} );

Related

How to show pagination in Wordpress for categories?

I am displaying my categories on a page. Now, when I have more than x posts, I want to show a pagination to navigate to the next page with the posts.
This is my code:
<?php
$cat_id = get_query_var('cat');
$paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
$args = array(
'cat' => $cat_id,
'posts_per_page' => 5,
'paged' => $paged
);
$query = new WP_Query( $args );
while ( $query->have_posts() ) : $query->the_post();
//Post data
echo get_the_post_thumbnail(get_the_ID());
?>
<li>With some posts</li>
<?php
endwhile;
?>
And then I try to spit out my navigation like this:
<?php
function pagination_nav() {
global $wp_query;
if ( $wp_query->max_num_pages > 1 ) { ?>
<nav class="pagination" role="navigation">
<div class="nav-previous"><?php next_posts_link( '← Older posts' ); ?></div>
<div class="nav-next"><?php previous_posts_link( 'Newer posts →' ); ?></div>
</nav>
<?php }
}
?>
<?php echo pagination_nav();
?>
But whatever I do, I can't return it. How exactly should I do this? $paged should work, right? I have more than 20 posts, but I can't see my navigation/paging button anywhere.
Lastly, I tried the code below, yet this does not go to the second page of my query. The URL says /category/categoryname/page/2, but it just sends me to a blank page...
<div class="pagination">
<?php
echo paginate_links( array(
'base' => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
'total' => $query->max_num_pages,
'current' => max( 1, get_query_var( 'paged' ) ),
'format' => '?paged=%#%',
'show_all' => false,
'type' => 'plain',
'end_size' => 2,
'mid_size' => 1,
'prev_next' => true,
'prev_text' => sprintf( '<i></i> %1$s', __( 'Newer Posts', 'text-domain' ) ),
'next_text' => sprintf( '%1$s <i></i>', __( 'Older Posts', 'text-domain' ) ),
'add_args' => false,
'add_fragment' => '',
) );
?>
</div>
Alright, so let me answer my own question. I solved it by using the same code, but changing the settings (!) in my Wordpress page. When enabling the pagination setting, try to change the default "paginate by 50 posts" to something like "10" or so. That triggers the code to work.

My custom.js isn't working when converting a website over to Wordpress. I am using the correct way, by linking in the functions.php

I am currently learning to create themes for Wordpress and I'm trying to link my custom.js file via the functions bit but it's just not working.
<?php
function additional_custom_styles() {
/*Enqueue The Styles*/
wp_enqueue_style( 'themename', get_template_directory_uri() . '/css/main.css' );
wp_enqueue_style( 'fontawesome', get_template_directory_uri() . '/css/font-awesome.min.css' );
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.js', array( 'jquery' ), '3.3.6', true );
}
add_action("wp_enqueue_scripts", "launch_scripts");
function launch_scripts() {
$internal_path = get_template_directory_uri() . '/js/';
wp_enqueue_script('main-script', $internal_path . 'custom.js', array(''));
}
add_action( 'wp_enqueue_scripts', 'additional_custom_styles' );
function mytheme_customize_register( $wp_customize ) {
$wp_customize->add_section( 'themeslug_logo_section' , array(
'title' => __( 'Logo', 'themeslug' ),
'priority' => 30,
'description' => 'Upload a logo to replace the default site name and description in the header',
));
$wp_customize->add_setting( 'themeslug_logo' );
$wp_customize->add_control( new WP_Customize_Image_Control(
$wp_customize, 'themeslug_logo', array(
'label' => __( 'Logo', 'themeslug' ),
'section' => 'themeslug_logo_section',
'settings' => 'themeslug_logo',
)
));
}
add_action( 'customize_register', 'mytheme_customize_register' );
?>
http://wordpress.taylorgathercole.co.uk - link to the Wordpress. The .js file has scripts to allow the navigation to change on scroll etc.

Default Image not showing up in Customizer for WP_Customize_Cropped_Image_Control

I'm having an issue with WP_Customize_Cropped_Image_Control in the Customizer. The default image that I have set doesn't show up in the side pane of Customizer where you upload and when I upload a new image, it just outputs a number, presumingly the image ID. The moment I change WP_Customize_Cropped_Image_Control to WP_Customize_Image_Control, everything works. The default image and uploaded images both display in the customizer and preview window.
Is there a different way of setting/displaying the default image for a default cropped image in the customizer?
This is the code I have in my customizer.php:
$wp_customize->add_setting( 'bio_image', array(
'default' => get_template_directory_uri() . '/images/default.jpg',
'transport' => 'postMessage'
) );
$wp_customize->add_control( new WP_Customize_Cropped_Image_Control( $wp_customize, 'bio_image', array(
'label' => __( 'Image', 'myTheme' ),
'flex_width' => false,
'flex_height' => false,
'width' => 330,
'height' => 330,
'settings' => 'bio_image'
) ) );
This is the code I have in my customizer.js:
wp.customize( 'bio_image', function( value ) {
value.bind( function( newval ) {
$('#bio-image').attr( 'src', newval );
} );
} );
This is the code I have in my template file:
<img id="bio-image" src="<?php echo get_theme_mod( 'bio_image' , get_template_directory_uri().'/images/default.jpg' ); ?>">
Currently, when using new WP_Customize_Cropped_Image_Control
$wp_customize -> add_setting ( 'Your_option_name', array( 'default' => 'this_has_to_be_a_number_that_matches_an_ID_for_to_work', 'sanitize_callback' => 'absint', ) );
I just haven't figured out how to set the images as ID's yet... instead of URLs

Ckeditor helper error in bonefire framework

I tried to integrate ck editor for my project. But it show some error massages.
I can't config those errors.
Controller public function ckeditor()
$this->load->helper('ckeditor_helper');
//print_r($this->load->helper('ckeditor_helper'));
//Ckeditor's configuration
$data['ckeditor'] = array(
//ID of the textarea that will be replaced
'id' => 'content',
'path' => './assets/js/ckeditor',
//Optionnal values
'config' => array(
'toolbar' => "Full", //Using the Full toolbar
'width' => "550px", //Setting a custom width
'height' => '100px', //Setting a custom height
),
//Replacing styles from the "Styles tool"
'styles' => array(
//Creating a new style named "style 1"
'style 1' => array (
'name' => 'Blue Title',
'element' => 'h2',
'styles' => array(
'color' => 'Blue',
'font-weight' => 'bold'
)
),
//Creating a new style named "style 2"
'style 2' => array (
'name' => 'Red Title',
'element' => 'h2',
'styles' => array(
'color' => 'Red',
'font-weight' => 'bold',
'text-decoration' => 'underline'
)
)
)
);
$data['ckeditor_2'] = array(
//ID of the textarea that will be replaced
'id' => 'content_2',
'path' => './assets/js/ckeditor',
//Optionnal values
'config' => array(
'width' => "550px", //Setting a custom width
'height' => '100px', //Setting a custom height
'toolbar' => array( //Setting a custom toolbar
array('Bold', 'Italic'),
array('Underline', 'Strike', 'FontSize'),
array('Smiley'),
'/'
)
),
//Replacing styles from the "Styles tool"
'styles' => array(
//Creating a new style named "style 1"
'style 3' => array (
'name' => 'Green Title',
'element' => 'h3',
'styles' => array(
'color' => 'Green',
'font-weight' => 'bold'
)
)
)
);
// Template::set('toolbar_title', 'Create New Event');
Template::set_view('sport_events/ckeditor');
Template::set('ckeditor',$data);
Template::render();
}
Views ckeditor.php(This is my view page.just i call ckeditor.js and pass controller function array to views)
<script type="text/javascript" src="/asset/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/asset/ckfinder/ckfinder.js"></script>
<?php
echo '<pre>';
print_r($ckeditor);
echo '</pre>';
?>
<textarea name="content" id="contents" ><p>Example data</p></textarea>
<?php echo display_ckeditor($ckeditor); ?>
<textarea name="content_2" id="content_2" ><p>Example data</p></textarea>
<?php echo display_ckeditor($ckeditor_2); ?>
The error was I didn't load correct place to ckeditor folder.
path should be public folder

Different Wordpress menus at different screen sizes

I am trying display different wordpress menus depending on the device/screen width.
<script>
$(function() {
if ($(window).width() > 959) {
<?php wp_nav_menu( array( 'menu' => 'primary', 'container' => '', 'menu_id' => 'menu' ) ); ?>
} else {
<?php wp_nav_menu( array( 'theme_location' => 'mobile' ) ); ?>
}
});
</script>
I've tried using this code, as well as several other variations, but nothing seems to be working. Any ideas?
Thanks in advance
Willem
As far as I know, wp_nav_menu just output the menu html, so on the client side, you would get this:
<script>
$(function() {
if ($(window).width() > 959) {
<div>....menu html....</div>
} else {
<div>....menu html....</div>
}
});
</script>
I think there should be javascript errors there.
Try this:
<div id="menu_a" style="display:none">
<?php wp_nav_menu( array( 'menu' => 'primary', 'container' => '', 'menu_id' => 'menu' ) ); ?>
</div>
<div id="menu_b" style="display:none">
<?php wp_nav_menu( array( 'theme_location' => 'mobile' ) ); ?>
</div>
<script>
$(function() {
if ($(window).width() > 959) {
$("#menu_a").show();
} else {
$("#menu_b").show();
}
});
</script>
Or in response design style, no Javascript involved:
#media all and (max-width: 958px) { #menu_a{display:none};}
#media all and (min-width: 959px) { #menu_b{display:none};}
I ended up using this:
<?php
/* USER-AGENTS
================================================== */
function check_user_agent ( $type = NULL ) {
$user_agent = strtolower ( $_SERVER['HTTP_USER_AGENT'] );
if ( $type == 'bot' ) {
// matches popular bots
if ( preg_match ( "/googlebot|adsbot|yahooseeker|yahoobot|msnbot|watchmouse|pingdom\.com|feedfetcher-google/", $user_agent ) ) {
return true;
// watchmouse|pingdom\.com are "uptime services"
}
} else if ( $type == 'browser' ) {
// matches core browser types
if ( preg_match ( "/mozilla\/|opera\//", $user_agent ) ) {
return true;
}
} else if ( $type == 'mobile' ) {
// matches popular mobile devices that have small screens and/or touch inputs
// mobile devices have regional trends; some of these will have varying popularity in Europe, Asia, and America
// detailed demographics are unknown, and South America, the Pacific Islands, and Africa trends might not be represented, here
if ( preg_match ( "/phone|iphone|itouch|ipod|symbian|android|htc_|htc-|palmos|blackberry|opera mini|iemobile|windows ce|nokia|fennec|hiptop|kindle|mot |mot-|webos\/|samsung|sonyericsson|^sie-|nintendo/", $user_agent ) ) {
// these are the most common
return true;
} else if ( preg_match ( "/mobile|pda;|avantgo|eudoraweb|minimo|netfront|brew|teleca|lg;|lge |wap;| wap /", $user_agent ) ) {
// these are less common, and might not be worth checking
return true;
}
}
return false;
}
?>
and then:
<?php
$ismobile = check_user_agent('mobile');
if($ismobile) {
wp_nav_menu( array( 'theme_location' => 'mobile' ) );
} else {
wp_nav_menu( array( 'menu' => 'primary', 'container' => '', 'menu_id' => 'menu' ) );
}
?>
This doesn't work on the device size but rather whether or not the site is being accessed from a mobile device.
Source: Detect mobile browser
Thanks
Willem

Categories

Resources