diff --git a/inc/render/class-posts-grid-block.php b/inc/render/class-posts-grid-block.php
index 3f330e3b5..5b91680c8 100644
--- a/inc/render/class-posts-grid-block.php
+++ b/inc/render/class-posts-grid-block.php
@@ -22,6 +22,18 @@ class Posts_Grid_Block {
* @return mixed|string
*/
public function render( $attributes ) {
+
+ if ( ! empty( $attributes['enableRankMathContentAnalysis'] ) ) {
+
+ // Load script for rank math integration.
+ $asset_file = include OTTER_BLOCKS_PATH . '/build/blocks/rank-math-content.asset.php';
+ $asset_file['dependencies'][] = 'wp-hooks';
+ $asset_file['dependencies'][] = 'rank-math-analyzer';
+ wp_enqueue_script( 'otter-rank-math-integration', OTTER_BLOCKS_URL . 'build/blocks/rank-math-content.js', $asset_file['dependencies'], $asset_file['version'], true );
+ wp_script_add_data( 'otter-rank-math-integration', 'defer', true );
+ }
+
+
$categories = 0;
if ( isset( $attributes['categories'] ) ) {
diff --git a/src/blocks/blocks/posts/block.json b/src/blocks/blocks/posts/block.json
index d8e633208..9124e849c 100644
--- a/src/blocks/blocks/posts/block.json
+++ b/src/blocks/blocks/posts/block.json
@@ -231,6 +231,10 @@
},
"featuredPostOrder": {
"type": "string"
+ },
+ "enableRankMathContentAnalysis": {
+ "type": "boolean",
+ "default": false
}
},
"supports": {
diff --git a/src/blocks/blocks/posts/inspector.js b/src/blocks/blocks/posts/inspector.js
index 56b34dfaf..0e701d4e0 100644
--- a/src/blocks/blocks/posts/inspector.js
+++ b/src/blocks/blocks/posts/inspector.js
@@ -120,7 +120,7 @@ const Inspector = ({
const categorySuggestions = categoriesList.reduce(
( accumulator, category ) => ({
...accumulator,
- [ category.name ]: category
+ [category.name]: category
}),
{}
);
@@ -174,7 +174,7 @@ const Inspector = ({
};
const changeBoxShadow = ( type, data ) => {
- const boxShadow = { ...attributes[ type ] };
+ const boxShadow = { ...attributes[type] };
Object.entries( data ).map( ([ key, val ] = data ) => {
boxShadow[key] = val;
});
@@ -185,7 +185,7 @@ const Inspector = ({
return (
- { 'settings' === tab && (
+ {'settings' === tab && (
{
+ label={__( 'Post Type', 'otter-blocks' )}
+ help={__( 'WordPress contains different types of content and they are divided into collections called "Post types". By default there are a few different ones such as blog posts and pages, but plugins could add more.', 'otter-blocks' )}
+ value={attributes.postTypes[0] || null}
+ onChange={( value ) => {
if ( value ) {
setAttributes({ postTypes: [ value ] });
}
- } }
+ }}
options={
slugs.map( slug => ({ label: convertToTitleCase( slug ), value: slug }) )
}
/>
setAttributes({ style: value }) }
+ value={attributes.style}
+ onChange={value => setAttributes({ style: value })}
/>
- { 'grid' === attributes.style && (
+ {'grid' === attributes.style && (
setAttributes({ columns }) }
- min={ 1 }
- max={ 5 }
+ label={__( 'Columns', 'otter-blocks' )}
+ value={attributes.columns}
+ onChange={columns => setAttributes({ columns })}
+ min={1}
+ max={5}
/>
- ) }
+ )}
setAttributes({ textAlign }) }
+ onChange={textAlign => setAttributes({ textAlign })}
hasIcon
/>
setAttributes({ order: value }) }
- onOrderByChange={ value => setAttributes({ orderBy: value }) }
- numberOfItems={ attributes.postsToShow }
- onNumberOfItemsChange={ value => setAttributes({ postsToShow: value }) }
- categorySuggestions={ categorySuggestions }
- selectedCategoryId={ selectedCategoryId }
- selectedCategories={ selectedCategories }
- onCategoryChange={ selectCategories }
+ order={attributes.order}
+ orderBy={attributes.orderBy}
+ onOrderChange={value => setAttributes({ order: value })}
+ onOrderByChange={value => setAttributes({ orderBy: value })}
+ numberOfItems={attributes.postsToShow}
+ onNumberOfItemsChange={value => setAttributes({ postsToShow: value })}
+ categorySuggestions={categorySuggestions}
+ selectedCategoryId={selectedCategoryId}
+ selectedCategories={selectedCategories}
+ onCategoryChange={selectCategories}
/>
setAttributes({ offset: Number( value ) }) }
+ value={attributes.offset}
+ min={0}
+ onChange={value => setAttributes({ offset: Number( value ) })}
/>
setAttributes({ enableFeaturedPost })}
+ label={__( 'Enable Featured Post', 'otter-blocks' )}
+ checked={attributes.enableFeaturedPost}
+ onChange={enableFeaturedPost => setAttributes({ enableFeaturedPost })}
/>
{
attributes.enableFeaturedPost && (
setAttributes({ featuredPostOrder: 'none' !== value ? value : undefined }) }
+ ]}
+ onChange={value => setAttributes({ featuredPostOrder: 'none' !== value ? value : undefined })}
/>
)
}
+ setAttributes({ enableRankMathContentAnalysis })}
+ />
+
-
+
- ) }
+ )}
- { 'style' === tab && (
+ {'style' === tab && (
setAttributes({ titleTag }) }
+ ]}
+ onChange={titleTag => setAttributes({ titleTag })}
/>
responsiveSetAttributes( value, [ 'customTitleFontSize', 'customTitleFontSizeTablet', 'customTitleFontSizeMobile' ]) }
+ value={responsiveGetAttributes([ attributes.customTitleFontSize, attributes.customTitleFontSizeTablet, attributes.customTitleFontSizeMobile ])}
+ onChange={value => responsiveSetAttributes( value, [ 'customTitleFontSize', 'customTitleFontSizeTablet', 'customTitleFontSizeMobile' ])}
/>
responsiveSetAttributes( value, [ 'customDescriptionFontSize', 'customDescriptionFontSizeTablet', 'customDescriptionFontSizeMobile' ]) }
+ value={responsiveGetAttributes([ attributes.customDescriptionFontSize, attributes.customDescriptionFontSizeTablet, attributes.customDescriptionFontSizeMobile ])}
+ onChange={value => responsiveSetAttributes( value, [ 'customDescriptionFontSize', 'customDescriptionFontSizeTablet', 'customDescriptionFontSizeMobile' ])}
/>
responsiveSetAttributes( value, [ 'customMetaFontSize', 'customMetaFontSizeTablet', 'customMetaFontSizeMobile' ]) }
+ value={responsiveGetAttributes([ attributes.customMetaFontSize, attributes.customMetaFontSizeTablet, attributes.customMetaFontSizeMobile ])}
+ onChange={value => responsiveSetAttributes( value, [ 'customMetaFontSize', 'customMetaFontSizeTablet', 'customMetaFontSizeMobile' ])}
/>
setAttributes({ textColor }),
@@ -420,133 +426,133 @@ const Inspector = ({
label: __( 'Border', 'otter-blocks' ),
isShownByDefault: false
}
- ] }
+ ]}
/>
setAttributes({ borderRadius }) }
+ label={__( 'Border Radius', 'otter-blocks' )}
+ values={numberToBox( attributes.borderRadius )}
+ onChange={borderRadius => setAttributes({ borderRadius })}
id="o-border-raduis-box"
/>
- { 'list' === attributes.style && (
+ {'list' === attributes.style && (
responsiveSetAttributes( value, [ 'imageWidth', 'imageWidthTablet', 'imageWidthMobile' ]) }
+ value={responsiveGetAttributes([ attributes.imageWidth, attributes.imageWidthTablet, attributes.imageWidthMobile ])}
+ onChange={value => responsiveSetAttributes( value, [ 'imageWidth', 'imageWidthTablet', 'imageWidthMobile' ])}
/>
- ) }
+ )}
changeBoxShadow( 'imageBoxShadow', data ) }
+ boxShadow={attributes.imageBoxShadow}
+ onChange={data => changeBoxShadow( 'imageBoxShadow', data )}
/>
- { 'list' !== attributes.style && (
+ {'list' !== attributes.style && (
responsiveSetAttributes( value, [ 'columnGap', 'columnGapTablet', 'columnGapMobile' ]) }
+ value={responsiveGetAttributes([ attributes.columnGap, attributes.columnGapTablet, attributes.columnGapMobile ])}
+ onChange={value => responsiveSetAttributes( value, [ 'columnGap', 'columnGapTablet', 'columnGapMobile' ])}
/>
- ) }
+ )}
responsiveSetAttributes( value, [ 'rowGap', 'rowGapTablet', 'rowGapMobile' ]) }
+ value={responsiveGetAttributes([ attributes.rowGap, attributes.rowGapTablet, attributes.rowGapMobile ])}
+ onChange={value => responsiveSetAttributes( value, [ 'rowGap', 'rowGapTablet', 'rowGapMobile' ])}
/>
responsiveSetAttributes( value, [ 'padding', 'paddingTablet', 'paddingMobile' ]) }
+ value={responsiveGetAttributes([ attributes.padding, attributes.paddingTablet, attributes.paddingMobile ])}
+ onChange={value => responsiveSetAttributes( value, [ 'padding', 'paddingTablet', 'paddingMobile' ])}
/>
setAttributes({ contentGap }) }
+ value={attributes.contentGap}
+ onChange={contentGap => setAttributes({ contentGap })}
/>
setAttributes({ borderWidth }) }
+ label={__( 'Width', 'otter-blocks' )}
+ value={attributes.borderWidth}
+ onChange={borderWidth => setAttributes({ borderWidth })}
/>
setAttributes({ cardBorderRadius }) }
+ label={__( 'Radius', 'otter-blocks' )}
+ value={attributes.cardBorderRadius}
+ onChange={cardBorderRadius => setAttributes({ cardBorderRadius })}
id="o-border-raduis-box"
/>
changeBoxShadow( 'boxShadow', data ) }
+ boxShadow={attributes.boxShadow}
+ onChange={data => changeBoxShadow( 'boxShadow', data )}
/>
- ) }
+ )}
);
};
diff --git a/src/blocks/blocks/posts/types.d.ts b/src/blocks/blocks/posts/types.d.ts
index aa1330aa1..79921bee6 100644
--- a/src/blocks/blocks/posts/types.d.ts
+++ b/src/blocks/blocks/posts/types.d.ts
@@ -32,7 +32,7 @@ type Attributes = {
customDescriptionFontSize: number
customDescriptionFontSizeTablet: number
customDescriptionFontSizeMobile: number
- borderRadius: number|object
+ borderRadius: number | object
borderWidth: string
cardBorderRadius: object
boxShadow: BoxShadow
@@ -40,7 +40,7 @@ type Attributes = {
textAlign: string
verticalAlign: string
enableFeaturedPost: boolean
- imageWidth: number|string
+ imageWidth: number | string
imageWidthTablet: string
imageWidthMobile: string
columnGap: string
@@ -54,7 +54,8 @@ type Attributes = {
paddingMobile: string
contentGap: string
featuredPostOrder: string
+ enableRankMathContentAnalysis: boolean
}
export type PostProps = BlockProps
-export interface PostInspectorProps extends InspectorProps {}
+export interface PostInspectorProps extends InspectorProps { }
diff --git a/src/blocks/frontend/rank-math-content/index.ts b/src/blocks/frontend/rank-math-content/index.ts
new file mode 100644
index 000000000..16666ca90
--- /dev/null
+++ b/src/blocks/frontend/rank-math-content/index.ts
@@ -0,0 +1,15 @@
+import { domReady } from '../../helpers/frontend-helper-functions';
+
+domReady( () => {
+ console.log( 'Loaded' );
+ const postsHtml = document.querySelectorAll( '.wp-block-themeisle-blocks-posts-grid' );
+
+ const content = Array.from( postsHtml ).map( ( post ) => post.innerHTML ).join( '' );
+
+ window.wp.hooks.addFilter( 'rank_math_content', 'rank-math', () => {
+ console.log( 'rank_math_content' );
+ return content;
+ });
+
+ window?.rankMathEditor?.refresh( 'content' );
+});
diff --git a/webpack.config.js b/webpack.config.js
index 403006677..9154034d1 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -8,15 +8,15 @@ const blocks = require( './blocks.json' );
defaultConfig.plugins.splice( 1, 1 ); // We need to remove Core's Copy Files plugin.
-const blockFiles = Object.keys( blocks ).filter( block => blocks[ block ].block !== undefined && true !== blocks[ block ]?.isPro )
+const blockFiles = Object.keys( blocks ).filter( block => blocks[block].block !== undefined && true !== blocks[block]?.isPro )
.map( block => {
return {
- source: `src/${ blocks[ block ].block }`,
- destination: `build/blocks/${ block }/`
+ source: `src/${blocks[block].block}`,
+ destination: `build/blocks/${block}/`
};
});
-const blockFolders = Object.keys( blocks ).filter( block => true !== blocks[ block ]?.isPro ).map( block => `build/blocks/${ block }` );
+const blockFolders = Object.keys( blocks ).filter( block => true !== blocks[block]?.isPro ).map( block => `build/blocks/${block}` );
module.exports = [
{
@@ -132,7 +132,8 @@ module.exports = [
sticky: './src/blocks/frontend/sticky/index.ts',
accordion: './src/blocks/frontend/accordion/index.js',
'live-search': './src/blocks/frontend/live-search/index.ts',
- 'live-search-style': './src/blocks/frontend/live-search/style.scss'
+ 'live-search-style': './src/blocks/frontend/live-search/style.scss',
+ 'rank-math-content': './src/blocks/frontend/rank-math-content/index.ts'
},
output: {
path: path.resolve( __dirname, './build/blocks' ),