We Keep Coding

Wordpress custom block not showing in block inserter

I'm trying to create a custom block for a site but the block is not appearing in the editor dialogue. I've gone through multiple tutorials and changed my code a lot but it simply won't work.
What I've checked:
The block is added through a plugin but it also doesn't work when
moved to the theme.
I know the plugin is working correctly as I can use other wp
hooks/actions with no issues within the plugin.
I have tried using both 'init' & 'enqueue_block_assets' but neither
work.
I have verified all the file locations and paths are correct as I
have echoed them out to check.
I have changed to the default theme and it still does not appear.
Any help would be appreciated.
Here is the js block src (which is compiled):
import { registerBlockType } from '#wordpress/blocks'
registerBlockType('ghs/landing-page-block', {
title: 'Landing Page',
apiVersion: 2,
category: 'design',
icon: 'smiley',
description: 'Layout for the GHS landing page',
keywords: ['GHS', 'landing', 'page', 'front'],
edit: () => {
return (<div>hello</div>)
},
save: () => {
return (<div>hello</div>)
}
});
and the php registering it:
add_action('init', function() {
$asset_file = include( WP_PLUGIN_DIR . '/ghs-custom-blocks/assets/js/landing-page-block.asset.php');
wp_register_script('ghs-landing-page',
WP_PLUGIN_DIR . '/ghs-custom-blocks/assets/js/landing-page-block.js',
$asset_file['dependencies'],
$asset_file['version']);
register_block_type('ghs/landing-page-block', [
'api_version' => 2,
'editor_script' => 'ghs-landing-page',
]);
});

Solved it, it was because I was using WP_PLUGIN_DIR instead of plugin_dir_url(__FILE__). It meant the js request url was from the root instead of the wp installation.

Data Tables are not loading when i redirect my page using self.do_action in odoo(openERP7) qweb screen

