Weird failing request

时间：2021-05-19 作者：Konstantinos G.

下面是我正在努力实现的概念的简化版本。

在帖子中，我手动插入此核心图像块：

<!-- wp:image {"id":7} -->
<figure class="wp-block-image"><img src="[picsum]" alt="ASD" class="wp-image-7"/></figure>
<!-- /wp:image -->
如您所见，图像的src属性有短代码，因此这里是短代码回调。

add_shortcode( \'picsum\', \'picsum_func\' );
function picsum_func( $atts ) {
    return "https://picsum.photos/id/237/200/300";
}
很简单，对吧？

当我在前端打开这篇文章时，它会正确地渲染图像。此外，当我在编辑器上打开帖子时，它不会为图像块渲染任何图像，但块肯定在那里。

奇怪的是，在我的控制台日志中有一个错误

GET http://example.local/wp-admin/[picsum] 404 (Not Found), 我无法调试它，因为堆栈跟踪没有帮助，至少对我没有帮助。最新的WP和它携带的编辑器以及GB repo的最新版本都会出现这种情况。

你能帮我确定问题是什么吗？我该如何预防？这个请求来自哪里？

堆栈跟踪如下：

Image (async)       
setValueForProperty @   react-dom.development.js:1368
setInitialDOMProperties @   react-dom.development.js:5954
setInitialProperties    @   react-dom.development.js:6149
finalizeInitialChildren @   react-dom.development.js:7622
completeWork    @   react-dom.development.js:19113
completeUnitOfWork  @   react-dom.development.js:22324
performUnitOfWork   @   react-dom.development.js:22300
workLoopSync    @   react-dom.development.js:22265
performSyncWorkOnRoot   @   react-dom.development.js:21891
(anonymous) @   react-dom.development.js:11224
unstable_runWithPriority    @   react.development.js:2685
runWithPriority$1   @   react-dom.development.js:11174
flushSyncCallbackQueueImpl  @   react-dom.development.js:11219
flushSyncCallbackQueue  @   react-dom.development.js:11207
scheduleUpdateOnFiber   @   react-dom.development.js:21334
dispatchAction  @   react-dom.development.js:15795
onStoreChange   @   index.js:201
onChange    @   index.js:217
(anonymous) @   index.js:175
dispatch    @   redux.js:297
(anonymous) @   index.js:24
(anonymous) @   promise-middleware.js:20
(anonymous) @   resolvers-cache-middleware.js:52
dispatch    @   redux.js:659
unhandledActionControl  @   runtime.js:49
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:38
any @   builtin.js:15
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:37
Promise.then (async)        
(anonymous) @   runtime.js:37
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:38
(anonymous) @   runtime.js:39
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:38
iterate @   create.js:51
runtime @   create.js:73
iterator    @   builtin.js:90
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:38
any @   builtin.js:15
(anonymous) @   create.js:47
next    @   create.js:46
unhandledActionControl  @   runtime.js:50
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:38
any @   builtin.js:15
(anonymous) @   create.js:47
next    @   create.js:46
unhandledActionControl  @   runtime.js:50
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:38
iterate @   create.js:51
runtime @   create.js:73
(anonymous) @   runtime.js:59
(anonymous) @   runtime.js:58
(anonymous) @   index.js:27
(anonymous) @   promise-middleware.js:20
(anonymous) @   resolvers-cache-middleware.js:52
(anonymous) @   index.js:298
(anonymous) @   index.js:72
commitHookEffectListMount   @   react-dom.development.js:19866
commitLifeCycles    @   react-dom.development.js:19922
commitLayoutEffects @   react-dom.development.js:22938
callCallback    @   react-dom.development.js:182
invokeGuardedCallbackDev    @   react-dom.development.js:231
invokeGuardedCallback   @   react-dom.development.js:286
commitRootImpl  @   react-dom.development.js:22676
unstable_runWithPriority    @   react.development.js:2685
runWithPriority$1   @   react-dom.development.js:11174
commitRoot  @   react-dom.development.js:22516
finishSyncRender    @   react-dom.development.js:21942
performSyncWorkOnRoot   @   react-dom.development.js:21928
(anonymous) @   react-dom.development.js:11224
unstable_runWithPriority    @   react.development.js:2685
runWithPriority$1   @   react-dom.development.js:11174
flushSyncCallbackQueueImpl  @   react-dom.development.js:11219
flushSyncCallbackQueue  @   react-dom.development.js:11207
scheduleUpdateOnFiber   @   react-dom.development.js:21334
dispatchAction  @   react-dom.development.js:15795
onStoreChange   @   index.js:201
onChange    @   index.js:217
(anonymous) @   index.js:175
dispatch    @   redux.js:297
(anonymous) @   index.js:24
(anonymous) @   promise-middleware.js:20
(anonymous) @   resolvers-cache-middleware.js:52
dispatch    @   redux.js:659
unhandledActionControl  @   runtime.js:49
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:38
Promise.then (async)        
(anonymous) @   runtime.js:37
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:38
Promise.then (async)        
(anonymous) @   runtime.js:37
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:38
any @   builtin.js:15
(anonymous) @   create.js:47
next    @   create.js:46
unhandledActionControl  @   runtime.js:50
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:38
(anonymous) @   runtime.js:39
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:38
(anonymous) @   runtime.js:39
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:38
any @   builtin.js:15
(anonymous) @   create.js:47
next    @   create.js:46
unhandledActionControl  @   runtime.js:50
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:38
any @   builtin.js:15
(anonymous) @   create.js:47
next    @   create.js:46
unhandledActionControl  @   runtime.js:50
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:38
any @   builtin.js:15
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:37
any @   builtin.js:15
(anonymous) @   create.js:47
next    @   create.js:46
unhandledActionControl  @   runtime.js:50
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:38
any @   builtin.js:15
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:37
Promise.then (async)        
(anonymous) @   runtime.js:37
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:38
iterate @   create.js:51
runtime @   create.js:73
iterator    @   builtin.js:90
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:38
(anonymous) @   runtime.js:39
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:38
iterate @   create.js:51
runtime @   create.js:73
iterator    @   builtin.js:90
(anonymous) @   create.js:47
next    @   create.js:46
(anonymous) @   create.js:38
iterate @   create.js:51
runtime @   create.js:73
(anonymous) @   runtime.js:59
(anonymous) @   runtime.js:58
(anonymous) @   index.js:27
(anonymous) @   promise-middleware.js:20
(anonymous) @   resolvers-cache-middleware.js:52
fulfillResolver @   index.js:445
(anonymous) @   index.js:404
setTimeout (async)      
fulfillSelector @   index.js:399
selectorResolver    @   index.js:416
(anonymous) @   editor.js:74
(anonymous) @   index.js:139
__experimentalMarkListeningStores   @   registry.js:99
(anonymous) @   registry.js:158
(anonymous) @   index.js:118
useSelect   @   index.js:138
Editor  @   editor.js:49
renderWithHooks @   react-dom.development.js:14938
mountIndeterminateComponent @   react-dom.development.js:17617
beginWork   @   react-dom.development.js:18731
beginWork$1 @   react-dom.development.js:23314
performUnitOfWork   @   react-dom.development.js:22292
workLoopSync    @   react-dom.development.js:22265
performSyncWorkOnRoot   @   react-dom.development.js:21891
scheduleUpdateOnFiber   @   react-dom.development.js:21323
updateContainer @   react-dom.development.js:24508
(anonymous) @   react-dom.development.js:24893
unbatchedUpdates    @   react-dom.development.js:22038
legacyRenderSubtreeIntoContainer    @   react-dom.development.js:24892
render  @   react-dom.development.js:24975
initializeEditor    @   index.js:141
(anonymous) @   post.php?post=5&action=edit:3649

1 个回复
SO网友:Tom J Nowell

你能帮我确定问题是什么吗？我该如何预防？这个请求来自哪里？

短代码仅在前端处理。就块编辑器而言，指定的URL为[picsum] 这是一个未处理的短代码。

这个问题没有简单的解决方法，要使其正常工作，需要对块编辑器的工作原理进行广泛和持续的修改，这将导致出现问题。例如，您可以过滤块并用实际URL动态替换属性，但新URL将被保存，而不是保存短代码。此外，每个短代码都需要通过AJAX调用独立处理，因此它们不会相互交互，从而破坏了基于共享变量的许多功能。在任何时候，核心模块行为可能会消除所有这些，从而取消所有工作。此外，如果用户尝试编辑图像、裁剪/旋转或替换图像，会发生什么情况？不能裁剪短代码。

Shortcodes in HTML attributes are not the solution you were hoping for and you have hit a dead end.

在这个特定的示例中，创建一个包含由过滤器生成的图像URL的附件会更容易，这样它就相当于picsum shortcode，但这是一项单独的任务，可能对您没有帮助，正如您在评论中提到的，这只是一个简化的示例。

基本上，这需要创建自定义块或使用过滤器实现替代方案。

例如，如果您的目标是动态填充图像的src，那么可以使用JS过滤器添加用于选择数据源的道具和控件，然后用动态值替换核心属性。可以使用PHP块呈现过滤器将动态值放置在src 呈现内容时的html属性。

对于内联文本，富格文本格式库API可用于在向用户显示处理后的值时插入短代码。这非常类似于内联图像的工作方式，即内联插入图像块，而内联图像标记是保存的内容

标签： images   shortcode   block-editor   小码农  

相关推荐

Images getting smashed

我正在开发一个网站，我遇到了一个关于图像和图库的问题。每当你进入页面时，图像都会被破坏，一旦你刷新几次，它就会被修复，但第一次进入页面时，它看起来是这样的：当它看起来像这样时：这些图像经过的过程是：上传画廊（Gutenberg Block）使用EWW插件进行优化之后，关于图像优化，我激活了PageSpped Ninja、AutoOptimize和Smush插件。我已尝试禁用所有这些功能，但问题仍然存在，我希望您能帮助我解决这个问题。谢谢：D