mimeType = $params['mimeType']; } } public function renderContent(Renderer $renderer) { $id = '_acm_' . $this->id; $this->editorId = $id; $stringValue = $this->getMainSettingValue(''); if ( $stringValue === null ) { $stringValue = ''; } echo '
'; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- buildInputElement() is safe. echo $this->buildInputElement( [ 'id' => $id, 'class' => 'large-text', 'cols' => 100, 'rows' => 5, ], 'textarea', esc_textarea($stringValue) ); $this->outputSiblingDescription(); echo '
'; if ( $this->enqueueCodeEditor() ) { static::enqueueDependencies(); if ( did_action(self::SCRIPT_ACTION) ) { $this->outputInitScript(); } else { add_action(self::SCRIPT_ACTION, [$this, 'outputInitScript']); } } } protected function enqueueCodeEditor() { //Don't enqueue the editor more than once. if ( $this->triedToEnqueueEditor ) { return !empty($this->editorSettings); } $this->triedToEnqueueEditor = true; $additionalCodeMirrorOptions = []; //Strangely, WordPress disables linting for CSS by default even though //it is actually supported. Let's enable it explicitly. This needs to be //done *before* calling wp_enqueue_code_editor() because that function //uses the "lint" option to decide whether to enqueue the linter(s). if ($this->mimeType === 'text/css') { $additionalCodeMirrorOptions['lint'] = true; } //This can return false if, for example, the user has disabled syntax highlighting. $this->editorSettings = wp_enqueue_code_editor([ 'type' => $this->mimeType, 'codemirror' => $additionalCodeMirrorOptions, ]); if ( empty($this->editorSettings) ) { return false; } //Enable linting and a few other things for CSS and JavaScript. if ( isset($this->editorSettings['codemirror']) && in_array( $this->mimeType, ['text/css', 'text/javascript', 'application/javascript'] ) ) { $this->editorSettings['codemirror'] = array_merge( $this->editorSettings['codemirror'], [ 'lint' => true, 'autoCloseBrackets' => true, 'matchBrackets' => true, ] ); if ( empty($this->editorSettings['codemirror']['gutters']) ) { $this->editorSettings['codemirror']['gutters'][] = 'CodeMirror-lint-markers'; } //For CSS in particular, setting mode to "css" appears to enable //some additional linting, like warnings for unknown CSS properties. if ( $this->mimeType === 'text/css' ) { $this->editorSettings['codemirror']['mode'] = 'css'; } } return true; } public function outputInitScript() { if ( !$this->editorId || empty($this->editorSettings) ) { //Code editor was not enqueued for some reason. return; } ?> enqueueCodeEditor(); } protected function getKoComponentParams() { if ( !$this->triedToEnqueueEditor ) { $this->enqueueCodeEditor(); } $params = parent::getKoComponentParams(); $params['mimeType'] = $this->mimeType; $params['editorSettings'] = $this->editorSettings; return $params; } }