When i redirect my page using self.do_action in odoo(openERP7) it is not loading Data Tables in the new page.
In other pages it was working fine. But in a particular page if i redirect using this self.do_action is not working. But self.act_window is working fine in the same page.
If any one faced this same issue please let me know.
Update:I found a similarity of problems in my code. I have a model like performance.review and some other models also. All the self.do_action used in this model is not loading Data tables properly. But other model screens does perfectly.
Is there any relation between model extension and using self.do_action?
Here is my code,
module.ReviewForm= instance.web.Widget.extend({
events: {
'click #review_tree_view':'load_tree_view',
},
load_tree_view: function (event) {
var self = this;
self.do_action({
type: 'ir.actions.client',
tag: "performance.review",
name:'Tree view',
target: 'current',
});
},

In the javascript file, you could add an event to a buttons class name like this:
bind_events: function () {
this.$('.oe_btn_class_name').on('click', this.on_call_new_view_function);
},
Then the "on_call_new_view_function" is called when a click event occurs and opens the new view like this:
on_call_new_view_function: function () {
var self = this;
// you can pass in other data using the context dictionary variable
var context = {
'id': this.id,
};
// the action dictionary variable sends data in the "self.do_action" method
var action = {
type: 'ir.actions.act_window',
res_model: 'model.name',
view_id: 'view_id',
view_mode: 'form',
view_type: 'form',
views: [[false, 'form']],
target: 'new',
context: context,
};
// self.do_action accepts the action parameter and opens the new view
self.do_action(action);
},

Actually this is a small mistake done by myself. Im using the same model for many qweb screens, and each time Im rendering form view using self.do_action I did't emptying the existing tree view.
It can be easily done by adding this line.
Now data tables loading properly and perfectly.
load_tree_view: function (event) {
var self = this;
self.$el.empty();
self.do_action({
type: 'ir.actions.client',
tag: "performance.review",
name:'Tree view',
target: 'current',
});
},

Siesta Ext JS test not completing

I am testing an Ext JS frontend with Siesta.
Here is my login/logout test:
StartTest(function(t) {
t.diag("Login/Logout");
t.chain(
{ waitForCQ : '#loginPanel' },
function(next) {
t.cq1("#username").setValue();
t.cq1("#password").setValue();
next();
},
{ click: '>> #username' },
{ type: '******', target : '>> #username' },
{ type: '******', target : '>> #password' },
{ click: '>> #loginButton' },
{ waitForCQ: '#mainView' },
{ click: '>> #logoutButton' },
{ waitForCQ: 'messagebox #ok' },
function(next) {
t.waitForEvent(Ext.globalEvents, 'logoutComplete', function () {});
next();
},
{ click : '>> messagebox #ok' },
function() {
t.done();
}
);
});
The test inputs the username and password into the login panel, then clicks the login button. After the main view is loaded, it logs off.
For some reason, this test never finishes.
Every action in the chain is successful, but the test is still stuck running.
How can I fix this?
I am using siesta-3.0.2-lite with ExtJS 5.1.0.

1# First you can try to remove t.done() , it's not generally needed in the tests, unless you are really waiting for it. needDone in the harness settings has default value False.
2# You are using waitForEvent, this is usually done when you pass the callback there. So your function would look like this:
function(next) {
t.waitForEvent(Ext.globalEvents, 'logoutComplete', next);
},
But if you just want to know that the event was fired, you can use function firesOnce . Don't forget that you need to register checking the event before executing the actions which triggers it.
So your code could look like this:
function(next) {
t.firesOnce(Ext.globalEvents, 'logoutComplete','Logout completed!');
next();
},
{ click: '>> #logoutButton' },
{ waitForCQ: 'messagebox #ok' },
{ click : '>> messagebox #ok' },
But I have never used Ext.globalEvents to check the events, so I am not sure if it works.

Siesta developers on the forum suggested to solve this by setting overrideSetTimeout to false in your harness config.
Harness.configure({
...
overrideSetTimeout: false,
...
});
Siesta overrides the native "setTimeout" from the context of each test for asynchronous code tracking, but it seems to cause issues.
It worked for many users on the forum, tell me if it works for you, because it did not solve my issues.
Update:
The problem on my side turned out to be due to the logout itself, which uses window.location.reload(). This makes the browser act if there are two separate pages/applications.
Apparently, you need to set separateContext option in harness object to true. This option is available only in Standard (Commercial) package.

Expanding tree nodes before AJAX has ended in ExtJS

I have a search bar docked onto my tree panel. When I write something and press enter an Ajax request fires off and returns the folder ids required to expand the tree up to the point of the folder requested. Inside the success config of the ajax.request I call the expand function of each node via getNodeById using a loop. However after the first expansion ExtJS fires itself an ajax request from the proxy to fetch the folder data (since it hasn't been loaded yet). Since AJAX is asynchronous the loop is faster than the server response and it tries to call the .expand() function of the node before the node itself has been loaded and gives an undefined error. How should I tackle this? I know that generally with AJAX you have to use callback functions for everything you want to run AFTER the request has been processed but I'm not really sure how to do this in this case...
Ext.define('treeStore',
{
extend : 'Ext.data.TreeStore',
alias: 'widget.treeStore',
autoLoad : false,
model : 'treeModel',
root : {
id: 0,
name : 'Root',
expanded : true,
loaded: true
},
proxy : {
type : 'ajax',
url : 'MyServlet',
reader : {
type : 'json',
root : 'children'
}
},
folderSort: true
});
Ext.define('Ext.tree.Panel',{
.
.
.
//Stuff about the tree panel etc.
dockedItems: {
xtype: 'textfield',
name: 'Search',
allowBlank: true,
enableKeys: true,
listeners: {
specialkey: function (txtField, e) {
if (e.getKey() == e.ENTER){
var searchValue = txtField.getValue();
Ext.Ajax.request({
url: 'MyServlet',
params: {
caseType: 'search',
value: searchValue
},
success: function(response) { //ATTENTION: When calling the .expand() the AJAX hasn't finished and cannot find the node.
response = Ext.decode(response.responseText);
var panel = txtField.up();
response.IDs.forEach(function(entry){
panel.getStore().getNodeById(entry.folderId).expand(); <-problem here
});
}
});
}
}
}
}

Often when writing my Ext apps, I find that even though things should fire in order, there are times where calling things immediately after an AJAX call is sometimes just too fast. Maybe the tree nodes have not rendered properly yet, or some other issue.
Try wrapping a delayed task around that code:
new Ext.util.DelayedTask(function()
{
response = Ext.decode(response.responseText);
var panel = txtField.up();
response.IDs.forEach(function(entry){
panel.getStore().getNodeById(entry.folderId).expand(); <-problem here
});
}, this).delay(100);
You'll have to work around those scope issues though. The "this" just before the delay function is your scope.

View & store loaded before controller's init

I am building Sencha touch 2.1 application.
In my application I have one global variable which keeps reference of my controller class. This reference is used to execute a controller function on load of one of the store but the problem comes when I deploy this on slow remote server and store's load is fired before this global variable gets reference of controller object. To provide this reference before store's load I tried putting initialization logic in controllers init method
init : function(){
bossController = this.getApplication().getController('Boss');
},
in init method of controller but view & store are loaded before this init is called and hence I get this error:
Cannot call method 'loadMagazines' of undefined
This is my on load listener in store:
listeners:{
load: function( me, records, successful, operation, eOpts ){
bossController.loadMagazines(this, records);
}
}
I tried initializing this variable in app.js launch() method instead of controller's init method but that also didn't work.
Please note both approaches works fine when I put my code in local apache and access it using my chrome browser but they doesn't work when I put it on slow remote server.
EDIT
This is how application flow happens
0. All the models, views, stores & controllers are defined in app.js
Launch function in app.js add main view to the viewport.
Main view creates magazine view and add it to itself.
In initialize method of magazine view, store is crated and loaded.
In load listener of store, controller is used.
This is my view:
Ext.define('myshop.view.MagazinePanel', {
extend : 'Ext.Panel',
requires : [
'myshop.model.MagazinePage',
'myshop.store.MagazineStore',
'Ext.XTemplate',
'Ext.data.Store'
],
alias : 'widget.magazinepanelview',
xtype : 'magazinepanelview',
config : {
layout : 'hbox',
id : 'hc',
scrollable: 'horizontal',
directionLock : true,
masked: {
xtype: 'loadmask',
message: 'Loading'
},
inline: {
wrap: false
},
items : [{
xtype : 'panel',
html : ''
}]
},
initialize: function() {
var me = this;
var myStore = Ext.create('myshop.store.MagazineStore');
myStore.load({
callback: function(records, operation, success) {
me.setMasked(false);
},
scope: this
});
this.callParent();
}
});
and this is the store:
Ext.define('myshop.store.MagazineStore',{
extend:'Ext.data.Store',
requires: [
'myshop.model.MagazinePage',
'Ext.data.proxy.JsonP'
],
config:{
storeId : 'ms',
model:'myshop.model.MagazinePage',
autoLoad :false,
pageSize: 30,
proxy : {
type: 'jsonp',
url: Properties.PORTAL_SERVICE_BASE_URL+'test/categories/list',
callbackKey: 'callback',
startParam: false, //to remove param "start" and making it constant
extraParams: {
start : 0,
_type : 'json'
},
reader: {
type: 'json',
rootProperty: 'categories.data',
totalProperty: 'categories.status.totalCount'
}
},
listeners:{
load: function( me, records, successful, operation, eOpts ){
bossController.loadMagazines(this, records);
}
}
}
});

There are some parts missing in your example code so just a hint/guess. I guess your store has autoLoad property to true and get's therefore loaded as soon as it gets initialized. Turn it of and try something like this.
init : function(){
bossController = this.getApplication().getController('Boss'); // bossController where is this var defined?
// fire a ready event
// or
Ext.StoreMgr.lookup('YourStoreName').load();
}
Or provide more information about the store, who loads it, when it is loaded and in which scope.

Loading data should do controller but not view.
Ext.define("myshop.controller.Boss", {
extend: 'Ext.app.Controller',
config: {
refs: {
magazinePanel: '#hc'
},
control: {
magazinePanel: {
initialize: 'initializeMagazinePanel'
}
}
},
initializeMagazinePanel: function() {
var me = this;
var myStore = Ext.create('myshop.store.MagazineStore', {
listeners:{
scope: this,
load: this.onMagazineStoreLoad
}
});
myStore.load();
},
onMagazineStoreLoad: function(me, records, successful, operation, eOpts) {
this.getMagazinePanel().setMasked(false);
this.loadMagazines(records)
},
loadMagazines: function(records) {
}
});

Couldn't you put your loadMagazines function in the success callback of an explicit load() function in your controller, and disable autoLoad as #sra suggests?
Something like:
//in controller
init: function() {
myStore.load({
callback: function(recs, op, success) {
// do the load magazines thing
}
})
}

I am curious if what I suggested here: getController() doesn't load file and doesn't fire init and lauch helps with this too. You can remove the view and store from app.js and put it in the controller itself. I think that should make the view and store be defined only after the controller is defined.