admin管理员组文章数量:1130349
I have this working in my plugin and all is well with the world:
edit: withAPIData( props => {
return {
roles: '/matt-watson/secure-blocks/v1/user-roles/'
};
} )( props => {
....
However guidance here suggests that this will no longer be supported going forward:
So I have managed to work that into the solution:
const DEFAULT_STATE = {
userRoles: {},
};
const actions = {
setUserRoles( userRoles ) {
return {
type: 'SET_USER_ROLES',
userRoles,
};
},
fetchFromAPI( path ) {
return {
type: 'FETCH_FROM_API',
path,
};
},
};
registerStore( 'matt-watson/secure-block', {
reducer( state = DEFAULT_STATE, action ) {
switch ( action.type ) {
case 'SET_USER_ROLES':
return {
...state,
userRoles: action.userRoles,
};
}
return state;
},
actions,
selectors: {
getUserRoles( state ) {
const { userRoles } = state;
return userRoles;
},
},
controls: {
FETCH_FROM_API( action ) {
return apiFetch( { path: action.path } );
},
},
resolvers: {
* getUserRoles( state ) {
const path = '/matt-watson/secure-blocks/v1/user-roles/';
const userRoles = yield actions.fetchFromAPI( path );
return actions.setUserRoles( userRoles );
},
}
,
} );
....
edit: withSelect( ( select ) => {
return {
roles: select('matt-watson/secure-block').getUserRoles(),
};
} )( props => {
....
Now the issue is that the 'controls' section never fires. In the documentation it says that this is an opt-in component, and I need to enable it via the use command:
When I try this, use is undefined.
So my question is this. As withAPIData did everything I needed in a very quick and easy way, is there an alternative 'drop-in' bit of code I can use, or do I need to progress with the store that I am registering? If so, what am I doing wrong?
Any help appreciated. Thank you.
I have this working in my plugin and all is well with the world:
edit: withAPIData( props => {
return {
roles: '/matt-watson/secure-blocks/v1/user-roles/'
};
} )( props => {
....
However guidance here suggests that this will no longer be supported going forward: https://github/WordPress/gutenberg/issues/7390#issuecomment-398667802
So I have managed to work that into the solution:
const DEFAULT_STATE = {
userRoles: {},
};
const actions = {
setUserRoles( userRoles ) {
return {
type: 'SET_USER_ROLES',
userRoles,
};
},
fetchFromAPI( path ) {
return {
type: 'FETCH_FROM_API',
path,
};
},
};
registerStore( 'matt-watson/secure-block', {
reducer( state = DEFAULT_STATE, action ) {
switch ( action.type ) {
case 'SET_USER_ROLES':
return {
...state,
userRoles: action.userRoles,
};
}
return state;
},
actions,
selectors: {
getUserRoles( state ) {
const { userRoles } = state;
return userRoles;
},
},
controls: {
FETCH_FROM_API( action ) {
return apiFetch( { path: action.path } );
},
},
resolvers: {
* getUserRoles( state ) {
const path = '/matt-watson/secure-blocks/v1/user-roles/';
const userRoles = yield actions.fetchFromAPI( path );
return actions.setUserRoles( userRoles );
},
}
,
} );
....
edit: withSelect( ( select ) => {
return {
roles: select('matt-watson/secure-block').getUserRoles(),
};
} )( props => {
....
Now the issue is that the 'controls' section never fires. In the documentation it says that this is an opt-in component, and I need to enable it via the use command: https://github/WordPress/gutenberg/tree/master/packages/data#controls
When I try this, use is undefined.
So my question is this. As withAPIData did everything I needed in a very quick and easy way, is there an alternative 'drop-in' bit of code I can use, or do I need to progress with the store that I am registering? If so, what am I doing wrong?
Any help appreciated. Thank you.
Share Improve this question edited Aug 14, 2018 at 20:07 Matt Watson asked Aug 14, 2018 at 15:25 Matt WatsonMatt Watson 1791 silver badge8 bronze badges 4 |2 Answers
Reset to default 5It's worth noting that the answer above is out of date. The data store should now look like this:
const actions = {
setUserRoles( userRoles ) {
return {
type: 'SET_USER_ROLES',
userRoles,
};
},
receiveUserRoles( path ) {
return {
type: 'RECEIVE_USER_ROLES',
path,
};
},
};
const store = registerStore( 'matt-watson/secure-block', {
reducer( state = { userRoles: {} }, action ) {
switch ( action.type ) {
case 'SET_USER_ROLES':
return {
...state,
userRoles: action.userRoles,
};
}
return state;
},
actions,
selectors: {
receiveUserRoles( state ) {
const { userRoles } = state;
return userRoles;
},
},
controls: {
RECEIVE_USER_ROLES( action ) {
return apiFetch( { path: action.path } );
},
},
resolvers: {
* receiveUserRoles( state ) {
const userRoles = yield actions.receiveUserRoles( '/matt-watson/secure-blocks/v1/user-roles/' );
return actions.setUserRoles( userRoles );
},
},
} );
I've updated my tutorial: https://mwatson.co.uk/working-with-gutenberg-and-the-wordpress-rest-api/
I've cracked it!
const actions = {
setUserRoles( userRoles ) {
return {
type: 'SET_USER_ROLES',
userRoles,
};
},
receiveUserRoles( path ) {
return {
type: 'RECEIVE_USER_ROLES',
path,
};
},
};
const store = registerStore( 'matt-watson/secure-block', {
reducer( state = { userRoles: {} }, action ) {
switch ( action.type ) {
case 'SET_USER_ROLES':
return {
...state,
userRoles: action.userRoles,
};
case 'RECEIVE_USER_ROLES':
return action.userRoles;
}
return state;
},
actions,
selectors: {
receiveUserRoles( state ) {
const { userRoles } = state;
return userRoles;
},
},
resolvers: {
* receiveUserRoles( state ) {
const userRoles = apiFetch( { path: '/matt-watson/secure-blocks/v1/user-roles/' } )
.then( userRoles => {
return actions.setUserRoles( userRoles );
} )
yield userRoles;
},
},
} );
This sets the state of the userRoles and returns the userRoles once resolved.
You can then access this like so:
....
edit: withSelect( ( select ) => {
return {
roles: select('matt-watson/secure-block').receiveUserRoles(),
};
} )( props => {
....
I have this working in my plugin and all is well with the world:
edit: withAPIData( props => {
return {
roles: '/matt-watson/secure-blocks/v1/user-roles/'
};
} )( props => {
....
However guidance here suggests that this will no longer be supported going forward:
So I have managed to work that into the solution:
const DEFAULT_STATE = {
userRoles: {},
};
const actions = {
setUserRoles( userRoles ) {
return {
type: 'SET_USER_ROLES',
userRoles,
};
},
fetchFromAPI( path ) {
return {
type: 'FETCH_FROM_API',
path,
};
},
};
registerStore( 'matt-watson/secure-block', {
reducer( state = DEFAULT_STATE, action ) {
switch ( action.type ) {
case 'SET_USER_ROLES':
return {
...state,
userRoles: action.userRoles,
};
}
return state;
},
actions,
selectors: {
getUserRoles( state ) {
const { userRoles } = state;
return userRoles;
},
},
controls: {
FETCH_FROM_API( action ) {
return apiFetch( { path: action.path } );
},
},
resolvers: {
* getUserRoles( state ) {
const path = '/matt-watson/secure-blocks/v1/user-roles/';
const userRoles = yield actions.fetchFromAPI( path );
return actions.setUserRoles( userRoles );
},
}
,
} );
....
edit: withSelect( ( select ) => {
return {
roles: select('matt-watson/secure-block').getUserRoles(),
};
} )( props => {
....
Now the issue is that the 'controls' section never fires. In the documentation it says that this is an opt-in component, and I need to enable it via the use command:
When I try this, use is undefined.
So my question is this. As withAPIData did everything I needed in a very quick and easy way, is there an alternative 'drop-in' bit of code I can use, or do I need to progress with the store that I am registering? If so, what am I doing wrong?
Any help appreciated. Thank you.
I have this working in my plugin and all is well with the world:
edit: withAPIData( props => {
return {
roles: '/matt-watson/secure-blocks/v1/user-roles/'
};
} )( props => {
....
However guidance here suggests that this will no longer be supported going forward: https://github/WordPress/gutenberg/issues/7390#issuecomment-398667802
So I have managed to work that into the solution:
const DEFAULT_STATE = {
userRoles: {},
};
const actions = {
setUserRoles( userRoles ) {
return {
type: 'SET_USER_ROLES',
userRoles,
};
},
fetchFromAPI( path ) {
return {
type: 'FETCH_FROM_API',
path,
};
},
};
registerStore( 'matt-watson/secure-block', {
reducer( state = DEFAULT_STATE, action ) {
switch ( action.type ) {
case 'SET_USER_ROLES':
return {
...state,
userRoles: action.userRoles,
};
}
return state;
},
actions,
selectors: {
getUserRoles( state ) {
const { userRoles } = state;
return userRoles;
},
},
controls: {
FETCH_FROM_API( action ) {
return apiFetch( { path: action.path } );
},
},
resolvers: {
* getUserRoles( state ) {
const path = '/matt-watson/secure-blocks/v1/user-roles/';
const userRoles = yield actions.fetchFromAPI( path );
return actions.setUserRoles( userRoles );
},
}
,
} );
....
edit: withSelect( ( select ) => {
return {
roles: select('matt-watson/secure-block').getUserRoles(),
};
} )( props => {
....
Now the issue is that the 'controls' section never fires. In the documentation it says that this is an opt-in component, and I need to enable it via the use command: https://github/WordPress/gutenberg/tree/master/packages/data#controls
When I try this, use is undefined.
So my question is this. As withAPIData did everything I needed in a very quick and easy way, is there an alternative 'drop-in' bit of code I can use, or do I need to progress with the store that I am registering? If so, what am I doing wrong?
Any help appreciated. Thank you.
Share Improve this question edited Aug 14, 2018 at 20:07 Matt Watson asked Aug 14, 2018 at 15:25 Matt WatsonMatt Watson 1791 silver badge8 bronze badges 4-
I would note that
...is also valid javascript, as the object spread operator – Tom J Nowell ♦ Commented Aug 14, 2018 at 15:45 -
I would also guess that you need to define some packages as requirements via npm for the parts that require
use– Tom J Nowell ♦ Commented Aug 14, 2018 at 15:51 -
Thanks @TomJNowell, yeah good point on the
...I'll have to come up with another way to add snippets. I'll have another look intouse. If I fix this I'll write a glorious blog post! – Matt Watson Commented Aug 14, 2018 at 18:29 - Hmm, no luck importing @wordpress/data, I can get the use functions, but not a lot happens. – Matt Watson Commented Aug 14, 2018 at 19:59
2 Answers
Reset to default 5It's worth noting that the answer above is out of date. The data store should now look like this:
const actions = {
setUserRoles( userRoles ) {
return {
type: 'SET_USER_ROLES',
userRoles,
};
},
receiveUserRoles( path ) {
return {
type: 'RECEIVE_USER_ROLES',
path,
};
},
};
const store = registerStore( 'matt-watson/secure-block', {
reducer( state = { userRoles: {} }, action ) {
switch ( action.type ) {
case 'SET_USER_ROLES':
return {
...state,
userRoles: action.userRoles,
};
}
return state;
},
actions,
selectors: {
receiveUserRoles( state ) {
const { userRoles } = state;
return userRoles;
},
},
controls: {
RECEIVE_USER_ROLES( action ) {
return apiFetch( { path: action.path } );
},
},
resolvers: {
* receiveUserRoles( state ) {
const userRoles = yield actions.receiveUserRoles( '/matt-watson/secure-blocks/v1/user-roles/' );
return actions.setUserRoles( userRoles );
},
},
} );
I've updated my tutorial: https://mwatson.co.uk/working-with-gutenberg-and-the-wordpress-rest-api/
I've cracked it!
const actions = {
setUserRoles( userRoles ) {
return {
type: 'SET_USER_ROLES',
userRoles,
};
},
receiveUserRoles( path ) {
return {
type: 'RECEIVE_USER_ROLES',
path,
};
},
};
const store = registerStore( 'matt-watson/secure-block', {
reducer( state = { userRoles: {} }, action ) {
switch ( action.type ) {
case 'SET_USER_ROLES':
return {
...state,
userRoles: action.userRoles,
};
case 'RECEIVE_USER_ROLES':
return action.userRoles;
}
return state;
},
actions,
selectors: {
receiveUserRoles( state ) {
const { userRoles } = state;
return userRoles;
},
},
resolvers: {
* receiveUserRoles( state ) {
const userRoles = apiFetch( { path: '/matt-watson/secure-blocks/v1/user-roles/' } )
.then( userRoles => {
return actions.setUserRoles( userRoles );
} )
yield userRoles;
},
},
} );
This sets the state of the userRoles and returns the userRoles once resolved.
You can then access this like so:
....
edit: withSelect( ( select ) => {
return {
roles: select('matt-watson/secure-block').receiveUserRoles(),
};
} )( props => {
....
本文标签：
版权声明：本文标题：block editor - In Gutenberg, now that withAPIData is being deprecated, how can I do an async call to a custom endpoint? 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/questions/1749111310a2317438.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
...is also valid javascript, as the object spread operator – Tom J Nowell ♦ Commented Aug 14, 2018 at 15:45use– Tom J Nowell ♦ Commented Aug 14, 2018 at 15:51...I'll have to come up with another way to add snippets. I'll have another look intouse. If I fix this I'll write a glorious blog post! – Matt Watson Commented Aug 14, 2018 at 18:29